Photo of a desk with ShapeShifter used in WordPress's Block Editor

WordPress Page Building, ReimaginedBuild Sophisticated WordPress
Pages with Less Hassle

ShapeShifter is a Plugin for WordPress. It provides a page-building system — a purpose-built toolkit of content blocks, each designed to handle a common layout challenge.

Purpose-Built Modules. Consistent Results.

Prebuilt content modules are the only way to develop sites without re-inventing the wheel every time you make a website. Modules for most page builders give you too much flexibility and zero structure. Developers hate wrestling to style them, while marketing professionals are afraid to break the site editing them.

ShapeShifter takes the opposite approach — each module has a defined purpose and a refined set of controls. The modules are created with lightweight html and intuitive class names for CSS styling, and give editors confidence they won’t affect the styles when editing content.

Below is a list of the full suite:

Module: M1

Headline & Columns

Heroes, feature grids & CTAs

Module: M2

Slideshow & Grid

Slider or card grid display

Module: M3

Alternating Rows

Image + text repeating layout

Module: M4

Quote Carousel

Testimonials & social proof

Accordion / FAQ

Expandable content with SEO schema

Module: M6

Sticky Column

Fixed sidebar with scrolling content

Module: M7

Menu & Product List

Priced items in rows or grid

Module: M8

Section Divider

Styled horizontal rule

Module: M9

Custom HTML / CSS / JS

Raw developer passthrough block

Module: M10

Reusable Module

Save once, embed anywhere

FREE Start Building for No Cost, with Modules 1, 4, & 5

Get the modules to create columned content, personal testimonials, and FAQ accordions.

M1 — Headline & Columned ContentHeroes, Feature Grids, CTAs & More

The workhorse of the system.

Use M1 for any layout that calls for structured columns of text and imagery. Set a module-level headline above your columns, then configure each column independently.

Columns with responsive controls
Video and parallax image backgrounds
Column bleed — extend a column to the full browser edge Shortcode and html code content display

M4 — Testimonial / Quote CarouselSocial Proof That Actually Performs

Turn customer quotes into a polished, auto-advancing carousel.

Add any number of quotes — they automatically become a slideshow. Each entry supports text, author name, title, and an optional portrait photo.

Auto-advance with configurable speed
Show/hide arrows and pagination dots
Portrait image support per quote
Condensed-width mode for pull-quote style

M5 — Accordion / FAQExpandable Content, Built for SEO

The cleanest way to present FAQs.

Add a section headline and intro text above the accordion. Each item has a clickable trigger and supports multiple rows of body content inside.

Multiple content rows per accordion item
Built-in Google FAQ Schema generation
Closing text field for citations or footnotes
Condensed-width mode for focused layouts

Built for

Wordpress Requires

Advanced Custom Fields Pro

Download the Plugin

ProUnlock the Full System with a Pro License and Get All 10 Modules

Get seven additional modules for advanced layouts that support auto population and reusable extensibility.

M2 — Slideshow & Content Grid Slider or Grid —
One Module, Two Modes

Auto-populate from any post type, or hand-pick content.

Switch between a full slideshow and a static grid with a single setting. Both modes support a section headline and intro text above.

Populate with posts from any WordPress post type
Infinite loop, auto-advance, pause-on-hover
Multi-column grid across all breakpoints
Section headline and intro above the grid
Multi page pagination

M3 — Alternating Image & Text Rows Feature Storytelling
in Repeating Rows

Structured image + text pairs that alternate automatically.

Each row pairs an image with a block of text. Enable alternating mode to automatically flip image/text placement row by row.

Configurable column ratios per row
Overlay headline text on image with tint
Image above text on mobile
Row-level bleed to the browser edge

M6 — Sticky Column Layout Keep Key Info in View
While Content Scrolls

One column sticks while the other scrolls freely.

A sidebar stays fixed to the viewport while an adjacent column scrolls through multiple content rows — ideal for spec sheets and feature walkthroughs.

