HubSpot Design Manager is the main tool for creating, editing and managing all your website assets in HubSpot CMS. If you’re creating landing pages, email templates, or modules, Design Manager is an easy way for developers and marketers to work together.
This post will explain what HubSpot Design Manager is, how to use it, and when to use it to build beautiful, responsive, and high-performing websites.
1. What Is HubSpot Design Manager?
HubSpot Design Manager is an editor you can use that displays everything visually and also lets you create / edit your HTML, CSS, and HubL (HubSpot’s templating language) code. It combines drag-and-drop capabilities for all users, and code editor capabilities for technical users, so everyone can create and customize digital assets quickly and easily.
The Design Manager allows developers to create templates/modules in code, and marketers can customize the layout and the content without having to touch any code.
Key Features Include:
- Template / theme management
- Custom module creation
- File manager to facilitate managing other assets (images, scripts, CSS, etc.)
- Integrated code editor with syntax highlighting
- Preview and testing tools
2. Elements of HubSpot Design Manager
The Design Manager consists of a number of useful sections that allow for easier development and content management:
a. Template Editor
The template editor allows developers to design page layouts visually or through code. You can add rows, columns, and modules (such as text, images, CTAs) to define your page layout structure and behavior.
b. Code Editor
For developers, the code editor provides the real development experience. You can use HTML, CSS, JavaScript, and HubL language with the code editor. The code editor is where you build custom templates and dynamic modules depending on what is needed for your website.
c. Module Builder
Modules are a reusable component that can be inserted throughout many pages. You can create custom modules that make use of forms, sliders, testimonials, CTAs, etc., and provide a faster and modular development process.
d. File Manager
The file manager is a storage area for all of your assets, including images, videos, stylesheets, and scripts. When you organize the files properly in your file manager, you will reduce inefficiencies during development and help with updating in the future.
e. Inspector Panel
With the inspector panel, you can configure module settings including padding, margin, and responsive visibility. The inspector panel is a great tool for designers to have visual control over layout adjustments.
3. Advantages of HubSpot Design Manager
a. Developer-Friendly Flexibility
Developers can implement HubL and develop custom modules for dynamic functionality, while still providing a user-friendly editing experience for marketers.
b. No-Code Editing for Marketers
After templates and modules are developed, marketers can use the drag-and-drop editor to update content, change designs, and reorder page elements without relying on a developer.
c. Efficient Workflow
The Design Manager will facilitate team collaboration while speeding up website updates since design, development, and content editing will be distinct functions.
d. Uniformity Across Pages
Using templates and modules will maintain visual consistency and brand adherence across every page on the website.
e. Integrated Preview and Testing
Preview your templates and modules in HubSpot prior to publishing to ensure everything appears the way it should on desktop and mobile.
4. Strategies for the Effective Use of HubSpot Design Manager
To maximize your use of the Design Manager, please consider these guidelines:
- File Organization: You should consider keeping templates, modules, and assets all in folders that are well-labeled and organized.
- Use Custom Modules Where Possible: Build your custom modules in a flexible way to reuse modules across multiple templates.
- Standards for Code: Use HubL best practices for maintainable, modular code.
- Global Content: Build a global header, footer, and CTA to use across the site.
- Performance Optimization: Minify CSS/JS files and compress images to improve load times.
5. Common Use Cases
- Building blog and landing page templates
- Building responsive website themes
- Branding modular content blocks for marketers to use
- Global website entries
- Manage design assets and brand consistency
Conclusion
The HubSpot Design Manager has proven to successfully connect designers, developers, and marketers. It helps bring everything together in one convenient place to create, manage, and optimize digital assets for the HubSpot CMS – allowing teams to deliver a truly professional and consistent high-performing website.
When designers learn the features and adhere to best practices, they will begin streamlining their workflow, enhancing collaboration, and will have complete control over the design process(s) for their HubSpot website.
