CMS-General

Create page, email, and blog templates in the layout editor

Last updated: January 29, 2019

Applies to:

Marketing Hub Professional, Enterprise
Legacy Marketing Hub Basic
HubSpot CMS

Use HubSpot's template builder to create templates using modules in a drag and drop interface. These templates serve as the foundation for your pages, emails, and blogs. Learn more about building templates in HubSpot in this Academy lesson.

Please note: if the HubSpot Technical Services team has set up your templates, you'll already have custom templates to accommodate the design requirements of your site.

What is a HubSpot template?

HubSpot template serve as the foundation for the content that you create. Templates are built by arranging a variety of content modules in a drag and drop interface. 

The layout editor helps you convert an idea, sketch, or prototype into a responsive template for creating content.

Mockups to layout

Create a new template

  • In your HubSpot account, navigate to Marketing > Files and Templates > Design Tools.
  • Click File New file at the top of the finder to create a new template.

new-file

  • In the dialog box, select Drag and drop.
  • Use the dropdown menu to select the template type. While most default modules are available for any template, some module are limited to certain template types. You can select the following template types:
    • Blog: structured templates that act as the foundation for both your individual blog post and blog listing pages.
    • Email: structured templates that act as the foundation for your email.
    • Page: structured templates that act as the foundation for your website and landing pages
    • System: structured templates for error, password prompt, and email subscription pages
  • Next, give your template a file name. When you're done, click Create.
new%20file
 

Structure and customize your template

You can add more modules to your template using the inspector on the right-hand side. Click Add in the inspector to search for modules to add to your drag and drop template layout. Learn more about editing your template's structure

To customize the styling of your template, you can use the options in the inspector. If no specific modules are selected, you can add styling to the head of the template itself in the inspector. Click a module or group to access styling options specific to that component. Learn more about using the inspector to style your template.

Please note: it's not possible to attach CSS or Javascript files to an email template, but you can add custom HTML markup, body classes, and inline styling to the template

HubSpot Help article screenshot

Preview and publish your template

  • In the upper right, click Preview to see a preview of your template on a web browser . If you select Live preview with display options, you can view your preview as it appears on other devices.

  • Once you've finalized your template, click Publish changes in the upper right. 
    HubSpot Help article screenshot

Once your new template is published, you can select it for new pages or emailsYou can also select this template for your blog in your blog settings