If you’ve ever updated the same CTA, disclaimer, or form styling across multiple HubSpot pages, you’ve likely seen how quickly things fall out of sync.
A single headline tweak can turn into dozens of manual edits. Small inconsistencies creep in. Links point to old URLs. Styling drifts between pages that were meant to look identical.
Over time, this creates more than inconvenience. It introduces errors, slows publishing, and makes your CMS harder to maintain as teams grow. Pages that should feel connected start to look pieced together.
HubSpot’s common modules exist to prevent that problem. They allow you to define a section once and reuse it across pages, templates, and layouts. When updates are needed, you change the module itself, not every page that contains it.
This guide explains how common modules work in HubSpot Pages, how to build and use them correctly, where teams go wrong, and how to track their impact.
It also covers how INSIDEA supports teams building modular CMS structures that scale without constant cleanup.
Create Reusable Content Blocks Using HubSpot Common Modules
In HubSpot, common modules are reusable content components created in the Design Manager. Once built, they can be inserted into landing pages, website pages, and blog templates through the page editor.
When a module is marked as global, all instances of that module reference the same source. Any update made to the module applies everywhere it is used.
Common modules are often used for:
- Headers and footers
- Promotional banners
- Reusable CTAs
- Form sections
- Contact blocks
- Legal disclaimers
- Related content sections
Instead of copying content across pages, teams reuse the same module instance. This reduces duplication and keeps content aligned across the site.
Common modules are available in CMS Hub Professional and Enterprise and are managed through Design Tools. Developers or CMS managers create the modules. Editors use them without touching code.
How Common Modules Work Under the Hood
HubSpot’s module system is built around structured files and editable fields. Each module is a self-contained unit with defined inputs and output behavior.
Inside a module, you define:
- Editable fields such as text, images, links, or toggles
- Layout structure using HTML and HubL
- Styling that pulls from the active theme
- Optional logic, such as conditional display or smart content
When a module is set as global, HubSpot treats it as a single reference point. Every page using that module points back to the same source file.
What Goes In
- Field definitions (text, image, link, rich text)
- Theme-based CSS rules
- Optional logic or visibility conditions
What Comes Out
- Compiled HTML, CSS, and HubL
- Identical rendering across all placements
- Instant updates across all pages when edited
HubSpot also allows partial flexibility:
- Some fields can stay editable per page
- Core layout structure can remain locked
- Theme styles can be applied consistently across modules
This structure keeps content centralized while allowing controlled variation when needed.
Main Uses Inside HubSpot
Consistent Headers and Footers
Headers and footers are prime candidates for global modules. Navigation links, logos, legal links, and contact information should not vary from page to page.
Example
A site uses a global header module containing the main navigation and a “Contact” link. When the link URL changes, updating the header module once updates every page using it. No individual page edits are required.
Reusable CTAs and Promotional Sections
Campaign-driven CTAs often appear across multiple pages. Without common modules, each instance becomes a separate update point.
Example
A team runs a quarterly campaign using a banner CTA. The banner module includes fields for headline, button text, and destination URL.
When the campaign changes, the module is updated once and reflected across all pages using it.
Shared Form or Contact Blocks
Forms reused across pages should stay aligned, especially when compliance or copy changes occur.
Example
A newsletter signup form appears on five pages. The privacy text has been updated in the module. All instances update at once, avoiding mismatched copies or outdated language.
Standardized Blog and Resource Layouts
Common modules help maintain consistency across blogs, case studies, and resource pages.
Example
A “Related Articles” module pulls content dynamically. Editors update the data source, not the layout. The section remains consistent across all blog templates.
Common Setup Errors and Wrong Assumptions
Point: Treating every module as page-specific
Result: Updates require repeated edits and manual tracking.
Fix: Use global modules for any content that should stay aligned across pages.
Point: Editing global modules without checking scope
Result: Unexpected site-wide changes.
Fix: Confirm whether edits should apply globally or locally when prompted.
Point: Locking too many fields
Result: Editors become dependent on developers for small changes.
Fix: Lock layout-critical elements but allow flexibility for non-structural fields.
Point: Ignoring theme dependencies
Result: Modules break when shared CSS or JS files change.
Fix: Track module dependencies and maintain clear theme versioning.
Step-by-Step Setup or Use Guide
Before starting, confirm you have access to Design Tools and permission to manage themes or modules.
Step 1: Open Design Tools
Navigate to Marketing > Files and Templates > Design Tools.
Step 2: Select or Create a Theme
Open the active theme used by your site.
Step 3: Add a New Module
Click File > New File, choose “Module,” and save it in your theme folder. Use a clear name such as “Global Promo Banner” or “Footer Contact Block.”
Step 4: Define Module Fields
Add required fields such as text, images, links, and toggles. Group fields logically to make editing easier.
Step 5: Design and Style the Module
Build the layout using HTML and HubL variables like {{ module.headline }}. Apply styling through your theme CSS or scoped styles.
Step 6: Mark as Global (If Needed)
Enable the global setting to update everywhere at once.
Step 7: Publish the Module
Publish changes so the module becomes available in page editors.
Step 8: Insert the Module into Pages
Open a page in the editor, search for the module by name, and add it to the layout.
Step 9: Edit Content Carefully
When editing a global module, confirm whether changes should apply everywhere or only to the current page.
Step 10: Review and Test
Preview pages on desktop and mobile. Check links, spacing, and content accuracy before publishing.
Measuring Results in HubSpot
Tracking common module performance helps validate reuse decisions.
For CTAs
- Track clicks using HubSpot CTA reporting
- Compare performance before and after copy updates
For Forms
- Review submission data in the Forms dashboard
- Compare conversion rates across pages using the same module
For Content Sections
- Use time-on-page and scroll depth metrics
- Add event tracking for interaction-heavy modules
Tracking Checklist
- Use consistent naming conventions
- Include trackable links in shared modules
- Record update dates for global modules
- Review performance trends after major edits
Short Example That Ties It Together
A marketing team runs a “Start Free Trial” CTA across 30 product pages. Each page originally used a separate button with different styling and URLs.
The team replaces those buttons with a single global CTA module containing structured fields and consistent styling. When messaging changes in the next quarter, the module is updated once.
CTA reporting shows improved click consistency across pages. The team avoids dozens of manual edits and reduces errors.
How INSIDEA Helps
Common modules only deliver value when they’re properly planned, structured, and governed.
Without a clear modular system, teams end up with duplicated components, broken dependencies, and inconsistent updates across HubSpot pages.
INSIDEA works with teams to design scalable CMS frameworks that reduce manual edits and protect layout consistency as your site grows.
Our support includes:
- HubSpot onboarding to set up reusable modules, themes, and layout standards from the start
- CMS management to maintain and evolve global modules without disrupting live pages
- Workflow alignment so content updates inside common modules connect cleanly with campaigns
- Reporting configuration to track performance tied to shared CTAs, forms, and content blocks
- Theme and module customization to ensure reusable components stay visually consistent
If your team is struggling with repeated edits, fragmented layouts, or hard-to-maintain pages, hire our HubSpot experts to help you design a modular CMS structure that scales.
Our HubSpot consulting services focus on long-term maintainability, not quick fixes.
Visit INSIDEA to discuss how we can help you build once, reuse everywhere, and track what actually performs.
