Key Takeaways
HubSpot modules bridge the gap between marketing agility and development control—letting non-technical marketers build pages while developers maintain design systems and brand consistency.
The traditional web development workflow creates friction: marketers need to make quick content changes, but developers are busy with other projects. HubSpot modules solve this problem by separating structure from content. At Boundev, we've built 200+ HubSpot websites, and understanding the three module types is fundamental to creating efficient, marketer-friendly sites.
Why Module-Based Design Matters
Traditional CMS platforms force a choice: either give marketers full code access (risky) or make them dependent on developers for every change (slow). HubSpot's module system offers a third path.
The Traditional Problem
Marketing teams need to update hero images, swap out CTAs, add testimonials, and launch time-sensitive campaigns. Waiting days for developer availability kills momentum and frustrates both teams.
The Module-Based Solution
Developers build modules once, defining fields marketers can edit and constraints that maintain design integrity. Marketers then have full autonomy within those parameters.
The 3 Types of HubSpot Modules
HubSpot's module system provides three distinct types, each serving different needs. When working with development teams, understanding when to use each type is crucial.
Standard Modules
Standard modules are pre-built components included with HubSpot CMS. They cover common web elements—text, images, forms, CTAs, videos—that marketers can drag onto pages and configure without coding.
Common Standard Modules:
Marketer Benefit: Standard modules require zero technical knowledge. Marketers use the page editor interface to drag, drop, and configure—building pages as easily as creating PowerPoint slides.
Custom Modules
Custom modules are developer-created components built with HTML, CSS, JavaScript, and HubL (HubSpot's templating language). They provide functionality that standard modules don't offer—product showcases, testimonial sliders, pricing tables, custom calculators.
Popular Custom Module Examples:
What Developers Define in Custom Modules:
Need Custom HubSpot Module Development?
Boundev's HubSpot developers build custom modules, migrate content, and train marketing teams. We create component libraries that give marketers autonomy while maintaining brand standards.
Start Your ProjectCustom Module Field Types Explained
When our React developers build custom modules, they configure five primary field types that marketers interact with in the content editor.
Text Field
Single-line text for headers, button labels, or short copy. Ideal for consistent formatting without rich text complexity.
Image Field
Single image container with sizing options, default images, and alt text parameters for SEO and accessibility.
Rich Text Field
Multi-line WYSIWYG editor supporting formatting, CTAs, images, and links. Perfect for body content and descriptions.
Boolean Field
On/off checkbox that toggles visibility of module sections. Use for optional elements like background images or overlays.
Choice Field
Radio buttons or dropdown menus for predefined options. Example: color schemes, layout variants, or column counts.
Global Modules
Global modules are reusable components that appear identically across multiple pages. When you edit a global module, the change propagates to every page where it's used—perfect for headers, footers, and consistent branding elements.
Common Uses for Global Modules:
Key Advantage: Update your site header once, and it changes across 100+ pages instantly. No need to edit each page individually or manage duplicate content.
Marketer Workflows: Editing Modules
Understanding how marketers interact with modules helps developers build better components. When our Node.js developers create HubSpot integrations, we optimize for marketer workflows.
1Page Editor (Visual Mode)
The page editor shows a visual preview of the page. Marketers click any module to open an editing panel, make changes, and see updates in real-time before publishing.
2Modules Panel (Drag-and-Drop)
The modules panel lists all available standard and custom modules. Marketers drag modules onto drag zones defined by developers in the template.
3Content Settings Panel
Each module opens a settings panel displaying the fields developers configured. Marketers populate text, upload images, toggle booleans, and select choices here.
4Preview and Publish
After editing, marketers preview changes across device breakpoints (desktop, tablet, mobile) before publishing to ensure responsive behavior.
Developer Best Practices for Module Creation
Design for Marketers, Not Developers
The goal is marketer autonomy. If marketers constantly need developer help to use a module, it's poorly designed. Think of modules as tools for non-technical users.
Build Flexible, Reusable Components
Create modules that work in multiple contexts rather than building one-off solutions for specific pages. Reusability reduces maintenance and gives marketers more building blocks.
Enforce Brand Consistency Through Constraints
Modules should prevent brand violations while giving marketers creative freedom. Use technical constraints to maintain design quality.
Module Types Comparison
| Feature | Standard Modules | Custom Modules | Global Modules |
|---|---|---|---|
| Development Required | No—built-in | Yes—HTML/CSS/JS/HubL | Can be either |
| Marketer Usability | Very easy—drag-and-drop | Easy—edit defined fields | Easy—one edit updates all |
| Flexibility | Limited to built-in options | Unlimited—custom code | Depends on module type |
| Use Case | Common elements (text, images, CTAs) | Unique functionality (sliders, tabs, FAQs) | Repeated elements (headers, footers) |
| Update Scope | Page-specific | Page-specific | Site-wide |
| Best For | Quick pages, simple layouts | Brand-specific components | Consistent navigation, branding |
FAQ
Can marketers create HubSpot modules without coding?
Marketers can use standard modules without any coding knowledge through drag-and-drop. However, creating custom modules requires HTML, CSS, JavaScript, and HubL skills. Developers build custom modules once, then marketers edit the content fields without touching code.
What's the difference between custom modules and global modules?
Custom modules refer to developer-coded components (vs. standard pre-built modules). Global modules refer to how the module is used—appearing consistently across multiple pages. A module can be both custom AND global (like a custom-coded header used site-wide), or standard and global (like a standard text module used as a footer).
How do I make a module available across all templates?
Save the module as a global module when creating or editing it in Design Manager. Global modules can then be added to any template or page. When you edit a global module's content, the changes propagate to every instance across your website automatically.
What field types are available in HubSpot custom modules?
HubSpot supports multiple field types: Text (single-line), Rich Text (WYSIWYG editor), Image (with sizing options), Boolean (on/off checkbox), Choice (dropdown or radio buttons), URL, Number, Color, Date, File, CTA, Form, Menu, Email, Blog, and more. Developers select appropriate field types when building custom modules.
Can I convert a standard module into a custom module?
No, standard modules are pre-built by HubSpot and cannot be converted or modified. If you need custom functionality, you must create a new custom module from scratch using HubSpot's Design Manager. However, you can often replicate standard module functionality in custom modules with additional features.
How do repeater groups work in HubSpot modules?
Repeater groups let marketers add multiple instances of a field set within a single module. For example, a team member module might have a repeater group with fields for name, photo, and bio. Marketers can add 5 team members or 50—the module dynamically renders however many are added. This eliminates creating separate modules for each item.