Skip to content

Master page

SaaS Growth Theme Master Page

This page is a complete section library for the SaaS Growth theme. Each group starts with a quick note about the available style and layout controls, followed by ready-made variants customers can keep, delete, duplicate, or edit in HubSpot.

Start with hero sections Review conversion sections

Use this page as the fastest path to assemble a new custom page.

01 / Hero sections

Hero variants for home, product, landing, demo, and resource pages

Key settings: Content layout, media type, background type, surface, hero height, full-bleed width, media position, media vertical alignment, CTA styles, proof stars, and page-level header override.

Split image hero

Show the promise and supporting visual together

Use this for homepages, product pages, and service pages where the hero needs a strong image beside the core message.

Book a demo View sections

Best for high-intent pages with a clear visual story.

Marketing dashboard and funnel visualization

Background image hero

Create a cinematic first impression with controlled contrast

Use a background image with overlay opacity when the first viewport should feel immersive while keeping text accessible.

Explore the offer See proof

Pair with transparent page header settings when the image should start behind navigation.

Form hero

Capture demand while the offer is still fresh

Use this hero for demo requests, contact pages, gated resources, webinars, and campaign offers that need a form above the fold.

What happens next

Select the real HubSpot form in the editor.

Tell us what you are building

Replace the placeholder with any HubSpot form.

Select a HubSpot form in the page editor to activate this hero.

Centered product hero

Lead with one focused message and a product-style visual

Use this when the page needs a confident, clean hero without a two-column split.

Start building View pricing

Great for product launches, feature pages, and category pages.

Minimal hero

Keep content-heavy pages calm and easy to scan

Use a minimal hero for resource, FAQ, policy, about, and article-style pages where the content should start quickly.

View resources

02 / Proof and metrics

Logo walls and stats that make credibility easy to scan

Key settings: Section surface, intro alignment, desktop columns, logo height and width, logo tone, stats card layout, and compact metric row layout.

Trusted by growing teams

Full-color logo wall for stronger brand recognition

  • Customer logo 1
  • Customer logo 2
  • Customer logo 3
  • Customer logo 4
  • Customer logo 5

Partner ecosystem

Muted logo wall for quieter social proof

  • HubSpot
  • Salesforce
  • Slack
  • Stripe
  • Zapier
  • Google Analytics

Proof in numbers

Metric cards for performance and business outcomes

Use card-based metrics when each number needs a short explanation.

Faster launches

42%

Reusable modules reduce the time spent rebuilding common page sections.

Higher engagement

31%

Clearer CTAs and proof blocks help visitors continue the journey.

Campaign reuse

68%

Teams can duplicate proven page patterns and adjust the content.

Editor confidence

4.8/5

Structured settings make page changes easier to manage.

Executive proof

Compact metric row for fast-scanning pages

Use compact metrics when the page needs proof without adding too much vertical weight.

Reusable sections

24+

A complete section set for common page types.

Template families

15+

Home, landing, pricing, service, and resource pages.

CTA variants

4

Primary, secondary, soft, and text styles.

03 / Content and feature sections

Flexible copy, two-column layouts, and feature-card grids

Key settings: Section surface, intro alignment, content width, container style, media position, vertical alignment, media frame style, desktop columns, card style, card visual type, icon size, badge styling, and CTA variants.

Rich text callout

Use this for editorial copy, page intros, and structured explanations

The rich text section is the simplest building block for content-heavy pages. It supports narrow, medium, and wide content widths, plus plain, card, and callout container styles.

Use it for stories, notes, policies, long-form page copy, customer narratives, or content between more visual modules.

Use this content block

Split content

Explain the value while the visual supports the point

Use split content when buyers need a short narrative, supporting list, and visual context in one section.

  • Clarify the problem and desired outcome.
  • Use list items for buyer questions, benefits, or scope.
  • Choose card, browser, or plain image treatments.
View workflow Compare options
Reusable website section system

Plain media

Use plain imagery when the asset should feel editorial

Plain media is useful for photos, screenshots, customer imagery, and product visuals that should not feel like a browser frame.

  • Place media on the left or right.
  • Align copy to the top or center.
  • Switch CTAs between primary, soft, secondary, and text.
Review examples Start editing
Tablet with connected workspace

Feature grid

Numbered cards for benefits, services, or page-building steps

Use label visuals when the cards should feel ordered, strategic, or process-driven.

01

Clear page purpose

Start every page with a section that explains the main promise and next action.

02

Reusable proof

Add stats, logos, testimonial cards, and comparisons without rebuilding layout.

03

Editor-friendly controls

Adjust surface, columns, alignment, icons, and links directly in HubSpot.

Icon grid

Icon cards for capabilities, product pillars, and service categories

Use icons when visitors need to distinguish categories quickly.

Page templates

