Marketing · Gutenberg
Demo / Trial Section block for WordPress
Book-a-Demo or Start-Free-Trial CTA section with trust pills, social-proof stats, and optional product screenshot.
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
Book-a-Demo or Start-Free-Trial CTA section with trust pills, social-proof stats, and optional product screenshot.
Inspector panels on this block: Content, CTA, Trust Signals, Social Proof Stats, Product Image, Layout. Those titles come from index.js, not from a shared template.
Behavior controls: “CTA Mode” options: Button, Email Form; “Layout” options: Centered, Split – Text Left, Split – Text Right.
Where to find it
Gutenberg inserter → Marketing → search “Demo / Trial Section” (block name `blockenberg/demo-section` in block.json). Style it in the sidebar after insert.
How to use Demo / Trial Section block for WordPress
- Install Blockenberg. Install from WordPress.org and activate the plugin.
- Insert the block. Edit a page, click +, search for “Demo / Trial Section”, insert it. Category: Marketing.
- Configure inspector controls that exist on this block. Open Content. Set “Badge Text”, “Heading”, “Subtext”, “CTA Mode”.
- Check the published page. The view script reads HTML data attributes: data-opts, data-rendered. The block editor preview may not run the same view script.
Inspector controls from this block’s code
| Control | What the code does |
|---|---|
| Badge Text | Text field in the inspector. block.json default: ✨ No credit card required. Saved as `badge`. |
| Heading | Text field in the inspector. block.json default: See It in Action — Request a Demo. Saved as `heading`. |
| Subtext | Text field in the inspector. block.json default: Get a personalised walkthrough from our team and discover how Blockenberg can transform your workflow in under 30 minutes.. Saved as `subtext`. |
| CTA Mode | Select control; the chosen value is saved on the block. Options: Button; Email Form. block.json default: button. Saved as `ctaMode`. |
| Primary Button Label | Text field in the inspector. block.json default: Book a Free Demo. Saved as `ctaLabel`. |
| 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 `showCtaSec`. |
| Secondary Label | Text field in the inspector. block.json default: Start Free Trial. Saved as `ctaSecLabel`. |
| Secondary URL | Text field in the inspector. block.json default: #. Saved as `ctaSecUrl`. |
| Form Placeholder | Text field in the inspector. block.json default: Enter your work email. Saved as `formPlaceholder`. |
| Submit Label | Text field in the inspector. block.json default: Request Demo. Saved as `formSubmitLabel`. |
| Form Action URL | Text field in the inspector. Saved as `formAction`. |
| Show Trust Signals | On/off toggle in the inspector. On by default. Saved as `showTrust`. |
| Trust Signals — Text | Text field in the inspector. |
| Show Stats | On/off toggle in the inspector. On by default. Saved as `showStats`. |
| Number | Text field in the inspector. |
| Label | Text field in the inspector. |
| Show Image | On/off toggle in the inspector. On by default. Saved as `showImage`. |
| Layout | Select control; the chosen value is saved on the block. Options: Centered; Split – Text Left; Split – Text Right. block.json default: centered. Saved as `layout`. |
| Max Width | Numeric range control in the inspector. Range 600–1600. block.json default: 1100. Saved as `maxWidth`. |
| Padding Top | Numeric range control in the inspector. Range 0–200. block.json default: 100. Saved as `paddingTop`. |
| Padding Bottom | Numeric range control in the inspector. Range 0–200. block.json default: 100. Saved as `paddingBottom`. |
| Colors — Background | Color control in the inspector. block.json default: #0f172a. Saved as `bgColor`. |
| Heading | Color control in the inspector. block.json default: #f8fafc. Saved as `headingColor`. |
| Subtext | Color control in the inspector. block.json default: #94a3b8. Saved as `subColor`. |
| Badge Background | Color control in the inspector. block.json default: rgba(99,102,241,0.15). Saved as `badgeBg`. |
| Badge Text | Color control in the inspector. block.json default: #a5b4fc. Saved as `badgeColor`. |
| CTA Button | Color control in the inspector. block.json default: #6366f1. Saved as `ctaBg`. |
| CTA Text | Color control in the inspector. block.json default: #ffffff. Saved as `ctaColor`. |
| Secondary Button Text | Color control in the inspector. block.json default: #a5b4fc. Saved as `ctaSecColor`. |
| Trust Text | Color control in the inspector. block.json default: #94a3b8. Saved as `trustColor`. |
| Stat Number | Color control in the inspector. block.json default: #f8fafc. Saved as `statNumColor`. |
| Stat Label | Color control in the inspector. block.json default: #64748b. Saved as `statLabelColor`. |
| Accent | Color control in the inspector. block.json default: #6366f1. Saved as `accentColor`. |
| Badge font size (px) | Numeric range control in the inspector. Range 10–20. block.json default: 13. Saved as `badgeFontSize`. |
| Heading (Typo Heading) | Shared Blockenberg typography popover (family, size, weight, spacing). Saved as `typoHeading`. |
| Subtext (Typo Subtext) | Shared Blockenberg typography popover (family, size, weight, spacing). Saved as `typoSubtext`. |
| CTA button font size (px) | Numeric range control in the inspector. Range 11–24. block.json default: 16. Saved as `ctaFontSize`. |
| Stat number font size (px) | Numeric range control in the inspector. Range 16–48. block.json default: 28. Saved as `statNumFontSize`. |
| Stat label font size (px) | Numeric range control in the inspector. Range 10–18. block.json default: 13. Saved as `statLabelFontSize`. |
What the front-end script actually does
- The view script reads HTML data attributes: data-opts, data-rendered.
When this is the right block
- Book-a-Demo or Start-Free-Trial CTA section with trust pills, social-proof stats, and optional product screenshot — that is the job of Demo / Trial Section, not a generic content block.
- Use it when you need the editor control labeled “Badge Text”, which exists on this block’s inspector.
- 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 Demo / Trial Section block in WordPress?
Install Blockenberg from WordPress.org, edit a page in the block editor, click +, and search for “Demo / Trial Section”. It sits under Marketing. After insert, open Content and set “Badge Text”, “Heading”, “Subtext”, “CTA Mode”.
What makes Demo / Trial Section different from other Blockenberg blocks?
Book-a-Demo or Start-Free-Trial CTA section with trust pills, social-proof stats, and optional product screenshot. Inspector labels on this block include “Badge Text”, “Heading”, “Subtext”, “CTA Mode”.
Is the Demo / Trial Section Gutenberg block free?
Yes. Demo / Trial Section ships inside Blockenberg. Get the plugin from WordPress.org — no paid add-on is required for this block.
Can I style Demo / Trial Section 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, Trust Signals, Social Proof Stats).
Related marketing blocks
Affiliate Disclosure
Styled FTC-compliant affiliate link disclosure notice for articles and reviews. Distinct from Affiliate Review Box — this is the small legal notice, not a full product review.
Affiliate Review Box
Structured product review block with score badge, pros & cons columns, verdict summary, price display, and affiliate CTA button.
Affiliate Section
Affiliate/referral program landing section with commission highlight, how-it-works steps, benefits list, and stats.
Age Gate
Age verification overlay that protects page content behind a customizable age confirmation dialog.
Announcement Strip
A thin dismissible announcement bar — ideal above the site header for promotions, launches, or alerts.
App Download
Ready-made app promotion section with iOS / Android badges, device screenshot, heading, subtitle, ratings/reviews, and full background controls.
Get Blockenberg
Install Blockenberg from WordPress.org, then insert Demo / Trial Section from the Gutenberg inserter.