Marketing · Gutenberg
Gradient CTA block for WordPress
A bold full-width call-to-action section with a gradient or solid background, headline, subtitle, and buttons.
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 bold full-width call-to-action section with a gradient or solid background, headline, subtitle, and buttons.
Inspector panels on this block: Content. Those titles come from index.js, not from a shared template.
Behavior controls: “Primary target” options: Same tab, New tab; “Secondary target” options: Same tab, New tab; “Gradient preset” options: Purple, Ocean (blue), Sunset, Dark, Forest (green); “Pattern type” options: Dots, Grid, Noise.
Gradient CTA 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 “Gradient CTA” (block name `blockenberg/gradient-cta` in block.json). Style it in the sidebar after insert.
How to use Gradient CTA block for WordPress
- Install Blockenberg. Install from WordPress.org and activate the plugin.
- Insert the block. Edit a page, click +, search for “Gradient CTA”, insert it. Category: Marketing.
- Configure inspector controls that exist on this block. Open Content. Set “Show badge”, “Badge text”, “Show subtitle”, “Primary button 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 |
|---|---|
| Show badge | On/off toggle in the inspector. On by default. Saved as `showBadge`. |
| Badge text | Text field in the inspector. block.json default: Join 10,000+ teams. Saved as `badge`. |
| Show subtitle | On/off toggle in the inspector. On by default. Saved as `showSubtitle`. |
| Primary button label | Text field in the inspector. block.json default: Start for free. Saved as `primaryLabel`. |
| Primary button URL | Text field in the inspector. block.json default: #. Saved as `primaryUrl`. |
| Primary target | Select control; the chosen value is saved on the block. Options: Same tab; New tab. block.json default: _self. Saved as `primaryTarget`. |
| Show secondary button | On/off toggle in the inspector. On by default. Saved as `showSecondary`. |
| Secondary label | Text field in the inspector. block.json default: See how it works →. Saved as `secondaryLabel`. |
| Secondary URL | Text field in the inspector. block.json default: #. Saved as `secondaryUrl`. |
| Secondary target | Select control; the chosen value is saved on the block. Options: Same tab; New tab. block.json default: _self. Saved as `secondaryTarget`. |
| Gradient preset | Select control; the chosen value is saved on the block. Options: Purple; Ocean (blue); Sunset; Dark; Forest (green); Rose (red); Custom CSS. block.json default: purple. Saved as `preset`. |
| Show pattern overlay | On/off toggle in the inspector. On by default. Saved as `showPattern`. |
| Pattern type | Select control; the chosen value is saved on the block. Options: Dots; Grid; Noise. block.json default: dots. Saved as `patternType`. |
| Text align | Select control; the chosen value is saved on the block. Options: Center; Left. block.json default: center. Saved as `textAlign`. |
| Content max width (px) | Numeric range control in the inspector. Range 400–960. block.json default: 680. Saved as `contentMaxWidth`. |
| Headline | Shared Blockenberg typography popover (family, size, weight, spacing). Saved as `typoHeadline`. |
| Subtitle | Shared Blockenberg typography popover (family, size, weight, spacing). Saved as `typoSubtitle`. |
| Badge | Shared Blockenberg typography popover (family, size, weight, spacing). Saved as `typoBadge`. |
| Padding top (px) | Numeric range control in the inspector. Range 0–200. block.json default: 96. Saved as `paddingTop`. |
| Padding bottom (px) | Numeric range control in the inspector. Range 0–200. block.json default: 96. Saved as `paddingBottom`. |
| Button radius (px) | Numeric range control in the inspector. Range 0–50. block.json default: 50. Saved as `btnRadius`. |
| Headline | Color control in the inspector. block.json default: #ffffff. Saved as `headlineColor`. |
| Subtitle | Color control in the inspector. block.json default: rgba(255,255,255,0.82). Saved as `subtitleColor`. |
| Badge bg | Color control in the inspector. block.json default: rgba(255,255,255,0.18). Saved as `badgeBg`. |
| Badge text | Color control in the inspector. block.json default: #ffffff. Saved as `badgeColor`. |
| Primary button bg | Color control in the inspector. block.json default: #ffffff. Saved as `primaryBg`. |
| Primary button text | Color control in the inspector. block.json default: #6c3fb5. Saved as `primaryColor`. |
| Secondary button text | Color control in the inspector. block.json default: rgba(255,255,255,0.85). Saved as `secondaryColor`. |
When this is the right block
- A bold full-width call-to-action section with a gradient or solid background, headline, subtitle, and buttons — that is the job of Gradient CTA, not a generic content block.
- Use it when you need the editor control labeled “Show badge”, which exists on this block’s inspector.
- It matches pages about cta, call to action, gradient.
- 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 Gradient CTA block in WordPress?
Install Blockenberg from WordPress.org, edit a page in the block editor, click +, and search for “Gradient CTA”. It sits under Marketing. After insert, open Content and set “Show badge”, “Badge text”, “Show subtitle”, “Primary button label”.
What makes Gradient CTA different from other Blockenberg blocks?
A bold full-width call-to-action section with a gradient or solid background, headline, subtitle, and buttons. Inspector labels on this block include “Show badge”, “Badge text”, “Show subtitle”, “Primary button label”.
Is the Gradient CTA Gutenberg block free?
Yes. Gradient CTA ships inside Blockenberg. Get the plugin from WordPress.org — no paid add-on is required for this block.
Can I style Gradient CTA 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).
Related marketing blocks
Call to Action
Headline + sub-headline + 1-2 buttons with optional color/gradient background. Perfect inside Row/Column blocks.
CTA Band
Full-width colored band with headline, supporting text and a call-to-action button.
Feature Split
Elegant two-column section — rich content (badge, headline, body, feature list, CTAs) paired with an image. The essential landing page block.
Value Proposition
Compelling value proposition section with headline, USP benefits, proof badges, and CTA.
Announcement Strip
A thin dismissible announcement bar — ideal above the site header for promotions, launches, or alerts.
Button Group
Group of styled CTA buttons with alignment, spacing, individual per-button overrides, and responsive stacking.
Get Blockenberg
Install Blockenberg from WordPress.org, then insert Gradient CTA from the Gutenberg inserter.