Skip to content
Get Generator
Search icon
Get Generator

Pre-Build Sections for your HubSpot Website and Landing Pages

Generator’s library of pre-built sections provides the structural foundation to launch pages in minutes and allows you to fully customize every detail from brand colors and typography to background gradients and spacing using Generator’s drag-and-drop tools.
Sections

Hero Sections

The hero section is the first thing visitors see — these prebuilt sections give you a professional foundation to launch quickly, with full control over backgrounds, alignment, and text.
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
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.
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
Sections

Content Sections

Content sections let you structure the heart of your page — these prebuilt layouts give you flexible, professional building blocks for text, images, and media, ready to customize with Generator's drag-and-drop tools.
woman-2

Two Column Section with Dynamic Text Reveal

Guide your reader's focus by animating your headlines and body text as they enter the viewport. These subtle entrance effects make your content feel alive and ensure your most important messaging doesn't get lost in a static layout.
Learn more

Two Column Content Section with On-Scroll Image Slide-In Effect

Bring your visuals to life with customizable entrance animations.

Whether it’s a soft fade, a slide, or a zoom, these interactions add a layer of professional polish that keeps users engaged as they journey down your page.

Learn more
people
woman-2
Dark Theme

Design High-Contrast Layouts with Built-in Dark Mode Support

Generator gives you total control over your section "surfaces." Easily switch to dark backgrounds to create a premium, cinematic feel that highlights your most important content.
  • Optimized for AI Search
  • High-contrast bullet points
  • Organize related points to signal expertise.
Logo
Logo
Logo
Logo
Logo
Section Label

Use Asymmetric Layouts to Create a High-End Editorial Look and Feel

Choose this layout for heavy content like mission statements, company values, or detailed philosophy sections.

By isolating the headline in the left column, you create a sophisticated visual balance that makes long-form text feel less intimidating and more prestigious.

This structure is perfect for establishing Topic Authority. Use the left-hand anchor to state a broad category or pillar, and use the right-hand body text to provide the depth.

Maintain Context with Scrollable Sticky Content Sections

This column stays pinned while the right-hand column scrolls. Use it to keep a phase title or key message visible as visitors move through multiple supporting details.

Phase 01: Strategic Discovery

Start your process by defining the goals. In this right-hand column, you can stack as many cards as needed to explain your workflow.

The sticky header on the left will stay with the user as they scroll through this phase.

Phase 02: Design & Prototyping

Because this column can take any module, you can mix text, images, or even buttons here.

This flexibility allows you to show the evolution of a project while the "Phase" title remains locked on the left.

Phase 03: Final Development

As the user reaches the end of the scroll, the sticky module will naturally unpin and follow the rest of the page.

Use this final card to drive a call-to-action or summarize the final outcome of your process.

Phase 04: Launch & Optimize

Deploy your final assets and begin the continuous process of monitoring data to improve performance over time.

 

Organize Complex Information Into Content Tabs

Use this pairing when you want copy and an image to line up along the middle when heights differ. Adjust Vertical Alignment if you prefer top- or bottom-aligned columns.

SaaS product mockup

Organize Complex Information Into Content Tabs

Use this pairing when you want copy and an image to line up along the middle when heights differ. Adjust Vertical Alignment if you prefer top- or bottom-aligned columns.

SaaS product mockup

Interactive Visual Cues

Use the front of the card to spark curiosity with a high-level benefit. The flip action then "rewards" the user with the deeper explanation, increasing the time they spend interacting with your content.

Interactive Visual Cues

By hiding technical specs or long descriptions on the back of the card, you prevent the user from feeling overwhelmed. This "progressive disclosure" keeps the initial browsing experience clean and focused.

Optimize for AEO Intent

Structure the front as a common user question and the back as the authoritative answer. This clear Q&A format is highly readable for AI crawlers looking for direct solutions to specific user queries.

Highlight Your Primary Features With Expansive Bento Grid Layout

Use this module for your main story: a headline and short supporting copy. The height is set for a bento "hero" cell so visitors see one clear message beside the smaller tiles.
 

Second story in the right column

This tile uses the same Offer Card module with a shorter minimum height. Add a supporting benefit, proof point, or link—edit the rich text independently of the tall card.

Complete the bento: third tile

