ShapeShifter Modules — WordPress development hero

ShapeShifter Modules · WordPress Plugin

Build Beautiful WordPress Pages — Without Writing a Line of Code
A professional ACF block system that gives developers and designers a complete page-building toolkit, powered by the DarkPhysiCSS framework.

Get the Plugin

10 Purpose-Built ModulesHero, Grid, Carousel, FAQ, Sidebar & more

DarkPhysiCSS PoweredUtility-first · Zero bloat · Site-configurable

Native Block EditorNo Elementor · Pure ACF block registration

ShapeShifter PublisherOne-command deploy pipeline · Multi-site ready

Everything You Need to Build Stunning Pages Fast

ShapeShifter gives your WordPress site a consistent, structured, and scalable
approach to page building without the bloat of drag-and-drop page builders.

⬡Structured by Design

Ten purpose-built modules handle every common layout pattern.

◈Powered by DarkPhysiCSS

Every module uses dp- utility classes for layout, spacing, color, and typography.

⊞Built for the Block Editor

ShapeShifter registers native ACF blocks inside the WordPress Block Editor.

Ten Modules. Every Layout. One System.

From full-bleed heroes to sticky sidebars, ShapeShifter has a module for every layout need.

M1 — Headline & Columned Content

Heroes, CTAs, stat bars, multi-column text and image layouts with flexible column ratios, column bleed, and background images.

M2 — Slideshow & Card Grid

Responsive slideshows or grid layouts. Configurable per-breakpoint columns with optional Masonry layout.

M3 — Alternating Image + Text Rows

Classic alternating left/right content rows ideal for feature showcases and service breakdowns.

M4 — Quote & Testimonial Carousel

Animated quote carousels with full typographic control for social proof sections.

M5 — Accordion / FAQ

Clean expandable content panels for FAQs and layered content with condensed reading width support.

M6 — Sticky Column Layout

Two-column layout where one column sticks while the other scrolls for docs and feature breakdowns.

M7 — Menu / Product Price List

Structured lists with labels and prices for restaurants, service packages, or product catalogs.

M8 — Horizontal Rule Divider

A clean configurable visual separator with spacing control.

M9 — Raw HTML / CSS / JS Passthrough

Drop in any custom HTML, CSS, or JavaScript for embeds and bespoke elements.

M10 — Reusable Saved Module

M10

Save any module configuration once, reuse it across any page.

Meet DarkPhysiCSS the Engine Under the Hood

A utility-first, site-configurable CSS framework built specifically for ShapeShifter.

Consistent Controls Across Every Module

Every ShapeShifter module ships with the same set of universal fields once you learn one module, you know them all.

Layout & Visual

Look & StyleTheme-defined style variants per module
FX & AnimationsPreset entrance and transition effects
Full-Width FillBackground fills the full browser width while content stays constrained
Column BleedIndividual columns expand edge-to-edge while adjacent columns stay constrained
Horizontal RulesAdd hr above or below any module with a single toggle

Editor & Workflow

Spacing ControlPadding presets: all, top, bottom, sides
Custom ID & ClassesFull CSS targeting hooks built into every module
Module LabelsInternal CMS labels so editors always know what they’re editing
Fixed Content WidthConstrains content to the defined site width
Deactivate ToggleTemporarily hide any module without deleting it

From Code to Live Page In One Command

asdf asd fas df a sdf as dfa sd fa sdasdfsadfa sdf as dfasdfasdfa sdf

ShapShifter Publisher

A lightweight bridge between your local workflow and any WordPress site. Generate a JSON payload, run one command, and your page is live as a draft.

node publish.js \ –payload=page.json \ –slug=about-us \ –site=yoursite

Design

Sketch your layout using any combination of M1–M10 modules.

Generate

Output a page-payload.json containing block code, custom CSS, and image references.

Preview

Review a downloadable HTML preview locally before anything touches the live site.

Publish

Run one command. The Publisher handles image conversion, upload, and block code injection.

node publish.js –payload=page.json –slug=my-page –site=yoursite

Review & Go Live

All pages save as drafts. Review in WordPress admin, then publish when ready.

Trusted by Developers Who Build for Clients

ShapeShifter cut our page build time in half. The module system is consistent and the DarkPhysiCSS classes just make sense once you learn them.

Developer

Agency Client

We stopped fighting with Elementor the day we switched. ShapeShifter gives us control without the bloat and clients can actually edit it themselves.

WordPress Developer

Freelance

The Publisher pipeline is the real game-changer. Generate, preview, deploy. It’s the most professional WordPress workflow I’ve used.

Web Designer

Studio Owner

Common Questions

Does ShapeShifter require a page builder like Elementor or Beaver Builder?

No. ShapeShifter registers blocks directly in the native WordPress Block Editor using ACF. No third-party page builder is required or installed.

Do I need Advanced Custom Fields (ACF) installed?

Yes. ShapeShifter modules are registered as ACF blocks using acf_register_block_type. ACF Pro is required.

What is DarkPhysiCSS and do I need to set it up separately?

DarkPhysiCSS is the CSS framework bundled with the plugin. It is configured per site using a dpcss-config.css file that defines your color palette, fonts, and site width.

Can I use ShapeShifter on multiple client sites?

Yes. The Publisher pipeline supports multi-site workflows via per-site .env.[sitename] config files.

Can I mix ShapeShifter modules with standard Gutenberg blocks?

Yes. ShapeShifter modules are registered as native WordPress blocks and can coexist on any page alongside core Gutenberg blocks.

What happens to images when I publish a payload?

The Publisher script handles image downloading, WebP conversion via Sharp, resizing to max 2000px, and upload to the WordPress media library automatically replacing placeholder IDs in the block code.

Start Building Smarter WordPress Pages Today

Install ShapeShifter Modules and bring structure, speed, and consistency to every WordPress project you build.

Download the Plugin

Read the Docs