ShapeShifter Modules
ShapeShifter is a WordPress plugin. It provides a page-building system made up of ten content modules. Each module is designed for a specific way of laying out content — from heroes and column layouts, to carousels, accordions, and image-and-text rows. This guide explains what each module does and how to use its settings to get your content looking the way you want it.
ShapeShifter requires the Advanced Custom Fields Pro Wordpress plugin to be installed and active on your site.
How pages are built
Every ShapeShifter page is built by stacking modules vertically — from the top of the page to the bottom. You choose which module fits the content you're placing, then use its settings to control how it looks.
Modules are sections
Think of each module as a horizontal band of your page. A typical page is four to eight modules stacked top to bottom — a hero, a few content sections, and a call-to-action at the bottom. You pick the module that matches the layout you need, fill in your content, and configure its settings.
Every module shares common settings
All ten modules share the same core settings for spacing, background color, section width, and dividers. Once you're familiar with those shared controls, learning each new module is mostly just understanding what's unique about it.
Settings every module has
These settings appear on every module and are the most direct controls for shaping how a section looks on the page.
Width & LayoutMakes the section's background color or image stretch edge to edge across the full browser window. The content inside stays at the site's standard reading width and remains centered. Turn this on any time you want a section to feel full-bleed.
Keeps the content from stretching wider than the site's maximum width. Use this together with Size to Window Width — if the background fills edge to edge but the content has no width limit, text will stretch uncomfortably wide on large screens.
Applies a narrower maximum width to the content. Useful for centered text, pull quotes, or reading-heavy content that benefits from a shorter line length.
Controls the padding around the module's content.
Use None when two modules need to sit flush against each other. Use Sides only for left and right padding without extra space above or below.
Sets a background color for the whole module. Enter a hex value, or use one of the site's pre-set color variables defined in the site's style guide.
Places an image behind the entire module, filling and covering the full section area. If the image is dark, turn on Use Light Color Text so text and buttons stay readable over it.
Adds a semi-transparent color overlay on top of the background image. Enter an RGBA value to control the color and opacity — a dark tint at 50% opacity makes white text legible over most photos.
Switches all text and buttons inside the module to their light-on-dark versions. Turn this on whenever the module has a dark background color or image.
Adds a thin dividing line above or below the module. Top and bottom rules are independent — add either, both, or neither.
A private label visible only inside the WordPress editor — never shown to visitors. Use it to keep your block list organized on long pages.
Hides the module from the published page without deleting it. Useful for temporarily removing a section while keeping its content intact.
The Modules
ShapeShifter has ten modules, each built for a different kind of content layout. Choosing the right module for what you're trying to display is the most important decision when building a page.
Columned Content
The most flexible module. Use it for heroes, single-column intros, two- or three-column layouts, stat bars, and anywhere you need content sitting side by side. Also handles full-width background images and CTAs.
Slideshow & Grid
Displays a set of items — team members, services, events, portfolio pieces — as either a scrolling carousel or a static grid. Each item has its own image, headline, description, and optional button.
Alternating Rows
A series of rows where an image and a block of text alternate sides — image left on one row, image right on the next. The standard choice for feature breakdowns or step-by-step content.
Quote Carousel
A carousel of testimonials or pull quotes. Each item can include the quote text, the author's name, their title, and an optional portrait photo.
Accordion / FAQ
A list of collapsible items — click a heading to expand the content below it. Ideal for FAQs, product details, or any content where you want answers on demand without cluttering the page.
Sticky Column Layout
Two columns where one side stays pinned to the screen as the visitor scrolls through content in the other. Useful when you want a form, image, or summary to remain visible down a long page.
Menu & Price List
A structured list of items with names, descriptions, and prices. Built for restaurant menus, service packages, or any content that follows a name-and-price pattern.
Divider
A simple horizontal rule for separating sections. Use it when you need a visual break between two modules without adding extra spacing or background color.
Custom HTML
A freeform block for custom code — embeds, third-party widgets, or anything that doesn't fit the structured modules. For advanced use only.
Reusable Module
Pulls in a saved module from elsewhere in WordPress. If the same CTA block appears on multiple pages, M10 lets you maintain one version that updates everywhere automatically.
Not sure which module to use? Start with M1 — it handles the most common layouts. Displaying a repeating set of items like cards or team members? That's M2. For alternating image-and-text rows that stack down the page, use M3.
Getting Started
Follow these steps to install ShapeShifter, configure your site styles, and start adding modules to your pages.
Installation
Be sure you have the Advanced Custom Fields Pro Wordpress plugin installed.
In your WordPress admin, go to Plugins and click Add Plugin. Select Upload Plugin, choose the shapeshifter-modules.zip file from your computer, and click Install Now. Once installed, activate the plugin.
In your WordPress admin, go to Settings → ShapeShifter Modules and enter your license key. A valid license is required to enable the full suite of modules.
Under Settings → ShapeShifter Modules, open the DarkPhysiCSS Config tab. This is where you configure your website's design tokens — colors, spacing, typography, and other style variables that all modules inherit. Set these up to match your site's brand before adding modules to your pages.
Open the Block Editor Preview tab under Settings → ShapeShifter Modules. Provide a path to your website's stylesheet — or a custom stylesheet — so the WordPress block editor can apply your site's styles while you're editing. This ensures modules look accurate inside the editor, not just on the published page.
Once your settings are saved, open any page in the WordPress block editor. Click the + button to open the Block Menu, search for "M:" or browse the ShapeShifter category, and select the module you want to add.
M1 — Columned Content
M1 is the module you'll reach for most often. It handles any layout where content sits in one or more side-by-side columns — a simple centered headline, a two-column text-and-image layout, a three-column stat bar, or a full-width hero with a background photo and CTA. Each column is independent and has its own settings.
Common layouts using M1
M1 handles a wide range of layouts depending on how many columns you use and what you put in each one.
A single full-width column — for page heroes, section intros, or a centered message with an optional CTA button.
Text on one side, an image on the other. Control which side each goes on and the width ratio between them.
Three equal columns — perfect for a row of stats, service highlights, or feature points.
If you need image and text rows to alternate sides as they stack down the page, use M3 (Alternating Rows) instead. M1 is for layouts where all columns sit in a single horizontal row.
Section headline & intro text
M1 lets you add an optional headline and intro paragraph that span the full module width above the column grid. These are module-level fields — separate from the headlines and text you put inside individual columns.
A headline that appears above all columns. Use it to title the section — for example, "Our Services" above three service columns. Leave it blank if no section title is needed.
Makes this headline the main title of the page. Only check this for the very first headline on a page — there should be only one page title. Leave it unchecked for all other section headings.
A short paragraph below the section headline and above the columns. Use it to provide context before the column content begins.
Sets a maximum width on the section headline and intro text block, controlling how wide the text can run before wrapping. Enter a pixel value — for example "640px". Leave blank to let the intro text span the full column width.
Controls how large the section headline displays. Sizes follow the site's type scale — H1 through H4, plus named sizes like Big, Medium, Normal, and Small.
Aligns the section headline and intro text — left, center, or right.
Controls the padding around the section headline block. Set to Bottom to add space below before the columns begin, or None to let the columns start right away.
Column layout settings
These settings control how many columns appear and how they're sized. Column counts can be set independently for desktop, tablet, and mobile.
How many columns appear on desktop. Set this first, then decide whether to show fewer columns on smaller screens.
Column count on medium screens — tablets and small laptops. If left blank it matches the desktop count. Common to drop from 3 columns to 2 on tablet.
Column count on phones. Defaults to a single column — most layouts should stack to 1 on mobile so content doesn't get too narrow to read.
When using two columns, this sets how the total width is split between them. Equal halves is the default, but you can choose an uneven split — for example 70/30 for a wide text column next to a narrow image.
The space between columns — set independently for desktop, tablet, and mobile.
Flips the column order when they stack on smaller screens. Checking Reverse on Mobile places the image above the text when they stack — which is often the more natural reading order on a phone.
By default, columns align their content to the vertical middle so a short column and a tall column look balanced. Check this when columns have very different amounts of content and you want each to start from the top instead.
Settings inside each column
Each column in M1 is independent. You can give each one its own headline, body text, image, background, button, and spacing — completely separate from the other columns on the same row.
ContentThe column's heading — displayed larger and bolder above the body text. Leave it blank if the column doesn't need its own heading.
Makes this column's headline the page's main title. Use only once, on the primary heading of the page.
Overrides the size of this column's headline independently of the others.
The main text content of the column — paragraphs, bullet points, links, and basic formatting. This is a rich text editor, formatted the same way as any WordPress content field.
Adjusts the size of this column's body text. Smaller text is useful in dense columns or secondary columns supporting a primary message.
Check this to show a button at the bottom of the column's content.
The label on the button. Defaults to "Read More" if left blank.
Check this and enter a destination URL to make the button navigate somewhere.
Opens the button link in a new browser tab. Use for links to external sites so visitors don't leave your page.
Swaps the button to an outlined style — transparent background with a colored border and text. Typically used on dark or colored backgrounds where the solid button doesn't contrast well.
A more subtle secondary button — outlined and less prominent. Use when a button needs to be present but shouldn't compete with a nearby primary action.
The button opens a lightbox popup containing content you enter in the Popup Content field, instead of navigating to a URL.
Places an image behind this column's content — filling the entire column as a background, not as an inline image. Use this when you want a column that looks like a photo panel with text or a button placed on top of it.
To display an image at its natural size inside the column — like a logo or illustration — add it inside the Body Text field as an inserted image instead.
An alternate image shown on phones. Use this when the desktop image is wide and landscape — it may crop poorly in a tall, narrow mobile column.
Controls which part of the background image stays in frame when cropped to fill the column. If a subject keeps getting cropped out, try center (default), top, bottom, left, or right.
A movement effect on the background image as the visitor scrolls:
A semi-transparent color overlay on this column's background image. Use a dark tint when placing light text over a photo.
A solid background color for this column only, independent from the module's overall background.
Switches this column's text and buttons to their light-on-dark versions. Use when this column has a dark background image or color.
Controls where the column's content sits when the column has a background image — Fill, Top, Middle, or Bottom.
Aligns this column's content vertically relative to the other columns in the same row — Top, Middle, or Bottom.
Aligns the text and button inside this column — left, center, or right. Each column can have its own alignment independently.
Adds internal padding to this column — All, Top, Bottom, Sides, or None. Use None when a column needs to sit flush, like a full-bleed image column.
Caps this column's width at a specific pixel value, overriding the module-level size ratio.
Expands this column's background image or color all the way to the edge of the browser window. The text inside still stays within the normal content width — only the background bleeds. Use for bold split-screen layouts where one side goes edge to edge.
For bleed to work as intended, Size to Window Width must also be turned on at the module level.
Adds a "read more" accordion to this column. A portion of the content is visible initially, and a click reveals the rest.
The clickable text that triggers the expand — for example "Read more about our approach".
M2 — Slideshow & Grid
M2 is for displaying a collection of items — team members, services, events, portfolio pieces — each with its own image, headline, description, and optional button. The same items can be shown as a static grid or a scrolling carousel, controlled by a single setting.
Grid or Slideshow?
The first decision when setting up M2 is how to display the items. Both modes use the same item content — you're just choosing the presentation.
Grid
All items display at once in a multi-column grid. Visitors can see everything without needing to interact. Use a grid when you have a manageable number of items — typically four to eight — and want them all visible at the same time, like a services list or a team page.
Slideshow
Items display in a carousel with navigation arrows and dots. Visitors swipe or click through them. Use a slideshow when you have many items, or want a compact presentation — like testimonials or featured articles — that doesn't need a long scrolling grid.
M2 Settings
Section headline & intro textA heading spanning the full module width above the grid or carousel. Leave blank if no section title is needed.
A short paragraph below the headline and above the items.
Sets a maximum width on the section headline and intro text block, controlling how wide the text can run before wrapping. Enter a pixel value — for example "640px". Leave blank to let the intro text span the full column width.
Controls the size and horizontal alignment of the section headline and intro text — left, center, or right.
Build each item by hand inside the module — entering the image, headline, description, and button for each one individually. Use this when the items are unique content that doesn't already exist in WordPress as posts or pages.
Instead of entering items manually, M2 can pull them automatically from existing WordPress content — blog posts, a custom post type, or specific pages you select. The item's featured image, title, and excerpt become the card's image, headline, and description.
How many item cards appear in a row on desktop. Set separately for desktop, tablet, and mobile. A 4-column desktop grid typically drops to 2 on tablet and 1 on mobile.
The space between item cards in the grid — set independently for each screen size.
Aligns the cards within the grid — left, center, or right. Center is most common when the grid has fewer items than columns.
These settings only apply when the module is set to Display as a Slider. They have no effect in Grid mode.
When enabled, the slider automatically moves to the next item after a set interval. The slider pauses when a visitor hovers over it or interacts with the navigation.
How long each item stays visible before auto-advancing, in milliseconds. 5000 (5 seconds) is a common starting point — increase for content-heavy cards that need more reading time.
How many items are visible in the slider at once. Set to 1 for a full-width single-item carousel, or higher to show partial items peeking in from the sides. Can be set independently for desktop, tablet, and mobile.
Displays left and right arrow buttons on either side of the slider so visitors can manually advance through items.
Displays a row of dots below the slider indicating the current position and total number of items. Visitors can click a dot to jump directly to that item.
When enabled, the slider wraps seamlessly from the last item back to the first. When disabled, the slider stops at the last item and the forward arrow is hidden.
Keeps the active item centered in the slider viewport, with adjacent items partially visible on either side. Works best when Items Visible is set to an odd number.
The space between items in the slider. Set independently for desktop, tablet, and mobile.
The item's main image, displayed at the top of the card above the text content.
The item's title, displayed below the image in a prominent size.
A secondary line below the headline — used for a role, date, category, or price.
The main text content of the card — a short description, excerpt, or summary.
Shows a button at the bottom of the item card. Enter the button label and destination URL when enabled.
Makes the whole card clickable rather than just the button. Use this when every item links somewhere and you want the largest possible click target.
A background color for this specific item card, independent from the module's overall background.
Switches this item's text and button to light-on-dark versions. Use when this card has a dark background color.
Aligns the content inside this item card — left, center, or right.
Makes the item's image fill the entire card as a background rather than sitting at the top above the text. Content is overlaid on top of the image. Turn on Use Light Color Text if the image is dark.
M3 — Alternating Rows
M3 is for content that naturally pairs an image with a block of text. Each row displays an image on one side and a headline, body text, and optional button on the other. When you add more than one row, the image and text sides automatically alternate — creating a rhythm that reads naturally down the page.
What M3 looks like
Each row is a two-column layout — text on one side, image on the other. The sides alternate automatically from row to row.
With Alternating Rows enabled, each new row flips sides automatically.
If you turn on Image on Left without alternating rows, every row shows the image on the left — consistent orientation throughout.
M3 Settings
Section headline & intro textAn optional headline spanning the full module width above all the rows.
A short paragraph below the section headline and above the rows.
Sets a maximum width on the section headline and intro text block. Enter a pixel value — for example "640px". Leave blank to let the intro text span the full width.
When checked, each row flips the image and text sides — row 1 is text left / image right, row 2 is image left / text right, and so on. When unchecked, every row keeps the same orientation.
Starts the first row with the image on the left. When combined with Alternating Rows, the image starts left and alternates from there.
Sets how wide the image column is relative to the text column. The default is 50/50 — a wider image column (66/33) makes photos more prominent, while a wider text column (33/66) works better for long body copy.
The horizontal space between the image and text column in each row. Set independently for desktop, tablet, and mobile.
When rows stack to a single column on phones, this places the image above the text. Usually checking this gives the better visual result on mobile.
Controls the headline size for every row. Applies module-wide — all row headlines use the same size unless overridden per-row.
Controls the body text size for every row.
The row's heading, displayed above the body text on the text side.
The main text content for this row — paragraphs, bullet points, and basic formatting.
Aligns the text content inside the text column — left, center, or right.
Switches this row's text and button to light-on-dark versions. Use when this particular row has a dark background.
Adds a "read more" accordion to this row's text column.
Shows a button below the body text in this row's text column.
The label on the button. Defaults to "View More" if left blank.
Enter a destination URL to make the button navigate somewhere.
The image displayed on the image side of this row. Displayed inline at its natural proportions, not as a background fill.
Makes the image fill the entire column area as a background cover. Useful when you want both columns to be equal in height.
Displays this row's headline on top of the image instead of in the text column. Use with a tint to ensure the text is readable.
A semi-transparent color overlay on the image. Particularly useful when using Headline Over Image — adds contrast so text is legible over the photo.
Optional text placed below the image in the image column — for captions, credits, or supplementary content that belongs with the image rather than in the text column.
M4 — Quote Carousel
M4 displays a set of testimonials or pull quotes in a sliding carousel. Each quote can include the quote text, the author's name, their title, and an optional portrait photo. Visitors move through the quotes using navigation arrows or dots, or the carousel can advance automatically.
What M4 looks like
With a portrait photo, the image appears above the quote. Without a photo, the quote and attribution display on their own.
Navigation arrows and dots let visitors move between quotes. You can enable or disable each independently, or set the carousel to auto-advance.
M4 Settings
Section headline & intro textAn optional heading above the carousel — for example, "What our clients say".
A short paragraph below the section headline and above the carousel.
Sets a maximum width on the section headline and intro text block. Enter a pixel value — for example "640px". Leave blank to let the intro text span the full width.
Controls the size and alignment (left, center, right) of the section headline and intro text.
When enabled, the carousel automatically moves to the next quote after a set interval. The carousel pauses when a visitor hovers over it.
How long each quote stays visible before auto-advancing, in milliseconds. 12000 (12 seconds) is the default — increase for longer quotes that need more reading time.
Displays left and right arrow buttons on either side of the carousel so visitors can manually move between quotes.
Displays a row of dots below the carousel indicating which quote is active and how many total there are.
Aligns the quote text and attribution inside each slide — left, center, or right.
Controls how the carousel is positioned within the module — left, center, or right.
The quote itself. Enter without quotation marks — the module styles it as a blockquote automatically.
The name of the person being quoted, displayed below the quote in bold.
The author's title, role, or company — displayed below the author name in a lighter style.
An optional photo of the person being quoted. Square or portrait-oriented images work best.
M5 — Accordion / FAQ
M5 displays a list of collapsible items — each with a header that a visitor can click to expand or collapse the content below it. Designed for FAQs, but works for any content where you want answers or details available on demand without cluttering the page.
What M5 looks like
By default all items are collapsed, showing only their header. Visitors click a header to reveal the content below it.
Clicking a header expands it to reveal the content. Clicking it again collapses it.
M5 Settings
Section headline & intro textAn optional heading spanning the full module width above the accordion list.
A short paragraph below the section headline and above the accordion items.
Sets a maximum width on the section headline and intro text block. Enter a pixel value — for example "640px". Leave blank to let the intro text span the full width.
Optional text displayed below the entire accordion list — useful for a follow-up prompt or contact link after the FAQ.
M5 uses a two-level structure: sections and items. A section is a collapsible group with its own header. Inside each section you add one or more items, each with its own content block.
The clickable header for this accordion group. When a visitor clicks it, the items inside expand to reveal their content.
The content revealed when this section is expanded — a rich text field supporting paragraphs, lists, links, and basic formatting.
Controls the text size of each accordion section's header.
Controls the text size of the expanded content inside each item.
When enabled, outputs structured FAQ data that search engines can read. This can cause your FAQ answers to appear directly in Google search results as rich snippets. Enable this when the accordion is being used as a genuine FAQ.
M6 — Sticky Column Layout
M6 is a two-column layout where one column stays fixed (sticky) on screen while the visitor scrolls through content in the other. It's designed for pages where you want a persistent element — a contact form, a summary, a CTA, or an image — to remain visible as the visitor reads through a long list of items alongside it.
What M6 looks like
The sticky column stays fixed as the visitor scrolls. Typical uses: a contact form, key details, or a summary that supports a long list of content in the other column.
By default the sticky column is on the right. You can switch it to the left using the Sticky Column Side setting.
M6 Settings
Section headline & intro textAn optional heading spanning the full module width above the two-column layout.
A short paragraph below the section headline and above the columns.
Sets a maximum width on the section headline and intro text block. Enter a pixel value — for example "640px". Leave blank to let the intro text span the full width.
A heading displayed at the top of the sticky column.
The main content of the sticky column — a rich text field. This is where you'd place a form shortcode, a summary block, a CTA, or any other content you want to stay in view as the user scrolls.
Controls whether the sticky column appears on the left or the right. Default is right.
Sets the relative width split between the sticky column and the scrollable items column.
Switches the sticky column's text to light-on-dark versions. Use when the sticky column has a dark background.
Turns off the sticky pinning — both columns scroll normally.
Each item in the scrollable column is a rich text block. Add as many items as needed — they stack vertically as the sticky column stays pinned beside them.
Aligns the text inside each scrollable item — left, center, or right.
Switches the scrollable items column's text to light-on-dark versions.
M7 — Menu & Price List
M7 is a structured list of items where each entry has a name, a description, a price, and an optional image and link. Built for restaurant menus and service packages, but works for any content that follows a name-and-price pattern.
What M7 looks like
Items display as a vertical list with an optional image thumbnail, name, description, and price.
Set Columns to 2 or 3 to display items in a grid rather than a single-column list.
M7 Settings
Section headline & intro textAn optional heading above the item list — for example, "Our Menu" or "Service Packages".
A short paragraph below the headline and above the items.
Sets a maximum width on the section headline and intro text block. Enter a pixel value — for example "640px". Leave blank to let the intro text span the full width.
How many columns the item list uses. Default is 1 (a single vertical list). Set to 2 or 3 to display items in a multi-column grid.
The space between columns when using a multi-column layout.
When enabled, alternates the position of the image between left and right on each row.
When enabled, stacks the image above the text for each item. Useful for a card-style grid layout.
Aligns the text inside each item — left, center, or right.
The name or title of the item, displayed as a heading.
A short description of the item — ingredients, details, or a brief summary.
The price displayed below the description. Enter the price as plain text including any currency symbol — for example "$14" or "From £20/month".
An optional photo for the item.
Makes the image fill its container as a background cover rather than displaying at its natural size.
An optional URL that the item's button links to.
The label for the item's link button.
M8 — Divider
M8 is a simple horizontal rule — a thin line for creating a visual break between two sections of a page. Use it when you need separation without adding background color, extra spacing, or content.
M8 Settings
M8 is deliberately minimal. Most of its settings control how much space appears around the rule rather than the rule itself.
Controls the padding above and below the horizontal rule — choose from All, Top, Bottom, Sides, or None.
Positions the rule left, center, or right within the module.
When checked, the rule is constrained to the site's standard content width rather than stretching edge to edge.
A private editor-only label for this divider. Useful when a page has multiple M8 modules and you want to tell them apart in the block list.
Hides the divider from the published page without deleting it.
If you just need a gap between two modules without a visible line, adjusting the Default Spacing on adjacent modules is often the better choice. Use M8 specifically when you want the line to be visible.
M9 — Custom HTML
M9 renders whatever HTML and shortcodes you enter directly onto the page. It has no structured fields — it's a freeform block for anything that doesn't fit the other modules.
M9 Settings
When to use M9Embed codes from tools like Calendly, Typeform, HubSpot forms, or any other service that provides an HTML snippet. Paste the embed code directly into M9.
Any WordPress shortcode works inside M9 — contact form plugins, custom post type displays, or any feature your theme or plugins expose as a shortcode.
If you need a layout that none of the other modules support, M9 lets you write custom HTML. Use DarkPhysiCSS classes inside your markup to keep spacing and typography consistent with the rest of the page.
The full HTML and/or shortcode content to render. Everything entered here is output directly to the page without additional wrapping or formatting.
Hides the module from the published page without deleting it.
M9 renders code as-is with no safety checks. Invalid HTML can break the layout of the surrounding page. Test changes on a staging environment before publishing, and avoid entering code from sources you don't trust.
M10 — Reusable Module
M10 pulls in the output of another ShapeShifter module saved elsewhere in WordPress and renders it in place. Edit the source module once and every page using M10 to reference it updates automatically.
M10 Settings
ShapeShifter will install a new section in the Wordpress admin titled "Modules". Here you can build modules the same way you build pages. When a module exists, you can use the M10 module anywhere to select and display the module on the site. You can also add the module with a shortcode using the ID of the module I.E. [module id="12345"]. Modules also have the ability to used to create Lightboxes.
When to use M10If the same "Book a consultation" or "Get a quote" section appears at the bottom of multiple pages, build it once as a standalone module and reference it with M10 everywhere it's needed.
Content blocks that need to be identical across many pages — an award bar, a trust-mark strip, or a newsletter signup — are good candidates for M10.
When you need to update a block that appears on dozens of pages, M10 means you make the change in one place and it propagates everywhere automatically.
Choose the saved module to pull in from a dropdown list of available modules in WordPress. The selected module's full output is rendered in place of M10.
A private editor-only label so you can identify this M10 instance in the block list — for example, "Footer CTA (reusable)".
Select "Add to site as a Lightbox" on the "Module" panel in the editor and give it a unique name.
Hides this M10 instance from the published page without affecting the source module or any other pages using it.
M10 references a module — it doesn't copy it. If the source module is deleted or deactivated, M10 will render empty on every page that references it. Always check before removing a module that may be in use.
DarkPhysiCSS Quick Reference
DarkPhysiCSS is the CSS utility framework that ShapeShifter modules use for layout, spacing, typography, and color. When adding custom HTML to a module's body text field, use these classes instead of inline styles — they keep spacing and color consistent with the rest of the site. Full documentation →
Spacing & Typography
All spacing in DarkPhysiCSS ties back to a single --dp-site-padding variable, so the entire site's rhythm can be adjusted from one place.
Padding & Margin
Syntax: dp-pad:[size]:[side] dp-marg:[size]:[side]
dp-paddp-pad:25pcdp-pad:50pcdp-pad:10pxdp-pad:20pxSide modifiers: :top :bot :lt :rt
Screen modifiers: :xs :s :m :l
Example: dp-pad:25pc:top:m = 25% padding top, medium screens only.
Font Sizes & Weights
Syntax: dp-txt:[size] dp-fnt:[weight]
dp-txt:h1dp-txt:h2dp-txt:h3dp-txt:h4dp-txt:bigdp-txt:normdp-txt:smdp-txt:xsmFont weight: dp-fnt:600 — values from 100–800, or :bold / :light.
Colors & Grid
Color Classes
DarkPhysiCSS colors are configured per-site via CSS variables. clr1–clr8 are brand hues; grey1–grey4 are greyscale.
dp-bg:clr1dp-bg:clr2dp-txt:clr1dp-txt:clr2dp-bg:grey1dp-bg:grey4dp-bg:blkdp-txt:whtGrid Columns
Percentage-based columns in 5% increments. Append a screen modifier to change width at a breakpoint. Float-based — always add dp-clear after each row.
dp-grid:50pcdp-grid:33pcdp-grid:66pcdp-grid:25pcdp-grid:fit:3dp-gutter:20pxExample: dp-grid:33pc dp-grid:100pc:s = one-third on desktop, full width on small screens.
Float-based dp-grid:% columns require <div class="dp-clear"></div> after each row. dp-grid:fit:N uses flexbox and does not need a clearfix.
Alignment, Display & Utilities
dp-txt:cntrdp-txt:rtdp-txt:uppercasedp-pos:cntrdp-containdp-rnddp-hidedp-display:above:mdp-display:below:mdp-flex:valign:middp-flex-col:sFor the full class reference including all breakpoints, flex utilities, and positioning helpers, see the DarkPhysiCSS documentation →
