Marketing · Gutenberg
Split Benefits block for WordPress
A split section with an image on one side and a benefits checklist, headline, and CTAs on the other. A cornerstone landing page pattern.
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
A split section with an image on one side and a benefits checklist, headline, and CTAs on the other. A cornerstone landing page pattern.
Inspector panels on this block: Content, Image, Layout & Style, Benefits List. Those titles come from index.js, not from a shared template.
Behavior controls: “Image Position” options: Right, Left; “Image Style” options: Plain, Rounded, Shadow, Card (bg box), Overlapping; “Background Style” options: Clean (white), Dark, Tinted, Bordered; “Column Ratio” options: 50 / 50, 60 / 40 (content wider), 40 / 60 (image wider).
Split Benefits 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 → Marketing → search “Split Benefits” (block name `blockenberg/split-benefits` in block.json). Style it in the sidebar after insert.
How to use Split Benefits block for WordPress
- Install Blockenberg. Install from WordPress.org and activate the plugin.
- Insert the block. Edit a page, click +, search for “Split Benefits”, insert it. Category: Marketing.
- Configure inspector controls that exist on this block. Open Content. Set “Show Eyebrow”, “Eyebrow Text”, “Show Subheading”, “Show Benefits List”.
- 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 Eyebrow | On/off toggle in the inspector. On by default. Saved as `showEyebrow`. |
| Eyebrow Text | Text field in the inspector. block.json default: Why teams choose us. Saved as `eyebrow`. |
| Show Subheading | On/off toggle in the inspector. On by default. Saved as `showSubheading`. |
| Show Benefits List | On/off toggle in the inspector. On by default. Saved as `showBenefits`. |
| Show Primary CTA | On/off toggle in the inspector. On by default. Saved as `showCta`. |
| CTA Text | Text field in the inspector. block.json default: Start Free Trial. Saved as `ctaText`. |
| CTA URL | Text field in the inspector. block.json default: #. Saved as `ctaUrl`. |
| Show Secondary CTA | On/off toggle in the inspector. On by default. Saved as `showSecondaryCta`. |
| Secondary CTA Text | Text field in the inspector. block.json default: See a Demo. Saved as `ctaSecondaryText`. |
| Secondary CTA URL | Text field in the inspector. block.json default: #. Saved as `ctaSecondaryUrl`. |
| Image Position | Select control; the chosen value is saved on the block. Options: Right; Left. block.json default: right. Saved as `imagePosition`. |
| Image Style | Select control; the chosen value is saved on the block. Options: Plain; Rounded; Shadow; Card (bg box); Overlapping. block.json default: rounded. Saved as `imageStyle`. |
| Image Border Radius | Numeric range control in the inspector. Range 0–48. block.json default: 20. Saved as `imageRadius`. |
| Background Style | Select control; the chosen value is saved on the block. Options: Clean (white); Dark; Tinted; Bordered. block.json default: clean. Saved as `style`. |
| Column Ratio | Select control; the chosen value is saved on the block. Options: 50 / 50; 60 / 40 (content wider); 40 / 60 (image wider). block.json default: 50-50. Saved as `ratio`. |
| Vertical Align | Select control; the chosen value is saved on the block. Options: Center; Top. block.json default: center. Saved as `verticalAlign`. |
| Column Gap | Numeric range control in the inspector. Range 16–120. block.json default: 64. Saved as `columnGap`. |
| Button Radius | Numeric range control in the inspector. Range 0–99. block.json default: 8. Saved as `btnRadius`. |
| Icon Type | Select control; the chosen value is saved on the block. Options: Check Circle; Arrow Right; Star; Dot / Marker; Lightning Bolt. block.json default: check-circle. Saved as `iconType`. |
| Icon Size | Numeric range control in the inspector. Range 12–32. block.json default: 20. Saved as `iconSize`. |
| Item Gap | Numeric range control in the inspector. Range 4–32. block.json default: 14. Saved as `itemGap`. |
| Padding Top | Numeric range control in the inspector. Range 0–240. block.json default: 64. Saved as `paddingTop`. |
| Padding Bottom | Numeric range control in the inspector. Range 0–240. block.json default: 64. Saved as `paddingBottom`. |
| Colors — Background | Color control in the inspector. block.json default: #ffffff. Saved as `bgColor`. |
| Heading Color | Color control in the inspector. block.json default: #0f172a. Saved as `headingColor`. |
| Eyebrow Color | Color control in the inspector. block.json default: #6c3fb5. Saved as `eyebrowColor`. |
| Subheading Color | Color control in the inspector. block.json default: #64748b. Saved as `subColor`. |
| Item Text Color | Color control in the inspector. block.json default: #1e293b. Saved as `itemColor`. |
| Icon Color | Color control in the inspector. block.json default: #6c3fb5. Saved as `iconColor`. |
| Accent Color | Color control in the inspector. block.json default: #6c3fb5. Saved as `accentColor`. |
| Primary Button BG | Color control in the inspector. block.json default: #6c3fb5. Saved as `btnBg`. |
| Primary Button Text | Color control in the inspector. block.json default: #ffffff. Saved as `btnText`. |
| Secondary Button Text | Color control in the inspector. block.json default: #6c3fb5. Saved as `btn2Text`. |
When this is the right block
- A split section with an image on one side and a benefits checklist, headline, and CTAs on the other. A cornerstone landing page pattern — that is the job of Split Benefits, not a generic content block.
- Use it when you need the editor control labeled “Show Eyebrow”, which exists on this block’s inspector.
- It matches pages about split, benefits, checklist.
- Inserter grouping: landing pages, campaign sections, and conversion layouts.
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 Benefits block in WordPress?
Install Blockenberg from WordPress.org, edit a page in the block editor, click +, and search for “Split Benefits”. It sits under Marketing. After insert, open Content and set “Show Eyebrow”, “Eyebrow Text”, “Show Subheading”, “Show Benefits List”.
What makes Split Benefits different from other Blockenberg blocks?
A split section with an image on one side and a benefits checklist, headline, and CTAs on the other. A cornerstone landing page pattern. Inspector labels on this block include “Show Eyebrow”, “Eyebrow Text”, “Show Subheading”, “Show Benefits List”.
Is the Split Benefits Gutenberg block free?
Yes. Split Benefits ships inside Blockenberg. Get the plugin from WordPress.org — no paid add-on is required for this block.
Can I style Split Benefits 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: Content, Image, Layout & Style, Benefits List).
Related marketing blocks
Feature Alternating
Zigzag alternating feature rows — image on one side, feature list + CTA on the other. Pairs alternate left↔right automatically.
Comparison Checklist
Two-column 'With / Without' checklist comparison to highlight the value of your product or service.
Feature Columns
Responsive 2–4 column feature grid with icon, title, and description. Multiple icon and visual styles.
Feature Split
Elegant two-column section — rich content (badge, headline, body, feature list, CTAs) paired with an image. The essential landing page block.
Icon Feature Grid
Responsive grid of features with icons, titles and descriptions. Perfect for product pages, landing pages, and about sections.
Split Form
Side-by-side lead generation section — content (heading, text, feature bullets) on one side and a fully configured email / sign-up form on the other.
Get Blockenberg
Install Blockenberg from WordPress.org, then insert Split Benefits from the Gutenberg inserter.