Scale Pro PRO

Introduction

Scale Pro is the premium version of the Scale theme, built for teams that outgrow default HubSpot themes. It includes everything in Scale Free plus advanced features designed for go-to-market success:

• 14+ premium page templates
• 10+ Pro modules (pricing toggles, comparison tables, sliders)
• 25+ pre-built sections
• Advanced theme settings (mega menu, animations, header styles)
• Table of contents and inline CTAs for blog
• Priority support

What's Included

Installation

After purchasing Scale Pro from the HubSpot Marketplace:

1. Go to Settings → Website → Themes in your HubSpot account
2. Find "Scale Pro - GTM, SaaS & Services" in your installed themes
3. Click Actions → Set as active theme
4. Configure theme settings to match your brand
5. Start creating pages using Pro templates

Quick Start

1. Choose Your Homepage

Scale Pro includes two homepage variants:

• home-saas-pro.html - For SaaS companies with pricing toggles and integrations
• home-services-pro.html - For service businesses with case studies and process

2. Configure Theme Settings

Go to Settings → Website → Themes → Edit theme settings to configure:

• Brand colors and accent color
• Header style (solid, transparent, or blur)
• Enable mega menu if needed
• Blog features (ToC, inline CTAs)

3. Set Up Navigation

Create your menu at Settings → Website → Navigation. If using mega menu, configure columns in the Pro Mega Menu module.

Pro Templates Overview

Scale Pro includes 14+ professionally designed templates optimized for GTM teams.

Homepage Templates

Landing Page Templates

SaaS Page Templates

Case Study Templates

System Templates

Scale Pro includes all required HubSpot system templates:

Pro Modules Overview

Scale Pro includes 10+ custom modules designed for conversion and engagement.

Module Styling (Styles Tab)

All modules include a "Styles" tab with common styling options:

• Spacing: Margin and padding controls for all sides
• Background Color: Set a custom background with opacity
• Text Color: Override default text color
• Text Alignment: Left, center, or right alignment
• Border: Add borders with custom color, width, and radius

These options allow you to customize the look of each module instance without writing CSS.

Pricing Modules

Pricing Toggle

pro_pricing_toggle.module - Monthly/annual pricing cards with animated toggle. Features:

• Billing period toggle with savings badge
• Featured plan highlighting
• Feature list with checkmarks
• CTA buttons per plan

Pricing Comparison Table

pro_pricing_comparison.module - Feature comparison across plans. Features:

• Sticky header row
• Check/X icons for features
• Mobile-responsive stacked cards

Competitor Comparison

pro_competitor_comparison.module - "Us vs Them" comparison table for competitor pages.

Social Proof Modules

Trust Bar

pro_trust_bar.module - Flexible social proof elements for hero sections or anywhere you need trust signals.

Trust Item Types

Trust Bar Features

• Layout: Inline, stacked, or centered arrangements
• Avatar Pile: Up to 8 overlapping avatar images with customizable size
• Stacked Rating: Option to stack stars above text
• Bold Text Support: Use <strong>text</strong> for emphasis
• Badge Icons: Award, shield, check, star, verified, certified
• Separator: Dot, line, dash, or none between items
• Styling: Custom colors for stars, icons, text, highlights, and avatar borders

Testimonial Slider

pro_testimonial_slider.module - Accessible carousel with:

• Quote, author, title, company, avatar
• Keyboard navigation
• Optional autoplay
• Navigation arrows and dots

Testimonials Grid

testimonials.module - Static grid of testimonial cards with:

• Editable Section Header: Customize eyebrow text and heading
• Company Logo: Displayed in grayscale with opacity
• Funding Badge: Optional badge with customizable background color

Trust Badges

pro_trust_badges.module - Security and compliance badges strip.

Case Study Grid

pro_case_study_grid.module - Case study cards with logos and metrics.

Navigation Modules

Mega Menu

pro_mega_menu.module - Multi-column dropdown navigation with:

• Column-based layouts
• Featured cards
• Icon support
• Mobile accordion fallback

Table of Contents

pro_table_of_contents.module - Auto-generated or manual ToC for long pages and blog posts.

Content Modules

Integrations Grid

pro_integrations_grid.module - Filterable integrations with categories and optional search.

Video Modal

pro_video_modal.module - Thumbnail that opens video in accessible modal with focus trap.

Speakers

pro_speakers.module - Speaker profiles with photos, bios, and social links for webinar pages.

Logo & Client Carousel

Display client logos, partner badges, or brand logos with flexible styling options.

Animation Options

• Enable Scrolling Animation: Turn on infinite horizontal scroll (marquee effect)
• Animation Speed: Duration in seconds (5-120s) - lower = faster
• Animation Direction: Left or right scroll direction
• Pause on Hover: Stop animation when user hovers

Static Grid Options

When animation is disabled, logos display in a responsive grid:

• Grid Gap: Space between logo items (0-75px)
• Grid Columns: Number of columns (1-6)

Logo Styling

• Logo Style: Grayscale, Original Colors, or White (for dark backgrounds)
• Logo Opacity: Control logo transparency (10-100%)
• Max Logo Height: Set maximum height for logos (20-150px)
• Background Color: Section background with opacity support

Theme Settings

Access via Settings → Website → Themes → Edit theme settings.

Header Options

Scale Pro includes advanced header customization:

Header Style

• Solid: Standard solid background
• Transparent: Transparent background (great for hero images)
• Blur: Glass morphism effect with backdrop blur

Sticky Behavior

• Off: Normal scrolling header
• Always: Fixed at top always
• Scroll: Appears when scrolling up

Mega Menu

Enable mega menu in Theme Settings to use the Pro Mega Menu module for multi-column navigation dropdowns.

How to Use the Mega Menu

The Pro Mega Menu module provides rich, multi-column dropdown navigation perfect for sites with complex navigation needs.

Step 1: Reset the Global Header (if needed)

1. Go to Settings → Website → Global Content
2. Find "Website Header" in the list
3. Click the Actions menu (⋮) and select Delete
4. Visit any page using the Scale Pro theme - the header will regenerate with the Mega Menu module

Step 2: Access the Header Global Content

1. Go to Settings → Website → Global Content
2. Click on "Website Header" to edit
3. Find the "Navigation Menu" module - it should now show mega menu options
4. Configure your menu items with dropdowns

Step 2: Configure Menu Items

Each menu item can be configured with three dropdown types:

Configuring a Mega Menu Dropdown

When you select "Mega Menu" as the dropdown type, you can configure:

Columns (1-4)

Each column includes:

• Column Title: Header text for the column (e.g., "By Use Case", "By Feature")
• Links: Up to 8 links per column, each with:
  • Label (link text)
  • Description (optional subtext)
  • URL destination

Featured Card (Optional)

Add a promotional card to your mega menu dropdown:

• Show Featured Card: Toggle to display
• Title: Card headline (e.g., "New: Pro Launch")
• Description: Brief description
• Link: Destination URL
• Link Text: CTA text (e.g., "Learn more →")

Example Configuration

Menu Item: "Solutions"
├── Dropdown Type: Mega Menu
├── Column 1: "By Use Case"
│   ├── SaaS Websites → /saas
│   ├── Services Websites → /services
│   └── Landing Pages → /landing
├── Column 2: "By Feature"
│   ├── Pricing Pages → /pricing
│   ├── Integrations → /integrations
│   └── Case Studies → /case-studies
└── Featured Card:
    ├── Title: "New: Scale Pro Launch"
    ├── Description: "See what's new"
    └── Link: "View changelog →" → /changelog

Mobile Behavior

On mobile devices, the mega menu automatically converts to an accordion-style navigation:

• Tap the parent item to expand/collapse
• Columns stack vertically
• Featured cards appear at the bottom
• Smooth animations for open/close

Styling Tips

• Keep column titles short and descriptive
• Limit to 3-4 columns for best visual balance
• Use the featured card for promotions, new releases, or important CTAs
• Add descriptions to links for better context
• Test on mobile to ensure smooth accordion behavior

Blog Features

Scale Pro enhances the blog experience with:

Table of Contents

Auto-generated ToC from H2/H3 headings. Configurable in Theme Settings.

Inline CTAs

Add newsletter or demo CTAs within blog posts. Choose variant in Theme Settings.

Related Posts

Configurable number of related posts (2-6) shown at the end of articles.

Animations

Scale Pro includes scroll-triggered animations:

• Fade: Elements fade in as they enter viewport
• Slide: Elements slide up from below
• Scale: Elements scale up from smaller size

Configure animation style and duration in Theme Settings. Respects user's reduced motion preferences.

Header

The global header includes:

• Logo: Editable logo with link to homepage
• Navigation: HubSpot menu with dropdown/mega menu support
• Language Switcher: Built-in multi-language support
• CTA Button: Configurable call-to-action
• Mobile Menu: Responsive hamburger menu

Header Styling Options

The header module includes styling options in the "Styles" tab:

• Background Color: Change the header background color with opacity support
• Link Color: Customize the navigation link color
• CTA Background Color: Set a custom CTA button background
• CTA Text Color: Set a custom CTA button text color
• Hide CTA Button: Option to hide the call-to-action button entirely
• Reset to Default: Toggle to restore all header styles to theme defaults

Footer

Three footer variants available in Theme Settings:

• Simple: Logo and horizontal links
• Multi-Column: Brand, menus, and social links
• Newsletter: Brand info with newsletter signup

Dynamic Copyright Year

The footer automatically displays the current year in the copyright text. You can configure:

• Use Dynamic Year: Enabled by default - automatically updates to current year
• Company Name: Your company name displayed in copyright
• Custom Copyright: If dynamic year is disabled, you can enter custom copyright text

Multi-Language Support

The header includes a built-in language switcher that automatically appears when your site has multiple language versions.

Setup Steps

1. Go to Settings → Website → Languages
2. Add additional languages for your site
3. Create translated versions of your pages
4. The language switcher appears automatically in the header

Frequently Asked Questions

How do I configure the mega menu?

The mega menu is built into the Scale Pro header. Go to Settings → Website → Global Content → Website Header, then click on the Navigation Menu module to configure your menu items with simple dropdowns or mega menu columns.

Can I use Scale Pro with HubSpot Free?

Yes! Scale Pro works with all HubSpot CMS tiers. Some features like site search require paid plans.

How do I add the pricing toggle?

Use the Pricing Toggle module from the module library. Add plans with monthly and annual prices.

How do I enable blog ToC?

Enable in Theme Settings → Blog → Enable Table of Contents. The ToC will auto-generate from H2/H3 headings.

Can I use transparent header?

Yes! Set Theme Settings → Header → Header Style to "Transparent" or "Blur".

Get Help

Need assistance with Scale Pro?