Marketing · Gutenberg
Lead Magnet block for WordPress
Free resource / lead magnet landing section. Features a mockup image (book, PDF, phone), headline, benefit checklist, and an email capture form with privacy note. Ideal for e-books, templates, checklists, and courses.
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
Free resource / lead magnet landing section. Features a mockup image (book, PDF, phone), headline, benefit checklist, and an email capture form with privacy note. Ideal for e-books, templates, checklists, and courses.
Inspector panels on this block: Layout & Content. Those titles come from index.js, not from a shared template.
Behavior controls: “Layout” options: Image Right, Image Left, Centered; “Image Style” options: Floating (shadow), Book, Flat.
Where to find it
Gutenberg inserter → Marketing → search “Lead Magnet” (block name `blockenberg/lead-magnet` in block.json). Style it in the sidebar after insert.
How to use Lead Magnet block for WordPress
- Install Blockenberg. Install from WordPress.org and activate the plugin.
- Insert the block. Edit a page, click +, search for “Lead Magnet”, insert it. Category: Marketing.
- Configure inspector controls that exist on this block. Open Layout & Content. Set “Image Style”, “Show Badge”, “Show Benefits”, “Show Form”.
- Check the published page. The view script reads HTML data attributes: data-opts. The block editor preview may not run the same view script.
Inspector controls from this block’s code
| Control | What the code does |
|---|---|
| Layout | Select control; the chosen value is saved on the block. Options: Image Right; Image Left; Centered. block.json default: image-right. Saved as `layout`. |
| Image Style | Select control; the chosen value is saved on the block. Options: Floating (shadow); Book; Flat. block.json default: floating. Saved as `imageStyle`. |
| Show Badge | On/off toggle in the inspector. On by default. Saved as `showBadge`. |
| Show Benefits | On/off toggle in the inspector. On by default. Saved as `showBenefits`. |
| Show Form | On/off toggle in the inspector. On by default. Saved as `formEnabled`. |
| Form Action URL (optional) | Text field in the inspector. Saved as `formAction`. |
| Show Privacy Note | On/off toggle in the inspector. On by default. Saved as `showPrivacy`. |
| Max Width (px) | Numeric range control in the inspector. Range 600–1400. block.json default: 1060. Saved as `maxWidth`. |
| Padding Top | Numeric range control in the inspector. Range 0–160. block.json default: 80. Saved as `paddingTop`. |
| Padding Bottom | Numeric range control in the inspector. Range 0–160. block.json default: 80. Saved as `paddingBottom`. |
| Colors — Background | Color control in the inspector. block.json default: #f8f5ff. Saved as `bgColor`. |
| Badge BG | Color control in the inspector. block.json default: #dcfce7. Saved as `badgeBg`. |
| Badge Text | Color control in the inspector. block.json default: #166534. Saved as `badgeColor`. |
| Heading | Color control in the inspector. block.json default: #111827. Saved as `headingColor`. |
| Subtext | Color control in the inspector. block.json default: #4b5563. Saved as `subtextColor`. |
| Checkmark | Color control in the inspector. block.json default: #7c3aed. Saved as `checkColor`. |
| CTA BG | Color control in the inspector. block.json default: #7c3aed. Saved as `ctaBg`. |
| CTA Text | Color control in the inspector. block.json default: #ffffff. Saved as `ctaColor`. |
| Privacy Text | Color control in the inspector. block.json default: #9ca3af. Saved as `privacyColor`. |
What the front-end script actually does
- The view script reads HTML data attributes: data-opts.
When this is the right block
- Free resource / lead magnet landing section. Features a mockup image (book, PDF, phone), headline, benefit checklist, and an email capture form with privacy note. Ideal for e-books, templates, checklists, and courses — that is the job of Lead Magnet, not a generic content block.
- Use it when you need the editor control labeled “Image Style”, which exists on this block’s inspector.
- It matches pages about lead magnet, free download, ebook.
- 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 Lead Magnet block in WordPress?
Install Blockenberg from WordPress.org, edit a page in the block editor, click +, and search for “Lead Magnet”. It sits under Marketing. After insert, open Layout & Content and set “Image Style”, “Show Badge”, “Show Benefits”, “Show Form”.
What makes Lead Magnet different from other Blockenberg blocks?
Free resource / lead magnet landing section. Features a mockup image (book, PDF, phone), headline, benefit checklist, and an email capture form with privacy note. Ideal for e-books, templates, checklists, and courses. Inspector labels on this block include “Image Style”, “Show Badge”, “Show Benefits”, “Show Form”.
Is the Lead Magnet Gutenberg block free?
Yes. Lead Magnet ships inside Blockenberg. Get the plugin from WordPress.org — no paid add-on is required for this block.
Can I style Lead Magnet 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 & Content).
Related marketing blocks
Content Upgrade
In-article content upgrade / lead magnet box with opt-in form. Goes between article paragraphs to capture emails in exchange for a bonus resource.
Ebook Section
Digital product and ebook showcase with 3D book cover, feature list, social proof, and CTA.
Content Lock
Gate content behind an email opt-in, password, or click-reveal. Perfect for lead generation, member content, and spoilers.
Feature Showcase
Alternating zigzag rows of image + headline + body text + bullet checklist + CTA. The definitive landing page feature section.
Newsletter Popup
Email capture popup that triggers on scroll, time delay, or exit intent. Cookie-based dismissal, image support, and success state.
Newsletter Signup
Email opt-in form that stores subscribers via the built-in /subscribe REST endpoint.
Get Blockenberg
Install Blockenberg from WordPress.org, then insert Lead Magnet from the Gutenberg inserter.