How to code HTML page and email templates

Last updated: December 1, 2016

Available For:

Product: HubSpot Marketing
Subscription: Basic, Professional, & Enterprise
While using Template Builder will allow your content creators greater flexibility in terms of structuring content and save designers from having to write hundreds of lines of HTML, HubSpot's Design Manager also allows designers to build templates with HTML from scratch. After coding your template from scratch, you must add HubL tags (HubSpot markup language) to create editable modules that can be customized via HubSpot's content editor.  
It is important to note that coding HTML sites or emails from scratch does not automatically ensure that your template will be responsive.

Instructions

Follow these instructions to create a HTML email or page template.

Navigate to Design Manager

Navigate to Content > Design Manager.

Navigate to Design Manager

Create a new coded file

Select the Coded Files folder and click New Coded File.

New coded file

Choose coded file type

Choose the type of file you'd like to create: Page, Email, Blog, or System. Your choice not only determines which master folder the file will be saved in, but also which HubL tokens are required. 

Code editor

Name and save the file

Enter a file name with a .html file extension and press Save.

HubSpot Help article screenshot

Code your template

Next, you will need to write the HTML for your page or email template. HubSpot's code editor auto-indents, highlights your HTML syntax, and closes your tags for you. These are just a few of the advanced IDE (integrated development environment) features that make coding with HubSpot very designer-friendly.

Publish Template

Click Publish Changes to publish the template or HTML file.

HubSpot Help article screenshot

You will be prompted to choose whether or not you'd like this template to be available for selection by content creators. Unchecking Make this template available for new content allows you to save an HTML file without HubSpot's required template tags, but it also won't be available as an option for content creators. This is useful, for example, if you're creating a global section to include in another template file. 

Confirm Update

Add the required HubL tags

Once you have your structural HTML written, if you were to try to publish your template your HTML coded template, you would see an error message indicating that your code is missing required HubL tags. HubL tags connect your code to HubSpot's settings and content editor. You can learn about the required template variables here and HubL module tags here.

Clone to file

An alternative to coding from scratch is cloning one of HubSpot's templates to file. Cloning a template to file gives you access to a template's HTML/HubL and is a great way to reverse engineer a HubSpot template that you have constructed. To clone a template to file choose Actions > Clone to file.  Next, name the file with a .html extension.

Once again, HubSpot's Template Builder will save time for both designers and marketers; therefore, it is recommended to use styled templates created with Template Builder, as opposed to working from scratch. Previous sections of this guide go over how to structure and style your templates.

Previous article:

Next article: