Layout · Gutenberg
Split Screen block for WordPress
Two-panel side-by-side layout with independent backgrounds, content, and optional scroll-snap.
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-panel side-by-side layout with independent backgrounds, content, and optional scroll-snap.
Inspector panels on this block: Layout. Those titles come from index.js, not from a shared template.
Behavior controls: “Background Type” options: Color, Gradient, Image; “Text Align” options: Top, Center, Bottom; “Split Ratio” options: 50 / 50, 40 / 60, 60 / 40, 33 / 67, 67 / 33; “Vertical Align” options: Top, Center, Bottom.
Split Screen 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 Screen” (block name `blockenberg/split-screen` in block.json). Style it in the sidebar after insert.
How to use Split Screen block for WordPress
- Install Blockenberg. Install from WordPress.org and activate the plugin.
- Insert the block. Edit a page, click +, search for “Split Screen”, insert it. Category: Layout.
- Configure inspector controls that exist on this block. Open Layout. Set “Background Type”, “Image Position”, “Overlay Opacity %”, “Padding X (px)”.
- 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 |
|---|---|
| Background Type | Select control; the chosen value is saved on the block. Options: Color; Gradient; Image. |
| Image Position | Text field in the inspector. |
| Overlay Opacity % | Numeric range control in the inspector. Range 0–90. |
| Padding X (px) | Numeric range control in the inspector. Range 0–120. |
| Padding Y (px) | Numeric range control in the inspector. Range 0–120. |
| Heading Tag | Select control; the chosen value is saved on the block. |
| Heading | Text field in the inspector. |
| Body Text | Text field in the inspector. |
| Text Align | Select control; the chosen value is saved on the block. Options: Top; Center; Bottom. |
| Show Button | On/off toggle in the inspector. |
| Button Label | Text field in the inspector. |
| Button URL | Text field in the inspector. |
| Button Radius (px) | Numeric range control in the inspector. Range 0–50. |
| Heading Color | Color control in the inspector. |
| Text Color | Color control in the inspector. |
| Button BG | Color control in the inspector. |
| Button Text | Color control in the inspector. |
| Split Ratio | Select control; the chosen value is saved on the block. Options: 50 / 50; 40 / 60; 60 / 40; 33 / 67; 67 / 33. block.json default: 50-50. Saved as `splitRatio`. |
| Min Height (px) | Numeric range control in the inspector. Range 200–1000. block.json default: 500. Saved as `minHeight`. |
| Vertical Align | Select control; the chosen value is saved on the block. Options: Top; Center; Bottom. block.json default: center. Saved as `verticalAlign`. |
| Gap Between Panels (px) | Numeric range control in the inspector. Range 0–60. block.json default: 0. Saved as `gap`. |
| Stack on Mobile | On/off toggle in the inspector. On by default. Saved as `stackOnMobile`. |
When this is the right block
- Two-panel side-by-side layout with independent backgrounds, content, and optional scroll-snap — that is the job of Split Screen, not a generic content block.
- Use it when you need the editor control labeled “Background Type”, which exists on this block’s inspector.
- It matches pages about split, screen, two column.
- Inserter grouping: page structure, sections, and composition.
Notes from the implementation
viewScript: this folder’s frontend.js is enqueued on the front end for this block.
FAQ
How do I add the Split Screen block in WordPress?
Install Blockenberg from WordPress.org, edit a page in the block editor, click +, and search for “Split Screen”. It sits under Layout. After insert, open Layout and set “Background Type”, “Image Position”, “Overlay Opacity %”, “Padding X (px)”.
What makes Split Screen different from other Blockenberg blocks?
Two-panel side-by-side layout with independent backgrounds, content, and optional scroll-snap. Inspector labels on this block include “Background Type”, “Image Position”, “Overlay Opacity %”, “Padding X (px)”.
Is the Split Screen Gutenberg block free?
Yes. Split Screen ships inside Blockenberg. Get the plugin from WordPress.org — no paid add-on is required for this block.
Can I style Split Screen 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: Layout).
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 Panel
Two-column comparison panel for Before/After, Problem/Solution, or any paired content.
Sticky Two Column
One column scrolls through feature highlights; the other stays sticky showing the active image — perfect for product tours and feature pages.
Dark Hero
Dark glassmorphism hero for AI, SaaS and tech sites. Features glow effects, gradient text, optional floating stat badges, badge pill, and rich button controls.
Gradient Hero
Full landing page hero with animated gradient/mesh background, badge, headline, CTA buttons, and social proof row.
Gradient Section
A full-width section with an animated CSS gradient background, headline, subtext, and dual call-to-action buttons.
Get Blockenberg
Install Blockenberg from WordPress.org, then insert Split Screen from the Gutenberg inserter.