If you’ve ever opened the HubSpot Design Manager and immediately closed it out of confusion, you’re not alone.
Between unfamiliar template structures, developer-heavy labels, and a maze of folders, it’s easy to feel like you might break something by accident. Especially if you’re juggling both content updates and backend tweaks, knowing where to begin can be frustrating.
Most marketers are comfortable editing pages and working inside branded themes, but opening the Design Manager often feels like stepping into a different language. Projects stall, and usually one or two “HubSpot experts” end up doing all the heavy lifting.
This walkthrough is your non-intimidating entry point.
You’ll learn how to navigate Design Manager, understand what each section does, and work inside it without risking live content.
Once you master this tool, you unlock smoother workflows, fewer bottlenecks, and greater autonomy for your marketing team.
Managing Templates, Modules, and Assets in HubSpot’s Design Manager
HubSpot’s Design Manager is your central CMS workspace for handling templates, modules, assets, and code files. Think of it as your back-office editor, the place where the foundational structure behind your web pages lives.
You can find Design Manager by heading to:
Marketing > Files and Templates > Design Tools inside your HubSpot portal.
Once inside, you’ll notice it’s heavily used by developers but increasingly accessed by marketers who want more control. Design Manager lets you:
- Build or update templates using HubL markup or drag-and-drop layouts
- Create reusable modules for testimonials, hero banners, and more
- Organize and maintain theme assets, including global CSS and header images
- Structure folders logically to speed development and handoff
Design Manager also integrates with your CRM data via personalization tokens, enabling dynamic content such as contact-specific messages or location-based visuals.
How It Works Under the Hood
Design Manager functions like a streamlined developer environment. Files are nested in folders, similar to a well-organized desktop file system.
Simplified workflow:
- Inputs: Themes, templates, modules, and assets (CSS, JavaScript, global content)
- Processing: HubSpot compiles these files, applies HubL variables, and generates functional layouts
- Outputs: The final pages, emails, and landing pages your audience sees
Breaking it down further:
- Open a theme folder containing customizable templates, layouts, and code files.
- Templates pull in modules (both built-in and custom).
- Modules include HubL, HTML, and CSS, which determine visual and functional behavior.
- Publishing a page compiles all elements into a working front-end result.
When using drag-and-drop templates, HubSpot stores layout information in JSON rather than hard-coded HTML. This allows for faster page loads and easier layout updates without editing code.
You can also manage defaults, such as global headers and footers, in Settings > Website > Themes. Any changes applied to the parent theme cascade across templates that inherit from it.
Main Uses Inside HubSpot
Building and Editing Templates
The Design Manager streamlines the creation of scaffolding for web pages, landing pages, and blogs. Build once, reuse often.
Example: Launching a new campaign requires a landing page with a testimonial section. You create a drag-and-drop template, insert a custom testimonial module, and publish it to your theme folder. Now, any marketer can select that template, no coding required.
Consistency ensures your brand stays intact while allowing flexible content updates.
Creating Custom Modules
Custom modules handle scenarios where built-in options aren’t enough. Design modules with user-controlled fields, like image uploads, button labels, or toggle options, while locking in styling and structure.
Example: You want a “Feature Highlights” block for multiple product pages. You build a module with repeatable inputs for “Feature Title” and “Feature Description,” apply CSS for layout, and publish. Team members can now drop in the module, update content, and maintain design integrity, no repetitive coding required.
Managing Theme Assets and Global Files
HubSpot lets you store CSS, JavaScript, and images directly in your theme. Changes in one location reflect site-wide.
Example: Change your primary button color in the main CSS file, save, publish, and it updates across every page. This ensures consistent styling and reduces hours of manual edits.
Cloning and Editing HubSpot Default Templates
HubSpot templates provide a starting point for tight deadlines. But direct edits can be risky.
Safe workflow:
- Clone the default template in Design Manager.
- Edit the clone to add columns, modules, or design tweaks.
- Reassign it to your content pages.
Example: The default Blog Listing template doesn’t have a “related topics” section. Clone it, insert a module, and assign the updated template, original intact, customizations live.
Common Setup Errors and Wrong Assumptions
Even experienced users make mistakes. Here are common pitfalls:
- Editing live templates directly: Risk of breaking all pages using the template. Always clone first.
- Throwing everything into one folder: Makes updates and debugging tedious. Use subfolders: “Modules,” “Templates,” “Assets.”
- Editing the wrong file in parent-child themes: Verify which templates are active to avoid editing inactive versions.
- Missing asset links or references: Use proper HubL syntax, check paths relative to the active theme.
Step-by-Step Setup or Use Guide
Requirements: CMS Hub Professional or Enterprise access with Design Tools permission. Admin privileges simplify setup.
Steps:
- Open Design Manager: Marketing > Files and Templates > Design Tools
- Review folders: Find active themes and logical subfolders for templates, modules, and CSS
- Open a template or theme: Double-click to view in the visual or code editor
- Explore drag-and-drop templates: Hover over placeholders to identify modules, global headers, or footers
- Inspect available modules: Use the Add panel to test standard and custom modules
- Review code where needed: Check HubL calls and embedded CSS in coded templates or modules
- Check file dependencies: The References panel ensures CSS/JS assets are loading correctly
- Save and publish: Click Publish Changes. Use preview/test environments for safety
Measuring Results in HubSpot
After updates, track whether changes improve site performance:
- Page performance reports: Monitor load times, bounce rates, and session lengths
- A/B testing: Compare layouts or modules for conversion improvements
- Campaign reporting: Track form submissions, downloads, or CTA clicks
- Design audit trail: Check edit history for version insights
Pro tip: Build a dashboard-tracking template that tracks template-specific metrics, like conversion-to-view ratios. Over time, you’ll identify high-performing modules and structures.
Short Example That Ties It Together
Imagine spinning up a simple campaign landing page:
- Requirements: hero image, feature list, contact form
- Actions in Design Manager: create a new drag-and-drop template called “Simple_LP.”
- Modules added: hero image, three-column feature module, form module
- Result: template becomes selectable in any landing page,the marketing team can clone and adjust messaging without a developer
- Track performance: conversions, time on page, bounce rate
This demonstrates real-time design agility with measurable results.
How INSIDEA Helps
Design Manager mastery isn’t just about navigating folders. INSIDEA helps teams unlock full HubSpot CMS potential:
- HubSpot Onboarding: Smart setup with themes, system folders, and default templates
- CMS Management: Maintain clean structures, scalable modules, and correct asset references
- Design Manager Training: Equip marketers to safely create and edit templates
- Dashboard and CRM Integration: Connect design changes to measurable engagement
Working with INSIDEA gives control without complexity. Visit INSIDEA to simplify and scale your HubSpot CMS.
Take control of your site’s design structure, launch pages faster, maintain consistency, and make every change count.
Start your HubSpot Design Manager tour today and remove the guesswork from CMS management.
Talk to our HubSpot experts today!
