Marketing · Gutenberg
Call to Action block for WordPress
Headline + sub-headline + 1-2 buttons with optional color/gradient background. Perfect inside Row/Column blocks.
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
Headline + sub-headline + 1-2 buttons with optional color/gradient background. Perfect inside Row/Column blocks.
Inspector panels on this block: Layout, Background, Button 1 (Primary), Button 2 (Secondary). Those titles come from index.js, not from a shared template.
Behavior controls: “Text Alignment” options: Left, Center, Right; “Button Layout” options: Row (side by side), Column (stacked); “Background Type” options: None, Solid Color, Gradient, Image; “Image Size” options: Cover, Contain, Auto.
Call to Action 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 “Call to Action” (block name `blockenberg/call-to-action` in block.json). Style it in the sidebar after insert.
How to use Call to Action block for WordPress
- Install Blockenberg. Install from WordPress.org and activate the plugin.
- Insert the block. Edit a page, click +, search for “Call to Action”, insert it. Category: Marketing.
- Configure inspector controls that exist on this block. Open Layout. Set “Text Alignment”, “Button Layout”, “Layout — Top”, “Layout — Right”.
- 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 |
|---|---|
| Text Alignment | Select control; the chosen value is saved on the block. Options: Left; Center; Right. block.json default: center. Saved as `textAlign`. |
| Button Layout | Select control; the chosen value is saved on the block. Options: Row (side by side); Column (stacked). block.json default: row. Saved as `btnLayout`. |
| Layout — Top | Numeric range control in the inspector. Range 0–160. block.json default: 80. Saved as `paddingTop`. |
| Layout — Right | Numeric range control in the inspector. Range 0–160. block.json default: 40. Saved as `paddingRight`. |
| Layout — Bottom | Numeric range control in the inspector. Range 0–160. block.json default: 80. Saved as `paddingBottom`. |
| Layout — Left | Numeric range control in the inspector. Range 0–160. block.json default: 40. Saved as `paddingLeft`. |
| Border Radius | Numeric range control in the inspector. Range 0–60. block.json default: 20. Saved as `borderRadius`. |
| Content Max Width (px) | Numeric range control in the inspector. Range 320–1400. block.json default: 680. Saved as `contentMaxWidth`. |
| Gap between elements | Numeric range control in the inspector. Range 0–60. block.json default: 8. Saved as `gap`. |
| Background Type | Select control; the chosen value is saved on the block. Options: None; Solid Color; Gradient; Image. block.json default: color. Saved as `bgType`. |
| Angle (deg) | Numeric range control in the inspector. Range 0–360. block.json default: 135. Saved as `bgGradientAngle`. |
| Image Size | Select control; the chosen value is saved on the block. Options: Cover; Contain; Auto. block.json default: cover. Saved as `bgImageSize`. |
| Image Position | Text field in the inspector. e.g. center center, top left, 50% 30%. block.json default: center center. Saved as `bgImagePosition`. |
| Color Overlay | On/off toggle in the inspector. Off by default. Saved as `bgOverlay`. |
| Headline Tag | Select control; the chosen value is saved on the block. Options: H1; H2; H3; H4; P. block.json default: h2. Saved as `titleTag`. |
| Spacing Below | Numeric range control in the inspector. Range 0–60. block.json default: 12. Saved as `headlineSpacing`. |
| Spacing Below (Sub Spacing) | Numeric range control in the inspector. Range 0–80. block.json default: 32. Saved as `subSpacing`. |
| Font Size | Numeric range control in the inspector. Range 10–28. block.json default: 16. Saved as `btn1Size`. |
| Font Weight | Numeric range control in the inspector. Range 100–900. block.json default: 600. Saved as `btn1Weight`. |
| Font Size (Btn2Size) | Numeric range control in the inspector. Range 10–28. block.json default: 16. Saved as `btn2Size`. |
| Font Weight (Btn2Weight) | Numeric range control in the inspector. Range 100–900. block.json default: 600. Saved as `btn2Weight`. |
| Button Text | Text field in the inspector. block.json default: Get Started. Saved as `btn1Text`. |
| URL | Text field in the inspector. Saved as `btn1Url`. |
| Open In | Select control; the chosen value is saved on the block. Options: Same Tab; New Tab. block.json default: _self. Saved as `btn1Target`. |
| Button Style | Select control; the chosen value is saved on the block. Options: Solid Button; Outline Button; Ghost / Subtle; Plain Link. block.json default: solid. Saved as `btn1Style`. |
| Border Radius (Btn1Radius) | Numeric range control in the inspector. Range 0–50. block.json default: 8. Saved as `btn1Radius`. |
| Padding Vertical | Numeric range control in the inspector. Range 4–36. block.json default: 14. Saved as `btn1PaddingV`. |
| Padding Horizontal | Numeric range control in the inspector. Range 8–80. block.json default: 32. Saved as `btn1PaddingH`. |
| Border Width | Numeric range control in the inspector. Range 1–4. block.json default: 2. Saved as `btn1BorderWidth`. |
| Show Second Button | On/off toggle in the inspector. On by default. Saved as `btn2Enabled`. |
| Button Text (Btn2Text) | Text field in the inspector. block.json default: Learn More. Saved as `btn2Text`. |
| URL (Btn2Url) | Text field in the inspector. Saved as `btn2Url`. |
| Open In (Btn2Target) | Select control; the chosen value is saved on the block. Options: Same Tab; New Tab. block.json default: _self. Saved as `btn2Target`. |
| Button Style (Btn2Style) | Select control; the chosen value is saved on the block. Options: Solid Button; Outline Button; Ghost / Subtle; Plain Link. block.json default: outline. Saved as `btn2Style`. |
| Border Radius (Btn2Radius) | Numeric range control in the inspector. Range 0–50. block.json default: 8. Saved as `btn2Radius`. |
| Padding Vertical (Btn2Padding V) | Numeric range control in the inspector. Range 4–36. block.json default: 14. Saved as `btn2PaddingV`. |
| Padding Horizontal (Btn2Padding H) | Numeric range control in the inspector. Range 8–80. block.json default: 32. Saved as `btn2PaddingH`. |
| Border Width (Btn2Border Width) | Numeric range control in the inspector. Range 1–4. block.json default: 2. Saved as `btn2BorderWidth`. |
When this is the right block
- Headline + sub-headline + 1-2 buttons with optional color/gradient background. Perfect inside Row/Column blocks — that is the job of Call to Action, not a generic content block.
- Use it when you need the editor control labeled “Text Alignment”, which exists on this block’s inspector.
- It matches pages about cta, call, action.
- 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 Call to Action block in WordPress?
Install Blockenberg from WordPress.org, edit a page in the block editor, click +, and search for “Call to Action”. It sits under Marketing. After insert, open Layout and set “Text Alignment”, “Button Layout”, “Layout — Top”, “Layout — Right”.
What makes Call to Action different from other Blockenberg blocks?
Headline + sub-headline + 1-2 buttons with optional color/gradient background. Perfect inside Row/Column blocks. Inspector labels on this block include “Text Alignment”, “Button Layout”, “Layout — Top”, “Layout — Right”.
Is the Call to Action Gutenberg block free?
Yes. Call to Action ships inside Blockenberg. Get the plugin from WordPress.org — no paid add-on is required for this block.
Can I style Call to Action 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: Layout, Background, Button 1 (Primary), Button 2 (Secondary)).
Related marketing blocks
CTA Band
Full-width colored band with headline, supporting text and a call-to-action button.
Gradient CTA
A bold full-width call-to-action section with a gradient or solid background, headline, subtitle, and buttons.
Announcement Strip
A thin dismissible announcement bar — ideal above the site header for promotions, launches, or alerts.
Card CTA Grid
A grid of action cards — each with icon, title, description and link. Perfect for get-started, help, or navigation sections.
CTA Pulsing Button
An animated Call-to-Action button with pulsing ring/glow effects, rich typography, hover colors, icon, badge, and subtext controls.
Feature Split
Elegant two-column section — rich content (badge, headline, body, feature list, CTAs) paired with an image. The essential landing page block.
Get Blockenberg
Install Blockenberg from WordPress.org, then insert Call to Action from the Gutenberg inserter.