Use the bottom card for pricing, a resource, or another CTA. All three instances share one card style from the section—swap copy and links in each module without changing the layout.

Highlight Your Primary Features With Expansive Bento Grid Layout

Use this module for your main story: a headline and short supporting copy. The height is set for a bento "hero" cell so visitors see one clear message beside the smaller tiles.

Second story in the right column

This tile uses the same Offer Card module with a shorter minimum height. Add a supporting benefit, proof point, or link—edit the rich text independently of the tall card.
Call To Action

Complete the bento: third tile

Use the bottom card for pricing, a resource, or another CTA. All three instances share one card style from the section—swap copy and links in each module without changing the layout.
Card image

Categorize Your Content

Use these cards to group your services or features. It helps users find what they need quickly without having to read through a wall of text.
Card image

Drive Targeted Actions

You can make each individual card clickable. This allows you to turn every card into a button that drives users to a specific landing page or resource.
Card image

Rank for Your Topics

AI models look for "Entity Groups." By grouping related card titles, you tell search engines exactly which topics your brand is an authority on.
Image8

Manage Large Groups

If you have more than 4 items (like a portfolio or team list), use this slider to keep the page clean while still making all content accessible.
Image8

Interactive Browsing

Sliders encourage user interaction. Every "swipe" or "click" tells the browser the user is engaged, which can positively impact your SEO signals.
Image8

Space Efficiency

This module allows you to fit many cards into the vertical space of one. It’s the best way to keep your page height manageable on mobile.
Image8

Mobile-First UX

On smaller screens, sliders automatically transform into a touch-friendly swipe experience. This ensures your content remains accessible and engaging for users on the go.
Image8

Mobile-First UX

On smaller screens, sliders automatically transform into a touch-friendly swipe experience. This ensures your content remains accessible and engaging for users on the go.
Card Slider Module

Two Column Section with Card Slider Module

This section demonstrates the flexibility of the Generator Theme. You aren't limited to simple text; you can drag advanced modules like this Card Slider into any column to create high-density, feature-rich layouts.

Image8

Manage Large Groups

If you have more than 4 items (like a portfolio or team list), use this slider to keep the page clean while still making all content accessible.
Image8

Interactive Browsing

Sliders encourage user interaction. Every "swipe" or "click" tells the browser the user is engaged, which can positively impact your SEO signals.
Image8

Space Efficiency

This module allows you to fit many cards into the vertical space of one. It’s the best way to keep your page height manageable on mobile.
Image8

Mobile-First UX

On smaller screens, sliders automatically transform into a touch-friendly swipe experience. This ensures your content remains accessible and engaging for users on the go.
42
%
Animated Progress Tracking
These counters automatically trigger as the user scrolls into view, adding a sense of energy and movement to your key performance indicators.
25000
$
Versatile Data Formatting
You can easily add custom prefixes or suffixes, such as currency symbols or plus signs, to provide clear context for every data point.
1000
+
Scalable Success Metrics
Use this section to highlight your most impressive milestones, from total clients served to years of industry-leading experience.
woman-2
42
%
Animated Progress Tracking
These counters automatically trigger as the user scrolls into view, adding a sense of energy and movement to your key performance indicators.
25000
$
Versatile Data Formatting
You can easily add custom prefixes or suffixes, such as currency symbols or plus signs, to provide clear context for every data point.

Free

Enable the monthly and yearly toggle to show dynamic pricing. It’s the perfect way to demonstrate value and encourage users to commit to longer-term billing cycles.

$0/mo

1 mo. minimum - cancel any time

Learn More
  • Feature item 1
  • Feature item 2
  • Feature item 3
  • Feature item 4
  • Feature item 5

Professional

Use the "Most Popular" toggle to visually highlight a specific card. This draws the eye to your preferred tier and helps guide the user's decision-making process.

$29/mo

1 mo. minimum - cancel any time

Learn More
  • Feature item 1
  • Feature item 2
  • Feature item 3
  • Feature item 4
  • Feature item 5

Enterprise

Every element is customizable. You can easily add or remove feature lists, edit pricing currency, and make buttons clickable to drive users directly to your checkout.

$99/mo

1 mo. minimum - cancel any time

Learn More
  • Feature item 1
  • Feature item 2
  • Feature item 3
  • Feature item 4
  • Feature item 5

Free

Enable the monthly and yearly toggle to show dynamic pricing. It’s the perfect way to demonstrate value and encourage users to commit to longer-term billing cycles.

$0/year

Our most affordable plan ever!

Learn More
  • Feature item 1
  • Feature item 2
  • Feature item 3
  • Feature item 4
  • Feature item 5

Professional

Use the "Most Popular" toggle to visually highlight a specific card. This draws the eye to your preferred tier and helps guide the user's decision-making process.

$299/year

Save over 15% annually

Learn More
  • Feature item 1
  • Feature item 2
  • Feature item 3
  • Feature item 4
  • Feature item 5

Enterprise

Every element is customizable. You can easily add or remove feature lists, edit pricing currency, and make buttons clickable to drive users directly to your checkout.

$999/year

Save over 15% annually

Learn More
  • Feature item 1
  • Feature item 2
  • Feature item 3
  • Feature item 4
  • Feature item 5

Pricing Table Module with Flexible Columns

This section demonstrates how you can drag your pricing modules into specific columns to create unique side-by-side comparisons, or to leave room for additional context like sales copy or supportive images.
 

Free

Enable the monthly and yearly toggle to show dynamic pricing. It’s the perfect way to demonstrate value and encourage users to commit to longer-term billing cycles.

$0/mo

1 mo. minimum - cancel any time

Learn More
  • Feature item 1
  • Feature item 2
  • Feature item 3
  • Feature item 4
  • Feature item 5

Enterprise

Every element is customizable. You can easily add or remove feature lists, edit pricing currency, and make buttons clickable to drive users directly to your checkout.

$99/mo

1 mo. minimum - cancel any time

Learn More
  • Feature item 1
  • Feature item 2
  • Feature item 3
  • Feature item 4
  • Feature item 5
cc-stripe

 
cc-stripe

 
cc-stripe

 
cc-stripe

 
cc-stripe

 
Feature name
Feature name
Feature name
Feature name
Feature name

Best Hubspot Theme

"Generator is the best Theme we've seen for HubSpot. High-Quality of development and we really love to work with David!"

Generator Theme Testimonial
Marcello G.
CEO, Heroes Group

Best Hubspot Theme

"Generator is the best Theme we've seen for HubSpot. High-Quality of development and we really love to work with David!"

Generator Theme Testimonial
Marcello G.
CEO, Heroes Group

Best Hubspot Theme

"Generator is the best Theme we've seen for HubSpot. High-Quality of development and we really love to work with David!"

Generator Theme Testimonial
Marcello G.
CEO, Heroes Group

Best Hubspot Theme

"Generator is the best Theme we've seen for HubSpot. High-Quality of development and we really love to work with David!"

Generator Theme Testimonial
Marcello G.
CEO, Heroes Group

Best Hubspot Theme

"Generator is the best Theme we've seen for HubSpot. High-Quality of development and we really love to work with David!"

Generator Theme Testimonial
Marcello G.
CEO, Heroes Group

Best Hubspot Theme

"Generator is the best Theme we've seen for HubSpot. High-Quality of development and we really love to work with David!"

Generator Theme Testimonial
Marcello G.
CEO, Heroes Group

Best Hubspot Theme

"Generator is the best Theme we've seen for HubSpot. High-Quality of development and we really love to work with David!"

Generator Theme Testimonial
Marcello G.
CEO, Heroes Group

Best Hubspot Theme

"Generator is the best Theme we've seen for HubSpot. High-Quality of development and we really love to work with David!"

Generator Theme Testimonial
Marcello G.
CEO, Heroes Group

“Social proof is your most underutilized conversion tool. Real testimonials signal trust to human visitors and act as entity validation signals that AI search engines use to evaluate your authority and credibility.”

girl-working-on-laptop
Accordion Module

Frequently Asked Questions

This FAQ module is more than just a support tool; it’s a strategic asset designed to help your brand surface as a Direct Answer in AI-driven search results.

What is AEO and why should I include an FAQ on my page?

Answer Engine Optimization (AEO) is the process of optimizing content for AI models like ChatGPT and Google Search Generative Experience.

By providing clear, concise questions and answers, you make it easier for these engines to find and pull your content as a featured snippet or direct response.

