A quick tour of Design Manager

Last updated: January 12, 2017

Available For:

Product: HubSpot Marketing
Subscription: Basic, Professional, & Enterprise

Designing a website on any platform can require the use of several disparate tools, such as a text editor/IDE, a FTP client, a CMS, and more.  If all those acronyms aren't intimidating enough, trying to stay organized with all the editing, saving, uploading, and refreshing can slow down the time it takes to get your site live.  And once that site is live, it may not have the flexibility that your marketers want in terms of design options, which can lead to having to constantly call on the designer to make changes.

HubSpot's Design Manager combines all the tools that designers need to build state-of-the-art websites, while still giving marketers the flexibility that they desire when creating content. Whether you are a seasoned web designer, looking to learn how to build your first site on HubSpot's COS, or a content creating marketer, who wants to learn more about building out the structure and style of their existing pages and email, this User Guide provides you with in-depth tutorials and best practices for designing on HubSpot.  If you are looking for specific code examples and reference documentation, check out designers.hubspot.com.

In this section of this User Guide, you will get a tour of all of the features of Design Manager.

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.
  • Code Editor - a Integrated Development Environment (IDE) for all your frontent code (CSS, Javascript, or even your own HTML 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 navigation

Folders

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:

Templates and coded files

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.

Search templates

Tabs

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.

Tabs

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.  

New template

Template Builder

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.  

Template Builder

Code Editor

HubSpot's code editor is a powerful IDE that allows you to code CSS files, Javascript files, and even HTML templates.  As you code or edit your stylesheets, you can live preview the effects of your changes on your templates, without affecting your published content and without leaving the app. In addition to live previewing your edits, the code editor also takes advantages of many other helpful IDE features such as syntax highlighting, auto-saving, auto-closing tags, auto-indenting, and more.

You will learn more about how to use this editor, in later sections of this guide.  

Code editor

Primary CSS

Primary CSS is a global CSS file that applies to all your HubSpot templates.  Primary CSS is the ideal location to style menus, forms, and other standard modules that appear across your templates. Using this file saves designers time and helps them stay organized.  You will learn more about Primary CSS in a later section of this guide.

Primary CSS

Custom modules

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. 

Custom module

A marketer can customize the contents of this module by choosing an images and text at the page level, without ever touching code.  

Custom module preview

File manager

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.  

File manager

Was this article helpful?

Previous article:

Next article: