How Do HubSpot Content Hub Custom Modules and Reusable Components Work?

One of the most powerful features of HubSpot Content Hub s the ability to create custom modules. Custom modules allow developers to build reusable content blocks that editors can easily add to pages without writing code.

These modules help standardize design elements and make page building faster and more consistent.

Understanding how HubSpot Content Hub custom modules and reusable components work helps teams build scalable websites that are easy for marketers and content editors to manage.

What Is a Custom Module in HubSpot Content Hub?

A custom module is a reusable content component that can be added to pages using the HubSpot page editor.

Modules can include combinations of:

• Text
• Images
• Buttons
• Icons
• Layout structures
• Interactive elements

Once created, modules can be reused across multiple pages.

Why Custom Modules Are Important

Custom modules help simplify website editing for non-technical users.

Instead of building layouts manually, editors can simply drag modules into the page and update the content fields.

Benefits of custom modules include:

• Consistent design across pages
• Faster page creation
• Reduced need for developer involvement
• Easier content management

This approach helps marketing teams maintain the website more independently.

Creating a Custom Module

Developers typically create custom modules using the HubSpot Design Manager.

To create a module:

• Open Content → Design Manager
• Click Create → Module
• Define module fields such as text, images, or links
• Add HTML, CSS, and HubL code if needed
• Save and publish the module

Once published, the module becomes available inside the page editor.

Module Fields

Custom modules include fields that allow editors to control the content displayed inside the module.

Common field types include:

• Text fields
• Rich text editors
• Image selectors
• Link fields
• Color pickers
• Repeater fields for lists

These fields allow editors to customize the content without modifying the module structure.

Using Modules in the Page Editor

Once a custom module is created, it appears in the module library inside the page editor.

Editors can:

• Drag the module onto a page
• Fill in the content fields
• Rearrange modules within sections
• Duplicate modules if needed

This makes page creation flexible and efficient.

Reusable Components Across Pages

Because modules are reusable, the same component can be used across many pages.

For example:

• A feature grid module may appear on multiple service pages
• A testimonial module may appear on multiple service pages
• A call-to-action module may appear throughout the website

This consistency helps maintain a unified design system.

Global Modules vs Regular Modules

Some modules can be set as global modules.

Global modules are shared across multiple pages, and updating them once updates every instance.

Examples of global modules include:

• Website header
• Footer sections
• Announcement bars

This helps manage important elements centrally.

Key Takeaway

HubSpot Content Hub custom modules allow developers to create reusable components that editors can easily add to pages. By using modular design systems, businesses can maintain consistent layouts while making it easier for teams to manage website content.