Start with proven page structures and tune sections to the buyer journey.

Theme settings

Control typography, colors, buttons, navigation, cards, and form styling globally.

Launch workflow

Use reusable sections to reduce page assembly time across campaigns.

Sales proof

Use comparison tables, metrics, testimonials, and CTA bands to support decisions.

04 / Tabs, process, and integrations

Organize choices, workflows, and connected ecosystems

Key settings: Tab layout, panel style, CTA style, process layout, step columns, integration card columns, integration card style, and section surface.

Use case tabs

Let visitors choose the content path that fits them

Horizontal tabs are useful for use cases, audience paths, product areas, and resource categories.

Launch campaign pages with less rebuild work

Use reusable hero, proof, feature, and form sections to assemble campaign pages quickly while keeping visual quality consistent.

Product detail tabs

Use vertical tabs for deeper explanations

Vertical tabs work well when panel content is longer or when buyers need to compare related topics.

Define the goal before building

Clarify audience, offer, proof, calls to action, tracking needs, and owner responsibilities before the page enters production.

How it works

Card-based steps for implementation, onboarding, or launch plans

Use process cards when each step needs its own visible explanation.

  1. 01

    Choose the closest section

    Find the variant that already matches the structure you need.

  2. 02

    Remove unused modules

    Delete sections that do not support the page goal.

  3. 03

    Update content and media

    Replace text, images, forms, pricing, and links in the editor.

  4. 04

    Check mobile and publish

    Review spacing, order, forms, and CTAs before launch.

Timeline process

Use a timeline when sequence is the main story

Timeline and compact layouts are useful for service methodology, event agendas, launch plans, and implementation roadmaps.

  1. 01

    Audit

    Review content goals, current pages, conversion points, and missing proof.

  2. 02

    Assemble

    Create the page from reusable sections and update each module with real copy.

  3. 03

    Launch

    QA forms, mobile layout, links, tracking, and final stakeholder review.

Connected ecosystem

Show tools, partners, and platform connections

Use integration cards for apps, marketplace partners, supported platforms, or technical proof.

Native

CRM and CMS

HubSpot

Build pages directly inside the HubSpot content editor.

CRM

Salesforce

Support sales workflows and account-level follow-up.

Team workflow

Slack

Keep campaign updates visible to the team.

Payments

Stripe

Connect pricing and checkout conversations.

Automation

Zapier

Move lead and campaign data between tools.

Analytics

Google Analytics

Measure page engagement and acquisition quality.

05 / Pricing and comparison

Decision-support sections for package, plan, and competitor pages

Key settings: Monthly and annual billing switch, featured plan, feature icons, feature badges, card density, pricing CTA styles, visible columns, highlighted comparison column, text or icon cells, icon size, and cell text weight.

Pricing

Plans with annual toggle, featured plan, icons, and badges

Use this section for SaaS plans, service packages, implementation tiers, or marketplace-ready pricing pages.

Switch between monthly flexibility and annual savings.

Launch

For teams building a focused campaign or starter site.

$399 /mo

$319 /mo

Month-to-month plan

Billed annually

Save $960 per year

  • Core page templates
  • Theme settings
  • Launch checklist Included
Popular

Growth

For teams scaling pages, resources, and conversion paths.

$799 /mo

$639 /mo

Best for active teams

Billed annually

Save $1,920 per year

  • All Launch features
  • Pricing and comparison sections
  • Premium proof modules New
  • Blog and resource templates

Scale

For larger teams with more page types and governance needs.

Custom

Custom

Custom scope

Annual agreement

Custom savings based on scope

  • Advanced page library
  • Stakeholder review workflows
  • Expanded section documentation Optional

Detailed comparison

Compare plans with text values and icon cells

Use text when nuance matters and icons when the row is about availability.

Feature Launch Starter pages Growth Most popular Scale Advanced teams
Home page versions Reusable home templates included 1 version 3 versions Custom mix
Pricing module Annual toggle, badges, feature icons
Resource and blog sections Cards and recent blog post modules Basic Included Included
Advanced integrations Partner and ecosystem cards Limited

06 / Testimonials and team

Human proof sections for customers, speakers, leaders, and authors

Key settings: Testimonial layout, star rating size, rating color, rating icon, avatar image or initials, team card style, image shape, people columns, and section surface.

Customer proof

Grid testimonials for multi-person validation

A cleaner way to launch

We could assemble pages from proven sections and still make each campaign feel tailored.

Elena Brooks VP Marketing, BrightLayer

Better page ownership

The controls are clear enough for marketers, but still structured enough to protect the brand.

Marcus Chen RevOps Lead, Northstar

Proof became reusable

We stopped rewriting proof sections from scratch and started reusing the strongest patterns.

Daniel Rowe Growth Director, SignalWorks

Featured proof

