Marketing · Gutenberg
Feature Split block for WordPress
Elegant two-column section — rich content (badge, headline, body, feature list, CTAs) paired with an image. The essential landing page block.
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
Elegant two-column section — rich content (badge, headline, body, feature list, CTAs) paired with an image. The essential landing page block.
Inspector panels on this block: Style & Layout, Content, Feature items. Those titles come from index.js, not from a shared template.
Behavior controls: “Visual style” options: Clean (white), Dark, Soft gradient, Accent bg; “Image position” options: Right, Left; “Vertical alignment” options: Center, Top, Bottom.
Feature Split 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 “Feature Split” (block name `blockenberg/feature-split` in block.json). Style it in the sidebar after insert.
How to use Feature Split block for WordPress
- Install Blockenberg. Install from WordPress.org and activate the plugin.
- Insert the block. Edit a page, click +, search for “Feature Split”, insert it. Category: Marketing.
- Configure inspector controls that exist on this block. Open Style & Layout. Set “Visual style”, “Image position”, “Vertical alignment”, “Column gap (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 |
|---|---|
| Visual style | Select control; the chosen value is saved on the block. Options: Clean (white); Dark; Soft gradient; Accent bg. block.json default: clean. Saved as `style`. |
| Image position | Select control; the chosen value is saved on the block. Options: Right; Left. block.json default: right. Saved as `imagePosition`. |
| Vertical alignment | Select control; the chosen value is saved on the block. Options: Center; Top; Bottom. block.json default: center. Saved as `verticalAlign`. |
| Column gap (px) | Numeric range control in the inspector. Range 0–120. block.json default: 64. Saved as `gap`. |
| Image width % | Numeric range control in the inspector. Range 30–70. block.json default: 50. Saved as `imageWidth`. |
| Image border radius (px) | Numeric range control in the inspector. Range 0–40. block.json default: 16. Saved as `imageRadius`. |
| Image shadow | On/off toggle in the inspector. On by default. Saved as `imageShadow`. |
| Show eyebrow badge | On/off toggle in the inspector. On by default. Saved as `showEyebrow`. |
| Show body text | On/off toggle in the inspector. On by default. Saved as `showBody`. |
| Show feature list | On/off toggle in the inspector. On by default. Saved as `showFeatures`. |
| Show primary button | On/off toggle in the inspector. On by default. Saved as `showPrimaryBtn`. |
| Show secondary button | On/off toggle in the inspector. On by default. Saved as `showSecondaryBtn`. |
| Eyebrow text | Text field in the inspector. block.json default: Why choose us. Saved as `eyebrow`. |
| Primary button label | Text field in the inspector. block.json default: Get started free. Saved as `primaryBtnLabel`. |
| Primary button URL | Text field in the inspector. block.json default: #. Saved as `primaryBtnUrl`. |
| Open in new tab | On/off toggle in the inspector. Off by default. Saved as `primaryBtnTarget`. |
| Secondary button label | Text field in the inspector. block.json default: See demo →. Saved as `secondaryBtnLabel`. |
| Secondary button URL | Text field in the inspector. block.json default: #. Saved as `secondaryBtnUrl`. |
| Content max width (px) | Numeric range control in the inspector. Range 300–800. block.json default: 540. Saved as `contentMaxWidth`. |
| Padding top (px) | Numeric range control in the inspector. Range 0–160. block.json default: 64. Saved as `paddingTop`. |
| Padding bottom (px) | Numeric range control in the inspector. Range 0–160. block.json default: 64. Saved as `paddingBottom`. |
| Button radius (px) | Numeric range control in the inspector. Range 0–50. block.json default: 50. Saved as `btnRadius`. |
| Headline | Shared Blockenberg typography popover (family, size, weight, spacing). Saved as `typoHeadline`. |
| Body | Shared Blockenberg typography popover (family, size, weight, spacing). Saved as `typoBody`. |
| Feature | Shared Blockenberg typography popover (family, size, weight, spacing). Saved as `typoFeature`. |
| Eyebrow | Shared Blockenberg typography popover (family, size, weight, spacing). Saved as `typoEyebrow`. |
| Section background | Color control in the inspector. Saved as `sectionBg`. |
| Eyebrow bg | Color control in the inspector. block.json default: #ede9fe. Saved as `eyebrowBg`. |
| Eyebrow color | Color control in the inspector. block.json default: #6c3fb5. Saved as `eyebrowColor`. |
| Headline color | Color control in the inspector. block.json default: #0f172a. Saved as `headlineColor`. |
| Body text color | Color control in the inspector. block.json default: #475569. Saved as `bodyColor`. |
| Feature text color | Color control in the inspector. block.json default: #334155. Saved as `featureColor`. |
| Primary btn bg | Color control in the inspector. block.json default: #6c3fb5. Saved as `primaryBtnBg`. |
| Primary btn text | Color control in the inspector. block.json default: #ffffff. Saved as `primaryBtnColor`. |
| Secondary btn color | Color control in the inspector. block.json default: #6c3fb5. Saved as `secBtnColor`. |
| Accent color | Color control in the inspector. block.json default: #6c3fb5. Saved as `accentColor`. |
When this is the right block
- Elegant two-column section — rich content (badge, headline, body, feature list, CTAs) paired with an image. The essential landing page block — that is the job of Feature Split, not a generic content block.
- Use it when you need the editor control labeled “Visual style”, which exists on this block’s inspector.
- It matches pages about feature, split, image.
- Inserter grouping: landing pages, campaign sections, and conversion layouts.
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 Feature Split block in WordPress?
Install Blockenberg from WordPress.org, edit a page in the block editor, click +, and search for “Feature Split”. It sits under Marketing. After insert, open Style & Layout and set “Visual style”, “Image position”, “Vertical alignment”, “Column gap (px)”.
What makes Feature Split different from other Blockenberg blocks?
Elegant two-column section — rich content (badge, headline, body, feature list, CTAs) paired with an image. The essential landing page block. Inspector labels on this block include “Visual style”, “Image position”, “Vertical alignment”, “Column gap (px)”.
Is the Feature Split Gutenberg block free?
Yes. Feature Split ships inside Blockenberg. Get the plugin from WordPress.org — no paid add-on is required for this block.
Can I style Feature Split 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: Style & Layout, Content, Feature items).
Related marketing blocks
Feature Alternating
Zigzag alternating feature rows — image on one side, feature list + CTA on the other. Pairs alternate left↔right automatically.
Gradient CTA
A bold full-width call-to-action section with a gradient or solid background, headline, subtitle, and buttons.
Split Benefits
A split section with an image on one side and a benefits checklist, headline, and CTAs on the other. A cornerstone landing page pattern.
Value Proposition
Compelling value proposition section with headline, USP benefits, proof badges, and CTA.
Call to Action
Headline + sub-headline + 1-2 buttons with optional color/gradient background. Perfect inside Row/Column blocks.
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 Feature Split from the Gutenberg inserter.