Layout · Gutenberg
Split Panel block for WordPress
Two-column comparison panel for Before/After, Problem/Solution, or any paired content.
Get Blockenberg
Free Gutenberg block in Blockenberg. The inspector controls and front-end behavior on this page come from this block’s source, not a shared stub.
What it actually does
Two-column comparison panel for Before/After, Problem/Solution, or any paired content.
Inspector panels on this block: Settings, Left Panel, Right Panel. Those titles come from index.js, not from a shared template.
Split Panel has no render.php and no frontend.js. The saved Gutenberg HTML is what visitors see, plus Blockenberg layout/typography CSS.
Where to find it
Gutenberg inserter → Layout → search “Split Panel” (block name `blockenberg/split-panel` in block.json). Style it in the sidebar after insert.
How to use Split Panel block for WordPress
- Install Blockenberg. Install from WordPress.org and activate the plugin.
- Insert the block. Edit a page, click +, search for “Split Panel”, insert it. Category: Layout.
- Configure inspector controls that exist on this block. Open Settings. Set “Show Heading”, “Heading”, “Show Divider”, “Left Panel — Title”.
- Publish. Save the page. Output is the saved block HTML; typography/colors follow Blockenberg shared panels.
Inspector controls from this block’s code
| Control | What the code does |
|---|---|
| Show Heading | On/off toggle in the inspector. Off by default. Saved as `showTitle`. |
| Heading | Text field in the inspector. Saved as `title`. |
| Show Divider | On/off toggle in the inspector. On by default. Saved as `showDivider`. |
| Left Panel — Title | Text field in the inspector. block.json default: The Problem. Saved as `leftTitle`. |
| Body Text | Text field in the inspector. block.json default: Teams waste hours on manual reporting, chase data across multiple tools, and miss insights until it's too late.. Saved as `leftBody`. |
| Right Panel — Title | Text field in the inspector. block.json default: The Solution. Saved as `rightTitle`. |
| Body Text (Right Body) | Text field in the inspector. block.json default: One unified dashboard automates everything — live data, scheduled reports, and instant anomaly alerts.. Saved as `rightBody`. |
| Border Radius | Numeric range control in the inspector. Range 0–32. block.json default: 14. Saved as `borderRadius`. |
| Style — Padding | Numeric range control in the inspector. Range 12–56. block.json default: 28. Saved as `padding`. |
| Icon Size | Numeric range control in the inspector. Range 16–64. block.json default: 36. Saved as `iconSize`. |
| Outer Background | Color control in the inspector. block.json default: #ffffff. Saved as `bgColor`. |
| Colors — Text | Color control in the inspector. block.json default: #374151. Saved as `textColor`. |
| Colors — Title | Color control in the inspector. block.json default: #111827. Saved as `titleColor`. |
| Left Background | Color control in the inspector. block.json default: #fef2f2. Saved as `leftBg`. |
| Left Accent | Color control in the inspector. block.json default: #ef4444. Saved as `leftAccent`. |
| Right Background | Color control in the inspector. block.json default: #f0fdf4. Saved as `rightBg`. |
| Right Accent | Color control in the inspector. block.json default: #10b981. Saved as `rightAccent`. |
When this is the right block
- Two-column comparison panel for Before/After, Problem/Solution, or any paired content — that is the job of Split Panel, not a generic content block.
- Use it when you need the editor control labeled “Show Heading”, which exists on this block’s inspector.
- It matches pages about split, compare, before after.
- Inserter grouping: page structure, sections, and composition.
Notes from the implementation
Static block: markup is saved in post content; no PHP render callback in this folder.
FAQ
How do I add the Split Panel block in WordPress?
Install Blockenberg from WordPress.org, edit a page in the block editor, click +, and search for “Split Panel”. It sits under Layout. After insert, open Settings and set “Show Heading”, “Heading”, “Show Divider”, “Left Panel — Title”.
What makes Split Panel different from other Blockenberg blocks?
Two-column comparison panel for Before/After, Problem/Solution, or any paired content. Inspector labels on this block include “Show Heading”, “Heading”, “Show Divider”, “Left Panel — Title”.
Is the Split Panel Gutenberg block free?
Yes. Split Panel ships inside Blockenberg. Get the plugin from WordPress.org — no paid add-on is required for this block.
Can I style Split Panel to match my theme?
Yes. Blockenberg’s shared typography and color panels apply here, plus any block-specific style controls listed on this page (panels: Settings, Left Panel, Right Panel).
Related layout blocks
Split Hero
Two-column hero section with headline, badge, body text, dual CTA buttons and social proof on one side — image or video on the other. Built for landing pages.
Split Screen
Two-panel side-by-side layout with independent backgrounds, content, and optional scroll-snap.
Sticky Two Column
One column scrolls through feature highlights; the other stays sticky showing the active image — perfect for product tours and feature pages.
Bento Grid
Modern asymmetric bento-box grid with featured large cells and smaller detail cards — perfect for showcasing features, stats, or portfolio highlights.
Breadcrumbs
SEO-friendly navigation trail with Schema.org markup showing the current page hierarchy.
Content Menu
In-page anchor navigation that highlights the current section as the user scrolls — can float fixed on the left or right, or sit inline.
Get Blockenberg
Install Blockenberg from WordPress.org, then insert Split Panel from the Gutenberg inserter.