Sticky column on left or right
Scrolling rows support full rich HTML
Configurable column size proportions
Section headline and intro text above

M7 — Menu & Product List Priced Items, Products,
and Services

Horizontal rows or stacked grid — your choice.

Display priced items cleanly with name, description, price, image, and an optional link. Two layout modes with configurable columns.

Horizontal row or stacked grid mode
Alternate image placement per row
Built-in Google Menu Schema for SEO
Image fit or cover per item

M8 — Section Divider Visual Separation,
Done Right

Four style variants to match your brand.

A simple but important finishing touch. Renders a styled horizontal rule between sections, keeping page layouts visually organized.

Four themed style variants
Lightweight — no content configuration
Works between any two modules
Pairs with spacing controls for precision

M9 — Custom HTML / CSS / JS Drop in those 3rd party codes

Pass raw HTML, CSS, and JavaScript directly.

Renders exactly as written — no interference from the module wrapper. Useful for embedding third-party widgets, custom scripts, or one-off layouts.

Raw HTML, inline CSS, and JS support
No wrapper interference on render
Form embeds, iframes, custom scripts
One-off layouts that need full freedom

M10 — Reusable Saved Module Build Once,
Use Everywhere

Create a library of prebuilt content, load it anywhere on the site — ideal for site-wide banners, CTAs, and newsletter blocks.

Live propagation — edit once, updates everywhere
Enable lightboxed content with ease
Perfect for persistent CTAs or banners

Why ShapeShifter Blocks?But Wait! There’s More…

Not only is ShapeShifter a library of content modules developed around popular design patterns refined over years of experience, but it gives you central control to wrangle your site styles and adds powerful features to WordPress’s block editor.
integration is coming soon!

Global Style ControlCentralize Your Site Styles

ShapeShifter style controls allow centralized global management of screen break-points, site spacing, fonts and font sizes, and colors.

Screenshot of ShapeShifter style manager

Block Editor Integration ShapeShifter Supercharges the Block Editor

WordPress’s Block Editor is great, but make it greater with a better layout that incorporates your website styles.

Live Style Preview — Your site’s real stylesheet loads inside the editor — what you see is what your visitors get.
Floatable Control Panel — A three-column, sidebar-style layout replaces the default inspector — faster configuration, less hunting.

Screenshot of ShapeShifter deluxe Block Editor layout

Under the Hood Built on DarkPhysiCSS

A purpose-built utility CSS framework that powers every ShapeShifter module. DarkPhysiCSS is the layout and styling engine underneath every module. Its dp- class system handles grid, spacing, color, and typography — all configured per site via CSS variables. ShapeShifter modules output clean, semantic HTML and let DarkPhysiCSS do the heavy lifting on presentation.

dp- Class System — Grid, spacing, color, and type via prefixed utility classes.
CSS Variable Config — Per-site design tokens: colors, fonts, breakpoints, site width.
Dark Mode Native — Built for dark backgrounds from the ground up — no hacks needed.

Learn More

Choose Your Plan

Every plan includes full access to the module system.
Pro unlocks seven additional modules.

Module	Unlicensed	Pro
M1 — Headline & Columned Content	✓	✓
M4 — Testimonial / Quote Carousel	✓	✓
M5 — Accordion / FAQ	✓	✓
M2 — Slideshow & Content Grid	—	✓
M3 — Alternating Image & Text Rows	—	✓
M6 — Sticky Column Layout	—	✓
M7 — Menu & Product List	—	✓
M8 — Section Divider	—	✓
M9 — Custom HTML / CSS / JS	—	✓
M10 — Reusable Saved Module	—	✓

Stop Rebuilding the Wheel on Every Project

ShapeShifter gives you a consistent, reusable module system that makes WordPress page building faster, more organized, and easier to hand off to clients. Start with the free modules and purchase a Pro license when you’re ready for the full suite.