How does the Generator FAQ module help with AEO?

AI crawlers look for "Helpful Content" that demonstrates deep expertise.

Using this module to address specific, niche-related questions signals to search engines that your page is a comprehensive resource, which can significantly boost your overall E-E-A-T (Experience, Expertise, Authoritativeness, and Trustworthiness) ranking.

Can I customize the look of the FAQ to match my brand?

Absolutely. You have full control over the "Surface" styles, including borders, corner rounding, and drop shadows. This allows you to maintain a clean, professional look that reduces cognitive load for your users while keeping them engaged with your most important technical or service-related information.

Accordion Module

Frequently Asked Questions

This FAQ helps visitors self-serve and gives AI-friendly Q&A on the page. Replace the questions and answers with your own topics, then keep each answer concise so it reads well in search and chat.
What is AEO and why should I include an FAQ on my page?

Answer Engine Optimization (AEO) is the process of optimizing content for AI models like ChatGPT and Google Search Generative Experience.

By providing clear, concise questions and answers, you make it easier for these engines to find and pull your content as a featured snippet or direct response.

How does the Generator FAQ module help with "Topic Authority"?

AI crawlers look for "Helpful Content" that demonstrates deep expertise.

Using this module to address specific, niche-related questions signals to search engines that your page is a comprehensive resource, which can significantly boost your overall E-E-A-T (Experience, Expertise, Authoritativeness, and Trustworthiness) ranking.

Can I customize the look of the FAQ to match my brand?

Absolutely. You have full control over the "Surface" styles, including borders, corner rounding, and drop shadows. This allows you to maintain a clean, professional look that reduces cognitive load for your users while keeping them engaged with your most important technical or service-related information.

Sections

Features Sections

Showcase what makes your product stand out — these prebuilt layouts give you a polished foundation for highlighting key benefits, with full control over icons, text, and arrangement.
Focused Clarity
Centered blocks highlight your core benefits. Keep messaging concise for a clean layout that guides visitors toward your primary action.
Visual Hierarchy
Break up text to prevent fatigue and improve retention. Use scannable headers to address pain points and provide the answers users need.
Scalable Growth
This flexible layout adapts to any business size. Build trust by organizing your services into a structure that proves your authority.
Drag & Drop Ease
Move any feature block effortlessly with a simple drag-and-drop motion.
Custom Icons
Swap default icons for any image or library graphic with just one click.
Flexible Columns
Adjust your column widths to fit two, three, four, or six items per row.
Feature Section

Feature Showcase

Use this area to explain the "why" behind your services. This narrative text allows you to build a connection with your audience before they dive into the specific details listed below.
  • Seamless Tool Integration: Connect your existing software with zero downtime or complex setup.
  • Enterprise-Grade Security: Protect sensitive data with industry-standards.
  • Real-Time Performance: Monitor your business operations with instant data updates.
saas-mockup
Screenshot 2025-07-20 at 11.54.01 AM

Interactive Drag & Drop

Easily rearrange these text blocks to match your page flow with a simple mouse movement.

Full Element Control

Customize every headline, paragraph, and spacing setting without writing a single line of code.

Responsive Visuals

Your images and text automatically scale to look sharp and professional on any mobile device.
Sections

Call To Action Sections

Turn visitors into customers — these prebuilt CTA sections give you a high-converting foundation, ready to customize with your messaging, buttons, and background style.

Call To Action

Full-Width Call To Action

Place this section at the end of a page to provide a clear next step. The button uses Link to content — open the module and pick a site page, landing page, or other HubSpot content for the destination.
Call To Action
Dark Mode

Dark mode CTA
for contrasting layouts

This pre-built layout features the Aurora Text module to create calls-to-action quickly while allowing for full customization of colors, spacing, and alignment.
Call To Action

Call To Action  with Parallax

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

Call To Action Card

Use this elevated card to draw immediate attention to your main goal. This section can also trigger a HubSpot CTA pop-up for a seamless user experience.

Call To Action

Call To Action With Full-Screen Background Image

Use this elevated card to draw immediate attention to your main goal. This section can also trigger a HubSpot CTA pop-up.
Call To Action
HubSpot Form CTA

Lead Generation Form CTA

Embed this call-to-action section at the end of your page to collect high-quality leads directly into your HubSpot CRM.