Marketing · Gutenberg
Feature Alternating block for WordPress
Zigzag alternating feature rows — image on one side, feature list + CTA on the other. Pairs alternate left↔right automatically.
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
Zigzag alternating feature rows — image on one side, feature list + CTA on the other. Pairs alternate left↔right automatically.
Inspector panels on this block: Rows, Layout. Those titles come from index.js, not from a shared template.
Behavior controls: “CTA target” options: Same tab, New tab; “Image side” options: Auto (alternating), Always left, Always right.
Feature Alternating 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 Alternating” (block name `blockenberg/feature-alternating` in block.json). Style it in the sidebar after insert.
How to use Feature Alternating block for WordPress
- Install Blockenberg. Install from WordPress.org and activate the plugin.
- Insert the block. Edit a page, click +, search for “Feature Alternating”, insert it. Category: Marketing.
- Configure inspector controls that exist on this block. Open Rows. Set “Eyebrow text”, “Title”, “Description”, “CTA label”.
- 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 |
|---|---|
| Eyebrow text | Text field in the inspector. |
| Title | Text field in the inspector. |
| Description | Text field in the inspector. |
| CTA label | Text field in the inspector. |
| CTA URL | Text field in the inspector. |
| CTA target | Select control; the chosen value is saved on the block. Options: Same tab; New tab. |
| Show CTA | On/off toggle in the inspector. |
| Image side | Select control; the chosen value is saved on the block. Options: Auto (alternating); Always left; Always right. block.json default: auto. Saved as `imageSide`. |
| Image radius (px) | Numeric range control in the inspector. Range 0–32. block.json default: 16. Saved as `imageRadius`. |
| Image shadow | On/off toggle in the inspector. On by default. Saved as `imageShadow`. |
| Row gap (px) | Numeric range control in the inspector. Range 0–200. block.json default: 96. Saved as `rowGap`. |
| Column gap (px) | Numeric range control in the inspector. Range 0–128. block.json default: 64. Saved as `colGap`. |
| Show eyebrow | On/off toggle in the inspector. On by default. Saved as `showEyebrow`. |
| Show features | On/off toggle in the inspector. On by default. Saved as `showFeatures`. |
| Eyebrow | Shared Blockenberg typography popover (family, size, weight, spacing). Saved as `typoEyebrow`. |
| Typography — Title | Shared Blockenberg typography popover (family, size, weight, spacing). Saved as `typoTitle`. |
| Description (Typo Description) | Shared Blockenberg typography popover (family, size, weight, spacing). Saved as `typoDescription`. |
| Feature Label | Shared Blockenberg typography popover (family, size, weight, spacing). Saved as `typoFeatureLabel`. |
| Feature icon size (px) | Numeric range control in the inspector. Range 14–32. block.json default: 20. Saved as `featureIconSize`. |
| Padding top (px) | Numeric range control in the inspector. Range 0–200. block.json default: 72. Saved as `paddingTop`. |
| Padding bottom (px) | Numeric range control in the inspector. Range 0–200. block.json default: 72. Saved as `paddingBottom`. |
| Section bg | Color control in the inspector. Saved as `sectionBg`. |
| Colors — Title | Color control in the inspector. block.json default: #0f172a. Saved as `titleColor`. |
| Description | Color control in the inspector. block.json default: #475569. Saved as `descColor`. |
| Feature label | Color control in the inspector. block.json default: #1e293b. Saved as `featureLabelColor`. |
| Image placeholder | Color control in the inspector. block.json default: #f0ebff. Saved as `imagePlaceholderBg`. |
When this is the right block
- Zigzag alternating feature rows — image on one side, feature list + CTA on the other. Pairs alternate left↔right automatically — that is the job of Feature Alternating, not a generic content block.
- Use it when you need the editor control labeled “Eyebrow text”, which exists on this block’s inspector.
- It matches pages about features, alternating, zigzag.
- 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 Feature Alternating block in WordPress?
Install Blockenberg from WordPress.org, edit a page in the block editor, click +, and search for “Feature Alternating”. It sits under Marketing. After insert, open Rows and set “Eyebrow text”, “Title”, “Description”, “CTA label”.
What makes Feature Alternating different from other Blockenberg blocks?
Zigzag alternating feature rows — image on one side, feature list + CTA on the other. Pairs alternate left↔right automatically. Inspector labels on this block include “Eyebrow text”, “Title”, “Description”, “CTA label”.
Is the Feature Alternating Gutenberg block free?
Yes. Feature Alternating ships inside Blockenberg. Get the plugin from WordPress.org — no paid add-on is required for this block.
Can I style Feature Alternating 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: Rows, Layout).
Related marketing blocks
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.
Feature Split
Elegant two-column section — rich content (badge, headline, body, feature list, CTAs) paired with an image. The essential landing page block.
Feature Showcase
Alternating zigzag rows of image + headline + body text + bullet checklist + CTA. The definitive landing page feature section.
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.
App Download
Ready-made app promotion section with iOS / Android badges, device screenshot, heading, subtitle, ratings/reviews, and full background controls.
Comparison Cards
Visual side-by-side product or plan comparison cards with features, pricing, and CTA. Distinct from the tabular Comparison Table block.
Get Blockenberg
Install Blockenberg from WordPress.org, then insert Feature Alternating from the Gutenberg inserter.