View Preview →

Dynamic Page Header

HubSpot Module — Setup & Usage Guide

1. Module Location

The Dynamic Page Header module is saved in the Design Manager, under Content.

Path: Manage → Content → Design Manager

Navigating to the module in Design Manager
Locate the module in Design Manager

2. How to Use the Module

Step 1 — Find the module

Click the + icon in the page editor to open Add modules, then search for the module name “Dynamic Page Header.”

Searching for the module in Add modules
Search “Dynamic Page Header” in the module picker

Step 2 — Add it to the page

Drag the module from the search results panel onto the desired section of the page.

Dragging the module onto the page
Drag the module onto the page canvas

Step 3 — Edit the content

Open the module's Content tab. Content is organized into three collapsible groups: Breadcrumb, Header Content, and Header Stats.

Content tab with Breadcrumb, Header Content and Header Stats groups
Content tab — three content groups

Breadcrumb

Use the Show Breadcrumb toggle to show or hide the breadcrumb trail. When enabled, the Parent Breadcrumbs list appears — add one item per parent page, each with a Label and a URL.

Breadcrumb group with Parent Breadcrumbs label and URL fields
Breadcrumb — Show toggle and Parent Breadcrumbs items

With Auto Append Current Page enabled, the page's own name is added automatically at the end of the trail.

Header Content

Set the page Heading and the Description paragraph shown under it.

Header Stats

Use the Show Statistics toggle to show or hide the stats row. When enabled, the Statistics list appears — add one item per stat, each with a Value (e.g. “180+”) and a Label (e.g. “Team members”).

Header Stats group with Statistics value and label fields
Header Stats — Show toggle and Statistics items

Step 4 — Customize the styling

Switch to the Styles tab to adjust the module's appearance. Styling is organized into two collapsible groups: Section Background and Typography.

Section Background

Set the background color, the Dot Pattern color (the dotted texture behind the content), the Bottom Border color, and the Top / Bottom Spacing (in px, 0–200) around the section.

Section Background settings
Section Background settings

Typography

Control font family, size, weight, and color independently for the Breadcrumb, Heading, Body (description), Stat Value, and Stat Label text. The Accent Color styles hovered breadcrumb links and the current page's name.

Typography settings
Typography settings

3. Quick Reference

Trusted by manufacturers in
Aerospace Defense Medical Energy Automotive

Ready to scope your next production run?

Talk to Our Team