Layout · Gutenberg
Split Hero block for WordPress
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.
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 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.
Inspector panels on this block: Hero Layout, Badge, Content, Primary CTA, Secondary CTA, Social Proof, Media. Those titles come from index.js, not from a shared template.
Behavior controls: “Content side” options: Content left, Content right; “Split ratio (content %)” options: 40 / 60, 50 / 50, 60 / 40; “Badge style” options: Pill, Badge, Label; “Headline tag” options: h1, h2, h3, p.
Where to find it
Gutenberg inserter → Layout → search “Split Hero” (block name `blockenberg/split-hero` in block.json). Style it in the sidebar after insert.
How to use Split Hero block for WordPress
- Install Blockenberg. Install from WordPress.org and activate the plugin.
- Insert the block. Edit a page, click +, search for “Split Hero”, insert it. Category: Layout.
- Configure inspector controls that exist on this block. Open Hero Layout. Set “Content side”, “Split ratio (content %)”, “Min height (px)”, “Show badge”.
- Check the published page. An IntersectionObserver starts work when the block enters the viewport. The block editor preview may not run the same view script.
Inspector controls from this block’s code
| Control | What the code does |
|---|---|
| Content side | Select control; the chosen value is saved on the block. Options: Content left; Content right. block.json default: left. Saved as `contentSide`. |
| Split ratio (content %) | Select control; the chosen value is saved on the block. Options: 40 / 60; 50 / 50; 60 / 40. block.json default: 50. Saved as `splitRatio`. |
| Min height (px) | Numeric range control in the inspector. Range 400–900. block.json default: 620. Saved as `minHeight`. |
| Show badge | On/off toggle in the inspector. On by default. Saved as `showBadge`. |
| Badge text | Text field in the inspector. block.json default: 🚀 Now in public beta. Saved as `badge`. |
| Badge style | Select control; the chosen value is saved on the block. Options: Pill; Badge; Label. block.json default: pill. Saved as `badgeStyle`. |
| Headline tag | Select control; the chosen value is saved on the block. Options: h1; h2; h3; p. block.json default: h1. Saved as `headlineTag`. |
| Horizontal padding (px) | Numeric range control in the inspector. Range 20–120. block.json default: 60. Saved as `contentPaddingH`. |
| Vertical padding (px) | Numeric range control in the inspector. Range 20–120. block.json default: 80. Saved as `contentPaddingV`. |
| CTA border radius (px) | Numeric range control in the inspector. Range 0–99. block.json default: 8. Saved as `ctaRadius`. |
| Label | Text field in the inspector. block.json default: Start for free. Saved as `ctaPrimaryLabel`. |
| URL | Text field in the inspector. block.json default: #. Saved as `ctaPrimaryUrl`. |
| Open in new tab | On/off toggle in the inspector. Off by default. Saved as `ctaPrimaryTarget`. |
| Show secondary CTA | On/off toggle in the inspector. On by default. Saved as `showSecondaryCta`. |
| Label (Cta Secondary Label) | Text field in the inspector. block.json default: Watch demo →. Saved as `ctaSecondaryLabel`. |
| URL (Cta Secondary Url) | Text field in the inspector. block.json default: #. Saved as `ctaSecondaryUrl`. |
| Open in new tab (Cta Secondary Target) | On/off toggle in the inspector. Off by default. Saved as `ctaSecondaryTarget`. |
| Show rating | On/off toggle in the inspector. On by default. Saved as `showRating`. |
| Rating score | Numeric range control in the inspector. Range 1–5. block.json default: 4.9 / 5. Saved as `ratingScore`. |
| Stars filled | Numeric range control in the inspector. Range 1–5. block.json default: 5. Saved as `ratingStars`. |
| Rating label | Text field in the inspector. block.json default: from 2,000+ reviews. Saved as `ratingText`. |
| Show social proof text | On/off toggle in the inspector. On by default. Saved as `showSocialProof`. |
| Social proof text | Text field in the inspector. block.json default: Trusted by 10,000+ teams worldwide. Saved as `socialProofText`. |
| Media type | Select control; the chosen value is saved on the block. Options: Image; Video. block.json default: image. Saved as `mediaType`. |
| Image radius (px) | Numeric range control in the inspector. Range 0–40. block.json default: 16. Saved as `imageRadius`. |
| Drop shadow | On/off toggle in the inspector. On by default. Saved as `imageShadow`. |
| Embed video URL | Text field in the inspector. Saved as `videoUrl`. |
What the front-end script actually does
- An IntersectionObserver starts work when the block enters the viewport.
When this is the right block
- 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 — that is the job of Split Hero, not a generic content block.
- Use it when you need the editor control labeled “Content side”, which exists on this block’s inspector.
- It matches pages about hero, split, landing.
- 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 Hero block in WordPress?
Install Blockenberg from WordPress.org, edit a page in the block editor, click +, and search for “Split Hero”. It sits under Layout. After insert, open Hero Layout and set “Content side”, “Split ratio (content %)”, “Min height (px)”, “Show badge”.
What makes Split Hero different from other Blockenberg blocks?
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. Inspector labels on this block include “Content side”, “Split ratio (content %)”, “Min height (px)”, “Show badge”.
Is the Split Hero Gutenberg block free?
Yes. Split Hero ships inside Blockenberg. Get the plugin from WordPress.org — no paid add-on is required for this block.
Can I style Split Hero 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: Hero Layout, Badge, Content, Primary CTA).
Related layout blocks
Gradient Hero
Full landing page hero with animated gradient/mesh background, badge, headline, CTA buttons, and social proof row.
Split Screen
Two-panel side-by-side layout with independent backgrounds, content, and optional scroll-snap.
Gradient Section
A full-width section with an animated CSS gradient background, headline, subtext, and dual call-to-action buttons.
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.
Video Hero
Hero section with video preview or background video, headline, CTA buttons and optional social proof.
Get Blockenberg
Install Blockenberg from WordPress.org, then insert Split Hero from the Gutenberg inserter.