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

Using a template lets you control the structure of different types of content on a blog, page, or email. You can create templates in the design manager by dragging and dropping modules. Learn more about building templates in HubSpot in this Academy lesson.

Before you get started

Before you begin working with this feature, make sure to fully understand what steps should be taken ahead of time, as well as the limitations of the feature and potential consequences of using it.

Understand requirements

• Verify that you have the Design tools permission for creating and editing templates in the design manager.
• It’s recommended to also have Global content and theme settings and Website Settings permissions if you will need to edit global web assets and blog/website settings.

Understand limitations & considerations

• A Marketing Hub Professional or Enterprise subscription is required to build email templates. Content Hub accounts can create emails using the drag and drop email editor.
• Attaching CSS or JavaScript files to an email template is not supported, but you can add custom HTML markup, body classes, and inline styling to the template. 
• Drag and drop templates do not support all available content features. To use the widest range of tools, learn more about using HTML + HubL templates instead.

Understand HubSpot templates

HubSpot templates provide the framework for blogs, pages, and emails, while your users generate the actual content in the content editor. You can build templates by dragging and dropping content modules to create a layout. To create a template using HTML instead, learn more about building a custom coded template. 

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

Create a new template

• In your HubSpot account, navigate to Content > Design Manager.
• At the top of the left column, click the File menu and select New file.

• In the dialog box, click the What would you like to build today? dropdown menu and select Drag and drop. Then click Next. 

• Click the template type dropdown menu and select a type. While most default modules are available for any template, some modules are limited to certain template types. You can select the following template types:
  • Blog: templates for individual blog posts and blog listing pages.
  • Email: templates for emails.
  • Page: templates for your website and landing pages.
  • System: templates for error, password prompt, and email subscription pages. 
• Enter a file name. When you're done, click Create.

 

Structure and customize your template

You can add more modules to your template using the inspector on the right-hand side of the design manager. Click add Add in the right column 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 right column. If no specific modules are selected, you can add styling to the head of the template itself. Click a module or group to access styling options specific to that component. Learn more about using the inspector to style your template.

Preview and publish your template

Once you've created your template, you can preview how it will appear on a live page, then publish it.

• To preview the template:
  • In the top right, click Preview. 
  • If you select Live preview with display options, you can preview your template as it appears on other devices by selecting the Viewport preset. 
  • If you select Preview without display options, you can only preview how your template will appear on browsers.