Skip to content
Get Generator
Search icon
Get Generator
Elements

Generator's Pre-built Drag-and-Drop Website Hero Sections

This collection of pre-built drag-and-drop sections allows you to easily construct your HubSpot websites and landing pages using the Generator theme, offering total flexibility to customize styles, swap components, and adjust every element to fit your brand.
Hero Section

Full Width Hero Section

A pre-built drag-and-drop layout in the Generator theme. Use this base to launch quickly, then easily customize colors, spacing, and alignment.
Call To Action
Hero Section

Pre-Build Hero Section with a Full-Width Background Image

This hero section allows you to use full-bleed background images to set a mood while maintaining total control over your design through easy drag-and-drop customization.

Product spotlight

Hero section
for digital products

This pre-built layout features the Text Gradient module and an animated image to launch your page quickly while allowing for full customization of colors, spacing, and alignment.
Call To Action
saas-mockup
Dark Mode

Dark mode hero
to create contrasting layouts

This pre-built layout features the Aurora Text module and animated product imagery to launch your dark mode pages quickly while allowing for full customization of colors, spacing, and alignment.
Call To Action
dashboard-dark
video poster image

Full-Screen Video Hero

Use high-quality background video to capture attention and tell your brand’s story the moment the page loads. This layout is designed to maintain high text contrast and fast loading speeds while providing a cinematic experience for your visitors.
Call To Action
Product spotlight

your buyers feel instantly.

This pre-built layout features the Typewriter module and animated product imagery to launch your page quickly while allowing for full customization of colors, spacing, and alignment.
saas-mockup

Parallax Image Hero Section

Grab attention with a background image that moves at a different speed than your scroll. This creates visual depth and keeps users engaged with your brand.
Call To Action
Hero Section

Flexible Split Screen Hero Section with Text and Image

This pre-built layout features a dual-column design and animated imagery to launch your page quickly while allowing for full customization of colors, spacing, and alignment.

Call To Action
people-image
Embedded Forms

Capture Leads with a Landing Page Form Hero Section

This layout allows you to easily embed HubSpot forms directly into your page to remove unnecessary steps from the user journey. By placing your call to action front and center, you can significantly increase conversion rates and accelerate your lead generation process.

  • Sync HubSpot CRM
  • Capture High-Quality Leads
  • Automate Your Follow-Up Workflow
App Hero

Drive More Installs with an App Hero

Use this hero to drive adoption for your software or digital product. It is engineered to turn high-intent traffic into active users through clear, strategic conversion triggers.

Every element here is fully customizable within the HubSpot editor. You can easily adjust the layout, column spacing, and styling without touching a single line of code.
Download for Apple
Download for Android
img-iphone
Guide Download

Capture Leads with a Resource Download Hero

This hero is designed for middle-of-the-funnel resource offers like ebooks, whitepapers, or guides. It uses a prominent visual of your digital asset to make the offer feel tangible, encouraging visitors to exchange contact info for your expertise.

Call To Action
img-2026-hubspot-tools-blueprint-1
Event Registration

Drive Event Attendance with Time-Sensitive Heroes

This hero is engineered for webinars, live events, or limited-time offers. It utilizes a dedicated countdown timer to create urgency for your event in a single glance.
Call To Action
Registration ends in:
Days
Hours
Minutes
Seconds
HubSpot Calendar

Shorten the Sales Cycle with a Meeting Scheduler Hero

By embedding a HubSpot Meeting tool directly into the hero, you are targeting bottom-of-funnel users who are ready to talk. Use this on dedicated Book a Demo pages or Contact Us replacements to remove the back-and-forth of email scheduling.
img-2026-hubspot-tools-blueprint-1

Thank You

Your resource is on its way. Use this page to confirm the conversion, deliver the download, and guide visitors toward their next logical step — whether that is booking a call, exploring a case study, or returning to the site.
Download Now