Generator Onboarding

Setting Up ScrollSpy Table of Contents

droma@driveagency.co (Dave Roma) — Thu, 14 May 2026 15:49:59 GMT

Overview

The Generator theme's Scroll Spy TOC blog post template includes a sidebar with a table of contents that builds itself automatically based on your header structure. When you first load the template, the sidebar appears empty — this is expected. The table of contents populates once you've added content and configured the ScrollSpy module.

How to Set Up a Blog Post Template in HubSpot

droma@driveagency.co (Dave Roma) — Thu, 14 May 2026 15:41:46 GMT

Access Blog Template Settings

Navigate to Settings by clicking the gear icon in the top right of your HubSpot account. In the left-hand panel, scroll down to the Content section and click Blog. Once there, click the Templates tab — this is where you manage both your blog post and blog listing templates.

How to Edit HubSpot Blog Listing Templates

droma@driveagency.co (Dave Roma) — Thu, 14 May 2026 15:28:54 GMT

Navigating to the Blog Listing Template

After setting up your blog listing template in HubSpot settings, you'll be taken to the Blog Listing Pages section automatically. If you need to return to it later, navigate to Content > Blog — this shows your blog posts. To reach the blog listing template editor, click the Configure button, then select Blog Listing Pages.

Blog Listing Template Setup

droma@driveagency.co (Dave Roma) — Thu, 14 May 2026 15:18:27 GMT

Access Your Blog Settings

Navigate to your HubSpot portal and click the gear icon in the top right corner to open Settings. In the left-hand panel, scroll all the way to the bottom and click Blog under the Content section.

Understanding Modules in Generator

droma@driveagency.co (Dave Roma) — Wed, 13 May 2026 23:57:31 GMT

What Are Modules?

Modules are the building blocks of every page in the Generator theme. In a drag-and-drop system like Generator, virtually everything visible on a page — from text blocks to tabbed content — is a module. Generator includes approximately 40–41 modules, each with unique functionality and styling options.

Column Styling Tips

droma@driveagency.co (Dave Roma) — Wed, 13 May 2026 23:46:10 GMT

Understanding the Section > Column > Module Structure

In the Generator theme, your page layout follows a clear hierarchy: Sections contain Columns, and Columns contain Modules (like image or text modules). Most styling happens at the section level, but columns have their own settings you'll use regularly — especially for spacing and visibility.

How to Style HubSpot Sections

droma@driveagency.co (Dave Roma) — Wed, 13 May 2026 22:09:10 GMT

Accessing Section Styles

To style a section, hover over it and click the pencil icon. This opens the style panel for that section.

Intro to Sections and Generator's Pre-Built Sections Library

droma@driveagency.co (Dave Roma) — Wed, 13 May 2026 21:58:16 GMT

Understanding the Page Structure

Before working with sections, it helps to know how pages are built in the Generator theme. Pages are made up of three nested layers: sections contain columns, and columns contain modules. For example, an image module and a rich-text module might sit side by side inside a column, which lives inside a section. This hierarchy is what makes Generator a true drag-and-drop theme.

Set Up Scroll Navigation in Generator Header

droma@driveagency.co (Dave Roma) — Wed, 13 May 2026 21:47:40 GMT

Overview

Generator includes built-in scroll-to functionality that allows header navigation items to smoothly scroll users to specific sections on a page — ideal for landing pages. This works with two headers: the Global Standard Header (not the Mega Menu) and the Landing Page Header (local module).

How To Create a Mega Menu for your HubSpot Site using Generator

droma@driveagency.co (Dave Roma) — Wed, 13 May 2026 21:34:41 GMT

Enable the Mega Menu in Global Theme Settings

By default, Generator uses the standard menu. To switch to the mega menu, go to Edit Theme, then click More Settings. Navigate to the Mega Menu section and toggle it on. Click Publish Theme in the top right corner to save the change.