Generator includes a blog post template designed for long-form content. It features a Scroll Spy Table of Contents module that automatically scans your headings, builds navigation links, highlights the active section as readers scroll, and provides smooth scrolling to each section.
This guide walks you through how to use and customize it.
Before creating a post, first verify that your HubSpot blog is using the correct template:
Click the gear icon in HubSpot’s top navigation.
Go to Content → Blog.
Select the blog you want to edit.
In the Templates tab, check the Blog Post Template section.
Make sure the Scroll Spy Table of Contents template from Generator is selected.
If not, click Actions → Change template to switch to it.
Click Create in your HubSpot blog.
Choose the blog you want to publish to (e.g. your documentation blog).
HubSpot will load the editor with the Scroll Spy template already active.
You’ll see a blank post with an empty sidebar where the Table of Contents will appear once headings are detected.
Add your post title and paste or write your content inside the editor.
The Scroll Spy system relies on heading tags. For best results:
Use H3 for main section headings
Use H4 for subsections
Keep heading hierarchy consistent throughout your post
Images, videos, and other rich content will work normally alongside these headings.
Click the Table of Contents module in the sidebar.
In the Content tab, choose which headings should appear in the Table of Contents.
Recommended settings based on your content structure:
Header target: H3
Subheader target: H4
Click Apply changes, and the module will automatically rebuild the navigation based on your headings.
No manual linking is required.
Open the Styles tab to adjust:
Typography for menu items and hover states
Background color and opacity
Corner radius (e.g. 12px for a soft card-like feel)
Sidebar width and spacing
Internal padding (often 30px works well with a background color)
Borders (set to none if you want a clean, modern panel)
All visual styles can be adjusted to align with your brand.
Click Preview to see the Scroll Spy functionality in action:
The Table of Contents panel becomes sticky, staying visible as the reader scrolls.
The active section is highlighted as the user moves through the content.
Clicking any TOC item smooth scrolls the page to that section.
If the TOC doesn’t appear immediately, save and refresh — the module reads content on load.
The Scroll Spy Table of Contents template makes long-form content easier to navigate by automatically building structured navigation from your headings. Add your content, set which headings to track, customize the design, and HubSpot handles the rest. It’s one of Generator’s most popular templates for documentation, guides, and in-depth blog posts.
If you'd like, I can also generate the SEO title and meta description for this post.