Templates

Last updated:

Templates are reusable page or email wrappers that generally place modules and partials into a layout. A template or group of templates can be part of a Theme. Inheriting styles and settings from the Theme, enabling a unified appearance. Templates contain references to stylesheets, JavaScript files and other assets used throughout a website or email. Pages, landing pages, blogs, system pages, and emails on HubSpot all use templates.  When content creators create a page or email, they select a template to use before populating it with content. 

Templates live inside of the developer file system. The same system you see in the finder inside the design manager and can access using the Command Line Interface (CLI). Not to be confused with the File Manager, which is a file system used by content creators on HubSpot to store assets such as images, videos, and PDFs. This separation enables developers to store their files in a safer place without worrying that a content creator may accidentally break something by moving or deleting a file.

HTML + HubL and Drag and Drop templates

Templates can be created by uploading them to HubSpot using the local dev CLI, or created directly in the Design Manager.

Create a template using the Local Development CLI

To create a template using the CLI you must first have it installed and configured. Once you do, you can create a template using:

Shell script
hs create template <name> [dest]
hs create template parameters
Parameter Description
name

Custom name of the template you are creating.

dest

A local path to directory you want to create this template in. This argument is optional. If ommited this argument will default to your current working directory

After creating the template the asset is created locally. You will need to upload the asset to your account before it is reflected in the developer file system and template selection screens. You can also use the watch command to automatically upload all new files and edits to existing files in the current working directory and child directories.

Create a template using the Design Manager

The Design Manager uses the same developer file system in which your templates, layouts, modules, javascript, CSS, and other production assets live. 

To create a new template, navigate to Marketing > Files and Templates > Design Tools. This is the Design Manager. In the finder (the leftmost pane) click File > New File.

Creating a new template using the Design Manager

Choose "HTML & HubL" or "Drag & Drop".

Follow the prompt after to select the template type.

Template Types

Templates can be used for different types of content. In HTML + HubL templates, you can designate the type of template using a simple comment annotation at the top of your .html file. For drag and drop design manager templates, you set the template type only at creation, it cannot be changed later without converting to HTML +HubL. Drag and drop templates do not use template annotations.

Blog

Blog templates are similar in structure to standard Page templates. The crucial difference is that they can be selected in content settings as blog templates whereas page templates cannot. Blog Templates actually have two forms, blog listing pages and blog post detail pages. A single blog template can handle the layout for both listing and detail pages but more typically these are separated into separate templates. Both listing and detail pages use the same templateType, the only difference is the setting chosen in website settings, in the templates tab. How to create a blog template. Templates created with this templateType do not appear when a user is creating a web page, in the template selection screen. How to create a blog.

HTML
templateType: blog

Email

Email templates are used by the email tool. They have the most stringent set of requirements since they need to be viewed in many different email clients and conform to best practices to ensure proper deliverability. Both HTML + HubL and drag and drop email templates come pre-populated with baseline components upon creation. Templates with this templateType are only visible for template selection when creating an email.

In order to stay CAN-SPAM compliant, email templates have a set of required variables that must be included.

Email templates also have a built-in functionality to inline-css added to <style> elements with a special class name or data attribute. Inlining CSS in emails is a method used to get better support across email clients. Fortunately, most of the popular email clients now support embedded css, that however is not representative of your specific recipients. Use good judgment to do what is right by your recipients.

HTML
templateType: email

Page

Page templates are the most open-ended template type. They can serve as any flavor of web page or landing page. Page Layouts are not pre-populated with any components. Coded page templates come pre-populated with sparse markup including suggested HubL tags for meta info, title, and required header/footer includes. Examples of pages that would typically use a page template would include but are not limited to:

HTML
templateType: page

System Pages

System page templates are flagged internally for their specific purpose. In Content Settings, you can select these templates for their specified purpose in the system tab.

Error Pages

Error pages can be set in Content Settings as either 404 or 500 pages. Both templates use the same templateType. Templates created with this templateType do not appear when a user is creating a web page, in the template selection screen.

HTML
templateType: error_page

Email Subscription Preferences

The email subscription preferences page. Lists all of the available subscription types a user can opt into or out of. Required to contain the {% email_subscriptions "email_subscriptions"  %} HubL Tag. See the subscription preferences template in the cms-theme-boilerplate.

HTML
templateType: email_subscription_preferences_page

Email Backup Unsubscribe

