How to Create and Edit Modules in the HubSpot Design Manager

If your HubSpot pages or landing pages feel hard to manage, or you’re constantly cloning templates to fix formatting, you’re not alone. Many teams struggle to scale design across pages without breaking layouts or calling in developers for minor changes.

Modules in the HubSpot Design Manager solve this problem. Modules act as reusable, editable building blocks that combine consistent design with flexible content. When used correctly, they save time and reduce errors. 

This guide walks you through creating and editing modules, integrating them into content tools, and using them to build scalable marketing systems.

Building and Updating Custom Modules in HubSpot

HubSpot modules are custom-coded components that provide full control over layout and editable content without sacrificing usability. Each module contains defined fields, such as text, images, or toggles, that content editors can update directly in HubSpot’s visual editor. Developers manage the structure, while marketers control what displays, all without touching HTML.

To start, go to Marketing > Files and Templates > Design Tools in your HubSpot portal. You’ll find templates, themes, and your module library there.

Custom modules are typically stored in your active theme or a designated modules folder. This organization keeps them easy to update and maintain.

The real value of modules comes from separating logic from content. Developers write HTML, CSS, JavaScript, and HubL, while marketers fill in the fields. This approach maintains brand consistency and speeds up content rollout.

Modules integrate seamlessly with HubSpot’s drag-and-drop interface, making them ideal for teams that need repeatability without sacrificing flexibility.

How It Works Under the Hood

Understanding module anatomy helps you design efficiently. A typical HubSpot module has three key components:

1. Fields Definition (module.json)
   This JSON file defines all editable fields, including name, input type, default values, repeatability, and validation rules.
2. HTML + HubL Markup
   Render content using HubL tags (like {{ module.title }}) and apply conditions or loops for dynamic content.
3. CSS and JavaScript Files
   Optional scoped files control module styles and behavior, ensuring consistency wherever the module is used.

Common Field Types:

• Text: Headlines, paragraphs, captions
• Image: Photos, logos, layout elements
• URL: CTAs or reference links
• Boolean: On/off switches
• Rich Text: Formatted content blocks
• Choice/Select: Layout variations or design themes

After publishing, HubSpot renders the final output, respecting responsive behavior. You can also add visibility rules or conditional styling so modules adapt to context or device type. 

Developers can use the HubSpot CLI to sync files, version them with Git, and test locally before pushing live.

Main Uses Inside HubSpot

Reusable Content Structures

Modules save time and reduce errors by standardizing layouts such as testimonial blocks or service cards.

Example:
Create a “Team Member Card” with fields for name, photo, title, and LinkedIn profile. Editors update content without developer support or formatting issues.

Dynamic Landing Page Sections

Modules accelerate page creation while maintaining professionalism.

Example:
A marketer builds a product launch page by dragging in prebuilt modules: hero banner, event schedule, partner logos, and copy. Every section adheres to brand style guidelines and responsive design principles.

Interactive or Conditional Elements

Modules can support dynamic features while remaining editable.

Example:
A pricing calculator module with editable numeric fields and checkboxes lets marketers adjust plan options without coding. JavaScript in the module handles calculations automatically.

Common Setup Errors and Wrong Assumptions

Error 1: Nesting Modules Improperly
Modules nested incorrectly can cause styling issues and limited field access.
Fix: Use repeatable groups within a module instead of nesting entire modules.

Error 2: Forgetting Default Field Values
Empty fields may create awkward spacing or layout breaks.
Fix: Always set default values in module.json.

Error 3: Ignoring Responsive Design
Modules may look fine on desktop but break on mobile.
Fix: Use responsive units like rem, %, vw, and vh, and test with HubSpot previews.

Error 4: Editing System Modules Directly
Modifying core HubSpot modules can break future compatibility.
Fix: Clone system modules and save versions in your theme folder.

Step-by-Step Setup or Use Guide

Ensure you have admin access and are on CMS Hub or Marketing Hub Professional/Enterprise. For local development, set up HubSpot CLI.

Steps:

1. Go to Marketing > Files and Templates > Design Tools
2. Click File > New File and choose Module. Name it and store it in your theme or /modules/ folder
3. Define module fields (text, image, boolean, choice) in the right-side panel
4. Add HTML + HubL markup using {{ module.field_name }}
5. Include scoped CSS or JavaScript for styling and behavior
6. Click Publish Changes
7. Insert and configure the module in a page or template using drag-and-drop
8. Test responsiveness and functionality across screen sizes

For local development, run hs fetch to sync files, edit in your IDE, and push changes with hs upload.

Measuring Results in HubSpot

Modules influence content performance, so tracking is essential.

Analytics to Monitor:

• Engagement: Track clicks and submissions inside modules
• Conversions: Tie form activity to contacts or deals
• Page Metrics: Track time-on-page and bounce rate
• A/B Testing: Compare module layout variations for conversions

Checklist:

• Are modules loading quickly?
• Are scripts or tracking codes firing correctly?
• Can marketing teams use the modules confidently?

Consistent module design and easy updates reduce errors and improve campaign outcomes.

Short Example That Ties It Together

A RevOps team needs a uniform case study layout across multiple landing pages. The developer builds a custom “Case Study Module” with repeatable groups for hero image, client logo, challenge summary, results, and CTA.

The marketing team uses the module across 15 pages, updating content as needed. Analytics show higher form submissions and CTA clicks, faster publication, and brand consistency, all without having to repeatedly edit the layout.

How INSIDEA Helps

INSIDEA helps teams create scalable, maintainable HubSpot modules. Our services include:

• HubSpot Onboarding: Set up themes, modules, and permissions
• Custom Module Creation: Build reusable blocks for developers and marketers
• Design Manager Maintenance: Clean outdated files, enforce naming conventions
• Workflow and Automation Integration: Connect modules to CRM, smart rules, or workflows
• Data-Driven Optimization: Align module design with analytics

To streamline HubSpot module management and save developers time, hire our HubSpot experts at INSIDEA.

Modules let your team move faster, maintain brand consistency, and scale content without roadblocks. Start with one, build a system, and expand confidently.