How to Create Global Modules in HubSpot CMS | Developer Tutorial

If you’ve ever worked on a website in HubSpot CMS, you know how repetitive things can get. Updating the same header, footer, or CTA across multiple pages is not fun.

That’s where Global Modules come in.

In this guide, I’ll walk you through how to create global modules in HubSpot CMS in a simple and practical way—no complicated jargon, just what you actually need.

What is a Global Module?

A Global Module in HubSpot is a reusable component that stays consistent across multiple pages.

👉 When you update it once, the changes automatically reflect everywhere.

Common examples:

• Header / Navigation
• Footer
• Call-to-action sections
• Announcement bars
• Testimonials block

This saves time and keeps your website consistent.

Why You Should Use Global Modules

Before jumping into the steps, here’s why they matter:

• Save time – No need to edit each page manually
• Consistency – Same design everywhere
• Easy updates – One change = site-wide update
• Better maintenance – Cleaner structure for developers

Step-by-Step: Create a Global Module in HubSpot

Before jumping into the steps, here’s why they matter:

• Save time – No need to edit each page manually
• Consistency – Same design everywhere
• Easy updates – One change = site-wide update
• Better maintenance – Cleaner structure for developers

Step 2: Create a New Module

1. In the left sidebar, click File → New file
2. Choose Module
3. Give it a name (example: global-header or site-footer)
4. Select where you want to save it
5. Click Create

Step 3: Convert It to a Global Module

At the top of the module editor:

• Toggle the option “Make this module global”

That’s it — now it becomes a global module.

Step 4: Add Fields to Your Module

Now you define what can be edited inside this module.

Examples:

• Logo (image field)
• Menu (menu field)
• Text (rich text)
• Buttons (CTA)

Just drag and add fields from the right panel.

Step 5: Write the Markup (HTML + HubL)

Here’s a simple example:

You can style it using CSS inside the module.

Step 6: Use the Global Module in a Template

Now go to your template:

1. Open your page template
2. Drag your module into the layout
3. Publish the template

Now your global module is live 🎉

How to Edit a Global Module

This is the best part.

When you want to update it:

1. Open any page using that module
2. Click on the module
3. Click “Edit global content”
4. Make changes and publish

Changes will apply across all pages instantly.

Best Practices (Important)

To keep things clean and scalable, follow these:

1. Use Clear Naming

Bad: module1
Good: global-footer, global-header

2. Don’t Overload Modules

Keep each module focused on one purpose.

3. Use CSS Classes Properly

Follow a structure like BEM if possible:

.header {}
.header__logo {}
.header__menu {}

4. Test Before Publishing

Since it affects all pages, always double-check changes.

Common Mistakes to Avoid

• Editing global modules without checking impact
• Adding too many fields (makes it confusing)
• Not using global modules for repeated sections
• Breaking layout due to CSS conflicts

When NOT to Use Global Modules

Avoid global modules when:

• Content needs to be different on each page
• You want page-specific customization
• A/B testing different designs

Final Thoughts

Global modules are one of the most powerful features in HubSpot CMS for developers.

Once you start using them:

• Your workflow becomes faster
• Your site becomes easier to manage
• And updates become stress-free

If you’re building any serious website on HubSpot, this is something you should absolutely use.