Layout · Gutenberg
Gradient Hero block for WordPress
Full landing page hero with animated gradient/mesh background, badge, headline, CTA buttons, and social proof row.
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
Full landing page hero with animated gradient/mesh background, badge, headline, CTA buttons, and social proof row.
Inspector panels on this block: Content, Social Proof, Avatar, Background Style, Layout. Those titles come from index.js, not from a shared template.
Behavior controls: “Background Style” options: Mesh Gradient, Linear Gradient, Solid, Aurora; “Content Alignment” options: Center, Left.
Gradient Hero 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 → Layout → search “Gradient Hero” (block name `blockenberg/gradient-hero` in block.json). Style it in the sidebar after insert.
How to use Gradient Hero block for WordPress
- Install Blockenberg. Install from WordPress.org and activate the plugin.
- Insert the block. Edit a page, click +, search for “Gradient Hero”, insert it. Category: Layout.
- Configure inspector controls that exist on this block. Open Content. Set “Show Badge”, “Badge Text”, “Show Subheading”, “Button Text”.
- 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: ✨ New — Just launched. Saved as `badge`. |
| Show Subheading | On/off toggle in the inspector. On by default. Saved as `showSubheading`. |
| Button Text | Text field in the inspector. block.json default: Get started free. Saved as `ctaText`. |
| Button URL | Text field in the inspector. block.json default: #. Saved as `ctaUrl`. |
| Show Secondary CTA | On/off toggle in the inspector. On by default. Saved as `showSecondaryCta`. |
| Secondary Text | Text field in the inspector. block.json default: Watch demo. Saved as `ctaSecondaryText`. |
| Secondary URL | Text field in the inspector. block.json default: #. Saved as `ctaSecondaryUrl`. |
| Show Social Proof | On/off toggle in the inspector. On by default. Saved as `showSocialProof`. |
| Proof Text | Text field in the inspector. block.json default: Trusted by 12,000+ teams worldwide. Saved as `socialProofText`. |
| Background Style | Select control; the chosen value is saved on the block. Options: Mesh Gradient; Linear Gradient; Solid; Aurora. block.json default: mesh. Saved as `style`. |
| Content Alignment | Select control; the chosen value is saved on the block. Options: Center; Left. block.json default: center. Saved as `contentAlign`. |
| Max Content Width (px) | Numeric range control in the inspector. Range 480–1200. block.json default: 760. Saved as `maxWidth`. |
| Padding Top (px) | Numeric range control in the inspector. Range 0–240. block.json default: 100. Saved as `paddingTop`. |
| Padding Bottom (px) | Numeric range control in the inspector. Range 0–240. block.json default: 100. Saved as `paddingBottom`. |
| Button Radius (px) | Numeric range control in the inspector. Range 0–40. block.json default: 10. Saved as `ctaRadius`. |
| Heading | Shared Blockenberg typography popover (family, size, weight, spacing). Saved as `typoHeading`. |
| Subheading | Shared Blockenberg typography popover (family, size, weight, spacing). Saved as `typoSub`. |
| Badge | Shared Blockenberg typography popover (family, size, weight, spacing). Saved as `typoBadge`. |
| CTA Button Size (px) | Numeric range control in the inspector. Range 13–22. block.json default: 16. Saved as `ctaSize`. |
| Colors — Background | Color control in the inspector. block.json default: #0f172a. Saved as `bgColor`. |
| Gradient Color A | Color control in the inspector. block.json default: #6c3fb5. Saved as `colorA`. |
| Gradient Color B | Color control in the inspector. block.json default: #3b82f6. Saved as `colorB`. |
| Gradient Color C | Color control in the inspector. block.json default: #ec4899. Saved as `colorC`. |
| Heading Text | Color control in the inspector. block.json default: #ffffff. Saved as `textColor`. |
| Subheading Text | Color control in the inspector. block.json default: rgba(255,255,255,0.65). Saved as `subColor`. |
| Badge Background | Color control in the inspector. block.json default: rgba(108,63,181,0.18). Saved as `badgeBg`. |
| Badge Text | Color control in the inspector. block.json default: #c4b5fd. Saved as `badgeColor`. |
| Primary Button | 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 | Color control in the inspector. block.json default: rgba(255,255,255,0.08). Saved as `btn2Bg`. |
| Secondary Button Text | Color control in the inspector. block.json default: #ffffff. Saved as `btn2Text`. |
When this is the right block
- Full landing page hero with animated gradient/mesh background, badge, headline, CTA buttons, and social proof row — that is the job of Gradient Hero, 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 hero, gradient, mesh.
- Inserter grouping: page structure, sections, and composition.
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 Hero block in WordPress?
Install Blockenberg from WordPress.org, edit a page in the block editor, click +, and search for “Gradient Hero”. It sits under Layout. After insert, open Content and set “Show Badge”, “Badge Text”, “Show Subheading”, “Button Text”.
What makes Gradient Hero different from other Blockenberg blocks?
Full landing page hero with animated gradient/mesh background, badge, headline, CTA buttons, and social proof row. Inspector labels on this block include “Show Badge”, “Badge Text”, “Show Subheading”, “Button Text”.
Is the Gradient Hero Gutenberg block free?
Yes. Gradient Hero ships inside Blockenberg. Get the plugin from WordPress.org — no paid add-on is required for this block.
Can I style Gradient Hero 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, Social Proof, Avatar, Background Style).
Related layout blocks
Split Hero
Two-column hero section with headline, badge, body text, dual CTA buttons and social proof on one side — image or video on the other. Built for landing pages.
Gradient Section
A full-width section with an animated CSS gradient background, headline, subtext, and dual call-to-action buttons.
Video Hero
Hero section with video preview or background video, headline, CTA buttons and optional social proof.
Dark Hero
Dark glassmorphism hero for AI, SaaS and tech sites. Features glow effects, gradient text, optional floating stat badges, badge pill, and rich button controls.
Mega Menu
Full-width mega menu navigation with column groups, icons, images, CTAs and rich hover panels.
Page Header
A versatile page hero/banner section: eyebrow label, headline, subtitle, breadcrumbs, CTA buttons, and rich background options.
Get Blockenberg
Install Blockenberg from WordPress.org, then insert Gradient Hero from the Gutenberg inserter.