A system template for email unsubscribe pages. Required to contain the {% email_simple_subscription "email_simple_subscription" %} HubL tag. See the email backup unsubscribe template in the cms-theme-boilerplate.

HTML
templateType: email_backup_unsubscribe_page

Email Subscription Unsubscribe Confirmation

A system template for email unsubscribe confirmation pages. This is where users are sent when they go to the URL generated by the {{ unsubscribe_link_all }} variable.  See the subscription confirmation template in the cms-theme-boilerplate.

HTML
templateType: email_subscriptions_confirmation_page

Password Prompt

Password prompt templates provide a branded page content creators can display to require a password before a visitor can view the page’s actual content. Password prompt templates are set via Content Settings. How to make a page on HubSpot password protected.

HTML
templateType: password_prompt_page

Search Results Page

A system template for the built-in CMS site search listing functionality.

HTML
templateType: search_results_page

Membership

HubSpot accounts with the memberships functionality can create pages on their sites that only users apart of specific lists in the CRM can access. This enables site visitors to have accounts with login credentials. These templates give you control over the appearance of these pages.

Membership Login

This is the login page that displays when a user tries to access content that is access controlled through the memberships functionality. Typically contains the {% member_login "member_login" %} module.

HTML
templateType: membership_login_page

Membership Register

This is the user registration page that allows users to create an account to view the content that users of this list can access. Typically contains the {% member_register "member_register" %} HubL Tag.

HTML
templateType: membership_register_page

Membership Password Reset

This is the password reset page. Users provide their new password on this page. Typically contains the {% password_reset "password_reset" %} HubL Tag.

HTML
templateType: membership_reset_page

Membership Reset Request

This is the request a password reset page. Displaying a form to request a password reset email. Typically contains the {% password_reset_request "password_reset_request" %} HubL Tag.

HTML
templateType: membership_reset_request_page

Previewing Templates

You should always check your work after updating templates to ensure they look and function how you intend. HubSpot’s Design Manager provides a tool for previewing modules and templates. To preview a template open the template in the design manager, in the top bar click “Preview”.

Preview options in the design manager

For most templates, the preview will show the default state for the template - the same state you would see if you created a Website Page from the template but did not edit it. There are two preview modes for templates “Live preview with display options” and “Live preview without display options”. 

Live preview with display options displays the page within an iframe, giving you some tools you can use for testing responsiveness and seeing how domain stylesheets may impact your template.

Live preview with display options shown

Blog templates are unique in that because you need a blog listing and blog posts to really get a sense for how the template is working. The preview for the blog lets you pick an existing blog to populate the preview with it’s content. From there you can choose to view the listing or detail page for that blog template.

Live preview with display options for blog

Previewing the templates using the template previewer alone may be good for minor visual tweaks. When changing drag and drop areas, default parameter values on modules, or other significant changes, it’s best to create a website page, blog, blog post or email, using the template. You can then try out different module field values and test what your template will look like in the real world and optimize for the best content creator experience. 

You can use content staging, a draft preview, or your developer sandbox account to view the page without worrying about the page being live for the world to find and see.

Included CMS files

There are certain JavaScript and CSS files that are automatically attached to all CMS templates. Some files can be removed, while others cannot. To learn more about the order in which stylesheets are attached to CMS content, check out this article.

jQuery

jQuery is automatically included in the head tag of every HubSpot template. It is rendered as part of the standard_header_includes HubL variable. You have the ability to choose between the latest version of jQuery 1.11.x or version 1.7.1, in Settings > Website > Pages.  If you choose to use the latest version of jQuery, you can also choose to include a jQuery migrate script for backward compatibility with older browsers. Additionally, you can choose to load this library from your footer. 

layout.css

Layout.css (formerly known as required_base.css) is the file that is responsible for styling HubSpot's responsive grid. This file is always automatically included in any drag and drop template. It is not included by default in custom coded templates. For developers utilizing dnd_area tags in coded HTML + HubL templates you do not need to load the layout.css file, but a version of it is included in the cms theme boilerplate to make it easier to get up and running quickly.

In addition to the responsive grid CSS, the file includes some classes that can be used to show and hide elements at different viewports. You can view the file, here.

HubSpot Tracking Code

The HubSpot tracking code is automatically added to any HubSpot template. It is included with the standard_footer_includes HubL variable. The tracking code loads an analytics JavaScript file named your_HubID.js (example 158015.js). This tracking code is directly integrated with HubSpot's GDPR functionality.