Featured-first testimonial layout for stronger customer stories

The page system finally matched how our team works

Instead of treating each landing page like a custom project, we now start from a reliable section system and spend our time improving the message.

Priya Shah Director of Demand Generation, Caldera Cloud

Quick edits without layout anxiety

The theme gave us enough flexibility without making every content edit feel risky.

Owen Miller Marketing Operations, Pipeline Labs

People

Team cards for speakers, authors, advisors, or leadership

Use this section wherever buyers need to see the people behind the offer.

Elena Brooks

Elena Brooks

Growth Strategy Lead

Connects page strategy, campaign messaging, and buyer questions before implementation begins.

Marcus Chen

Marcus Chen

Product Marketing Lead

Turns complex services and product details into sections buyers can scan and understand.

Daniel Rowe

Daniel Rowe

HubSpot CMS Strategist

Shapes editor experience, module structure, and launch-ready page architecture.

Authors and advisors

A lighter team treatment for compact pages

Use minimal cards when the page needs people context without a heavy card layout.

Elena Brooks

Elena Brooks

Strategy

Messaging and buyer journey.

Marcus Chen

Marcus Chen

Content

Product and service narratives.

Daniel Rowe

Daniel Rowe

Implementation

HubSpot CMS architecture.

07 / Resources and blog

Content cards for guides, webinars, case studies, and recent articles

Key settings: Resource columns, resource card style, recent post count, blog selection, featured image toggle, summary/date/author toggles, post columns, and blog card style.

Featured resources

Promote helpful next-step content

Use resource cards after product, service, pricing, and landing sections to continue the buyer journey.

Guide 11 min read

Landing page conversion field guide

Structure hero messaging, proof, forms, and CTAs around a single campaign goal.

Checklist Checklist

HubSpot launch QA checklist

Review forms, CTAs, mobile spacing, tracking, accessibility, and final approval points.

Webinar 42 min watch

Turn product pages into sales enablement

Use narrative sections, comparison moments, and follow-up resources to support active deals.

Recommended reads

Use two-column resources when summaries need more room

Two-column layouts work well for case studies, reports, and long descriptions.

Case study Customer story

How BrightLayer reduced launch friction

See how a marketing team used reusable sections to shorten reviews and keep campaign pages consistent.

Report Research report

Website operating model trends

Learn how lean teams are using modular page systems, clearer ownership, and better proof libraries.

Latest insights

Pull recent posts from the selected HubSpot blog

Use this module on home, product, resource, and blog templates to keep current content visible.

View all articles

08 / Forms, FAQ, and CTA bands

Conversion support sections for lead capture and objection handling

Key settings: Form card style, form-first layout, trust items, FAQ layout, CTA band surface, layout, frame, spacing, text color mode, custom colors, gradient controls, proof points, and CTA button styles.

Book a demo

Pair persuasive copy with a HubSpot form

Use this section for demo requests, contact forms, assessments, gated content, and campaign handraisers.

  • Response within one business day
  • Clear next steps after submission
  • No pressure or hard sell

Tell us what you are building

Select any HubSpot form in the editor. Theme form styling applies automatically.

Select a HubSpot form in the page editor to activate this section.

Start the conversation

Put the form first when conversion is the main page goal

Use the reverse layout when the form should appear first on desktop.

  • Fast routing to the right team
  • Helpful context before the call

Request a consultation

Choose the right HubSpot form for this page.

Questions

Answer objections without making the page heavy

Use two-column FAQs when the intro copy and question list should share the same view.

Can we edit this page after launch?

Yes. Each module is editable in HubSpot, with style controls for common layout and visual changes.

Can sections be removed or duplicated?

Yes. Use this master page as a starting point, then remove unused sections and duplicate useful ones.

Can the theme match our brand?

Global theme settings control colors, typography, buttons, forms, header, footer, and card styling.

Do modules work across templates?

Yes. The same modules power home, landing, pricing, service, resource, and contact templates.

Stacked FAQ

Use stacked FAQs for focused landing pages

Stacked layout keeps the intro and questions centered in one vertical flow.

When should I use a stacked FAQ?

Use it near the end of landing pages, campaign pages, pricing pages, or form pages.

Can I add more questions?

Yes. Add, remove, reorder, and edit questions directly in the module.

Final CTA

Turn the page into a clear next step

Use a CTA band near the end of product, service, pricing, and resource pages.

  • Reusable sections
  • HubSpot editor controls
  • Theme-ready styling
Book a demo View pricing

Start with a proven page structure and adjust the content.

Ready to launch

Use a full-width dark band when the page needs a decisive finish

This version is useful for enterprise pages, comparison pages, and pages with darker visual systems.

  • Clear ownership
  • Better proof
Talk to sales Explore resources

Keep the close simple, useful, and easy to act on.