What tools are included in Design Manager
Design Manager aggregates several important tools into one powerful app. These tools include:
- Template Builder - a "drag and drop" editor for structuring your page, blog, email, and system templates.
- Primary CSS - a global CSS file that will help unify the look and feel of all the content you create with HubSpot.
- Custom Modules - reusable custom coded modules that you can set up to add advanced functionality to your site that can still be managed by non-technical users.
- File Manager - a file hosting system for all of your site's assets.
Navigating Design Manager
The quickest way to open your Design Manager is by navigating there from the Content tab (Content > Design Manager).
Design Manager allows you to organize all your templates and coded files into folders. Your folders are located on the left sidebar of the app. You can expand each folder by clicking the disclosure arrow, next to its name. When creating templates or coded files, you can also create new custom folders by clicking the New folder button. Custom folders are automatically deleted if they no longer contain any templates or files.
There are also some helpful filters options below your folders that help you quickly locate the template or file that you want to work on. These options include:
- Recently Edited - the most recent templates or files that you have been working on.
- Global Groups - collections of modules that can be added to any of your templates. You will learn more about Global content, in a later section of this guide.
- System Templates - templates for email subscription preference, error, and password protected pages. You will learn more about System Templates, in a later section of this guide.
- Purchased - templates purchased through the marketplace.
In addition to clicking on a folder to bring up a list of the contained files, you can also search within that folder by entering a file name or a keyword into the search bar. For the broadest results, click the top level folder before searching.
When you click on the name of a template or a coded file, it opens your selection in a tab. Tabs make it easy for you to multi-task and toggle between you various templates and coded files. To add another tab to your Design Manager, click +Tab.
Creating new templates and files
To create a new template or coded file, click blue button on the right side of the app. Depending on whether you have a template folder, a coded files folder, or the custom module folder selected the button will say New template, New coded file, or New custom module, respectively. You will learn more about how to create templates and coded files, later in this guide.
Template Builder is a "drag and drop" editor that allows you to set up the structure and default content of your pages and emails. While you can code your own HTML templates from scratch, building your website and emails with Template Builder will save designers time and provide marketers with much more control when it comes to structuring their content.
All HubSpot template layouts are responsive, meaning they automatically adjust to different screensizes. This editor compiles your "drag and drop" modules into clean HTML markup that's made responsive by some built in CSS.
With almost a third of all traffic on the internet coming from mobile devices, your site needs to be user friendly on all devices, no matter the size of their screens. You will learn about creating and editing templates in a future section of this guide, as well as how your templates get styled by built in and custom CSS.
You will learn more about how to use this editor, in later sections of this guide.
The primary CSS file is a global stylesheet that may appear in your HubSpot account within the Design Manager.
If a primary CSS file does exist in your HubSpot account, it is automatically applied to all of your HubSpot templates, unless it has otherwise been removed from the template's head settings (Actions > Edit Head). The purpose of the primary CSS file is to provide a centralized location for managing style declarations that are used across multiple content types and domains.
Please note: new HubSpot accounts will not include a primary CSS file. Primary CSS files that have not been customized have also been removed from older accounts. Learn more about using stylesheets in HubSpot here.
While HubSpot's templates come loaded with all kinds of different module options, sometimes designers may desire a more custom solution for their marketers, without having to worry about non-technical users breaking their code. Custom Modules are reusable coded modules that give designers the ability to work with custom variables, behind the scenes, while still allowing marketers the flexibility to customize their contents.
A marketer can customize the contents of this module by choosing an images and text at the page level, without ever touching code.
HubSpot's File Manager stores all the assets that you use to create content. This tool allows you to upload PDFs, images, videos, audio files, fonts, and more. Design Manager gives you access to all these creative assets and allows you to quickly upload new files, without having to leave the app. You will learn how to upload and access your files through Design Manager in a later section of this guide.