If your HubSpot pages feel clunky, inconsistent, or outdated, the issue often sits in your template setup inside the Design Manager.
When CMS templates fail to match your brand or adapt as your site grows, campaigns slow down, and teams resort to short-term fixes that create long-term issues.
Many teams struggle with HubSpot’s default themes. Once custom styling or layout adjustments are needed, developers and marketers often bounce between external code editors and HubSpot’s interface.
The underlying problem is a Design Manager setup that does not align with your site structure or marketing workflow.
In this guide, you will learn how to take control of the Design Manager settings inside HubSpot CMS.
You will see where configurations live, what each setting does, how to organize templates cleanly, and how to track performance using HubSpot’s reporting tools.
Understanding the HubSpot Design Manager Architecture
HubSpot’s Design Manager is the workspace for managing the design logic that powers your templates and themes.
It is where layout files, CSS, modules, and HubL code come together to define what editors see on the frontend.
You can access Design Manager by navigating to Marketing > Files and Templates > Design Tools inside your HubSpot portal.
From there, you will see a structured file system that includes layouts, reusable partials, module code, and global theme files.
Every edit made here is reflected directly in the content editor.
When you add a custom module field, such as a dropdown for color selection or a layout toggle, that option appears inside the editor for content creators.
On CMS Hub Enterprise, the feature set expands further.
You can connect HubDB for dynamic data, use serverless functions, and manage themes through Git-based version control for larger teams.
How It Works Under the Hood
Design Manager operates as a live-connected file system that controls how pages and emails are built.
Templates, modules, and theme files act as the blueprint that the HubSpot CMS follows.
Inputs: Code files including HTML, HubL, CSS, and JavaScript, along with images and interactive module fields.
Outputs: Reusable templates, visual editors, and styling rules that marketers can use without developer involvement.
Version history allows you to roll back changes, while the HubSpot CLI supports local development for engineering teams.
Several configuration areas carry the most impact.
Module Fields: Define what editors can change, such as images, background colors, text, and toggles.
Theme Fields: Set brand-wide variables for fonts, spacing, and colors that stay consistent across pages.
Global Partials: Control shared sections like headers and footers. Editing a single file updates every page that uses it.
File Structure: Keeps your portal scalable by separating themes, modules, templates, and assets into clear folders.
When configured properly, editors gain flexibility while layouts stay protected from accidental breakage.
Main Uses Inside HubSpot
Creating Custom Page Templates
Design Manager allows teams to create templates that can be reused across campaigns without starting from scratch.
For example, a developer can build a reusable case study template with editable modules for hero images, testimonials, and calls to action.
Once published, the template appears under Website > Website Pages, where marketers can launch new pages without technical help.
This structure saves time and keeps design consistent across the site.
Building Modular Themes for Consistency
Modular themes bundle templates, styling files, and brand settings into one foundation.
Fonts, colors, and spacing defined in the theme’s configuration files appear in the Theme Editor for all pages.
When brand updates occur, changes made once inside Design Manager apply everywhere.
This setup reduces manual restyling and keeps branding consistent as content scales.
Connecting Dynamic Content Using HubDB
HubDB allows non-technical teams to manage data that feeds directly into templates.
A common use case includes event listings managed in a HubDB table with dates, titles, and links.
A custom module pulls that data into a landing page automatically as new rows are added.
This approach works well for event calendars, team directories, and resource libraries.
Common Setup Errors and Wrong Assumptions
Point: Editing Templates That Are Already Live on Your Site
Explanation: Changes affect every page using the template. Clone the template before making updates and reassign it where needed.
Point: Dumping All Files Into the Root Folder
Explanation: Disorganized file trees slow updates and create confusion. Use folders by theme or function.
Point: Hardcoding Headers and Footers in Each Template
Explanation: This creates inconsistencies and maintenance issues. Use global partials instead.
Point: Skipping Field Defaults in Modules or Themes
Explanation: Without defaults, editors end up applying inconsistent styles. Defaults keep edits aligned with your system.
These mistakes create avoidable delays and layout issues over time.
Step-by-Step Setup or Use Guide
- Go to Marketing > Files and Templates > Design Tools
This opens the main interface for managing design assets. - Locate or Create Your Theme Folder
Organize files by brand or project. You can start from a starter theme or build from scratch. - Open or Create a New Template
Right-click the theme folder, select New File > Template, and choose the template type. - Drag in Modules Needed for the Layout
Add existing modules or create new ones. Save and preview frequently. - Configure Custom Module Fields
Define toggles, selectors, and upload fields with clear labels. - Add Brand-Level Settings
Define typography, spacing, and color options inside your theme configuration files. - Insert Global Partials for Reusable Areas
Create partials for shared sections and insert them using partial references. - Preview Everything in Context
Test layouts on desktop and mobile to confirm editor behavior. - Publish and Assign the Template
Publish once the template matches your design system and assign it to live pages.
Measuring Results in HubSpot
After deployment, results should be tracked beyond conversions.
Review usability, consistency, and editor adoption.
Page Performance Reports: Track engagement metrics, including time on page and CTA clicks.
Asset Usage Reports: See which templates and modules are actively used.
Design Tools Activity Logs: Review change history for accountability.
Project Task Completion: Monitor build progress when themes are part of larger initiatives.
A regular checklist helps surface issues early.
Check load times after styling updates.
Confirm module defaults align with brand standards.
Collect editor feedback on usability.
Verify mobile responsiveness across devices.
Monitor form submissions and lead activity after rollout.
Short Example That Ties It Together
A SaaS company running multiple acquisition pages needed layout consistency without slowing content launches.
A reusable lead page template was built with modules for hero sections, offer highlights, and forms.
Each module pulled approved fonts and colors from the theme settings.
Marketers selected the template, entered copy, and published quickly.
Reporting showed improved conversion rates tied to consistent layouts and clear calls to action.
How INSIDEA Helps
INSIDEA supports teams working inside HubSpot CMS by building scalable template systems that remain clean as portals grow.
Support covers onboarding, CMS structure, modular theme builds, and reporting alignment.
Teams looking to simplify Design Manager setups or clean up existing CMS environments can hire our HubSpot experts through INSIDEA for structured, maintainable solutions.
Well-organized Design Manager settings support faster publishing, consistent branding, and smoother collaboration across marketing and development teams.
