Marketing · Gutenberg
CTA with Countdown block for WordPress
Urgency-driven CTA section with a live countdown timer, headline, and call-to-action 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
Urgency-driven CTA section with a live countdown timer, headline, and call-to-action buttons.
Inspector panels on this block: Content, CTA Buttons, Countdown Timer, Style & Layout. Those titles come from index.js, not from a shared template.
Behavior controls: “Style & Layout — Style” options: Dark, Light, Gradient, Banner; “Layout” options: Centered, Split; “Timer Style” options: Box, Minimal, Outlined.
Where to find it
Gutenberg inserter → Marketing → search “CTA with Countdown” (block name `blockenberg/cta-countdown` in block.json). Style it in the sidebar after insert.
How to use CTA with Countdown block for WordPress
- Install Blockenberg. Install from WordPress.org and activate the plugin.
- Insert the block. Edit a page, click +, search for “CTA with Countdown”, insert it. Category: Marketing.
- Configure inspector controls that exist on this block. Open Content. Set “Show Eyebrow”, “Eyebrow Text”, “Show Subheading”, “Primary Button Text”.
- Check the published page. The view script reads HTML data attributes: data-days, data-end, data-relative, data-unit. The block editor preview may not run the same view script.
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: Limited Time Offer. Saved as `eyebrow`. |
| Show Subheading | On/off toggle in the inspector. On by default. Saved as `showSubheading`. |
| Primary Button Text | Text field in the inspector. block.json default: Claim Your Discount. Saved as `ctaText`. |
| Primary Button URL | Text field in the inspector. block.json default: #. Saved as `ctaUrl`. |
| Show Secondary Button | On/off toggle in the inspector. On by default. Saved as `showSecondaryCta`. |
| Secondary Button Text | Text field in the inspector. block.json default: Learn More. Saved as `ctaSecondaryText`. |
| Secondary Button URL | Text field in the inspector. block.json default: #. Saved as `ctaSecondaryUrl`. |
| Use Relative Time (days from now) | On/off toggle in the inspector. On by default. Saved as `useRelative`. |
| Days from Now | Numeric range control in the inspector. Range 0–365. block.json default: 3. Saved as `daysFromNow`. |
| End Date (ISO format) | Text field in the inspector. Saved as `endDate`. |
| Days | On/off toggle in the inspector. On by default. Saved as `showDays`. |
| Hours | On/off toggle in the inspector. On by default. Saved as `showHours`. |
| Minutes | On/off toggle in the inspector. On by default. Saved as `showMinutes`. |
| Seconds | On/off toggle in the inspector. On by default. Saved as `showSeconds`. |
| Show Labels | On/off toggle in the inspector. On by default. Saved as `showLabels`. |
| Days Label | Text field in the inspector. block.json default: Days. Saved as `labelDays`. |
| Hours Label | Text field in the inspector. block.json default: Hours. Saved as `labelHours`. |
| Minutes Label | Text field in the inspector. block.json default: Min. Saved as `labelMinutes`. |
| Seconds Label | Text field in the inspector. block.json default: Sec. Saved as `labelSeconds`. |
| Style & Layout — Style | Select control; the chosen value is saved on the block. Options: Dark; Light; Gradient; Banner. block.json default: dark. Saved as `style`. |
| Layout | Select control; the chosen value is saved on the block. Options: Centered; Split. block.json default: centered. Saved as `layout`. |
| Timer Style | Select control; the chosen value is saved on the block. Options: Box; Minimal; Outlined. block.json default: box. Saved as `timerStyle`. |
| Border Radius | Numeric range control in the inspector. Range 0–48. block.json default: 16. Saved as `borderRadius`. |
| Timer Gap | Numeric range control in the inspector. Range 4–32. block.json default: 12. Saved as `timerGap`. |
| Button Radius | Numeric range control in the inspector. Range 0–99. block.json default: 8. Saved as `buttonRadius`. |
| Heading | Shared Blockenberg typography popover (family, size, weight, spacing). Saved as `typoHeading`. |
| Subheading | Shared Blockenberg typography popover (family, size, weight, spacing). Saved as `typoSub`. |
| Eyebrow | Shared Blockenberg typography popover (family, size, weight, spacing). Saved as `typoEyebrow`. |
| Timer Number | Shared Blockenberg typography popover (family, size, weight, spacing). Saved as `typoNumber`. |
| Timer Label Size | Numeric range control in the inspector. Range 9–18. block.json default: 12. Saved as `labelSize`. |
| Button Font Size | Numeric range control in the inspector. Range 12–24. block.json default: 16. Saved as `buttonSize`. |
| Padding Top | Numeric range control in the inspector. Range 0–240. block.json default: 80. Saved as `paddingTop`. |
| Padding Bottom | Numeric range control in the inspector. Range 0–240. block.json default: 80. Saved as `paddingBottom`. |
| Colors — Background | Color control in the inspector. block.json default: #0f172a. Saved as `bgColor`. |
| Accent | Color control in the inspector. block.json default: #6c3fb5. Saved as `accentColor`. |
| Heading Color | Color control in the inspector. block.json default: #ffffff. Saved as `headingColor`. |
| Subheading Color | Color control in the inspector. block.json default: rgba(255,255,255,0.7). Saved as `subColor`. |
| Eyebrow Color | Color control in the inspector. block.json default: #a78bfa. Saved as `eyebrowColor`. |
| Timer Box Background | Color control in the inspector. block.json default: rgba(255,255,255,0.08). Saved as `timerBg`. |
| Timer Box Border | Color control in the inspector. block.json default: rgba(255,255,255,0.12). Saved as `timerBorder`. |
| Timer Number Color | Color control in the inspector. block.json default: #ffffff. Saved as `timerNumColor`. |
| Timer Label Color | Color control in the inspector. block.json default: rgba(255,255,255,0.5). Saved as `timerLabelColor`. |
| 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: #ffffff. Saved as `btn2Text`. |
What the front-end script actually does
- The view script reads HTML data attributes: data-days, data-end, data-relative, data-unit.
- It uses sessionStorage (tab session only).
When this is the right block
- Urgency-driven CTA section with a live countdown timer, headline, and call-to-action buttons — that is the job of CTA with Countdown, 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 cta, countdown, timer.
- 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 CTA with Countdown block in WordPress?
Install Blockenberg from WordPress.org, edit a page in the block editor, click +, and search for “CTA with Countdown”. It sits under Marketing. After insert, open Content and set “Show Eyebrow”, “Eyebrow Text”, “Show Subheading”, “Primary Button Text”.
What makes CTA with Countdown different from other Blockenberg blocks?
Urgency-driven CTA section with a live countdown timer, headline, and call-to-action buttons. Inspector labels on this block include “Show Eyebrow”, “Eyebrow Text”, “Show Subheading”, “Primary Button Text”.
Is the CTA with Countdown Gutenberg block free?
Yes. CTA with Countdown ships inside Blockenberg. Get the plugin from WordPress.org — no paid add-on is required for this block.
Can I style CTA with Countdown 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, CTA Buttons, Countdown Timer, Style & Layout).
Related marketing blocks
Offer Card
Special offer and deal card with urgency badge, original/sale price, includes list, CTA, and optional countdown timer.
Coming Soon
Launch countdown page section with logo, heading, subtitle, live countdown timer, optional email capture field, social links, and background controls.
Split Price CTA
Two-column sales section: pricing offer on the left, CTA with supporting benefits on the right. Common on SaaS pricing and checkout pages.
Button Group
Group of styled CTA buttons with alignment, spacing, individual per-button overrides, and responsive stacking.
Call to Action
Headline + sub-headline + 1-2 buttons with optional color/gradient background. Perfect inside Row/Column blocks.
Card CTA Grid
A grid of action cards — each with icon, title, description and link. Perfect for get-started, help, or navigation sections.
Get Blockenberg
Install Blockenberg from WordPress.org, then insert CTA with Countdown from the Gutenberg inserter.