How to code HTML page and email templates

Last updated: November 14, 2017

Available For:

Marketing: Basic, Pro, Enterprise
Sales: N/A
Service: N/A
While your template builder gives your content creators greater flexibility in terms of structuring content and saves designers from having to write hundreds of lines of HTML, your design manager tool 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 your content editor.  
Please note: coding HTML sites or emails from scratch does not automatically ensure that your template will be responsive. 

Navigate to Design Manager

In your HubSpot Marketing Basic, Professional, or Enterprise account, 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 click Save.

HubSpot Help article screenshot

Code your template

Next, you will need to write the HTML for your page or email template. Your HubSpot code editor auto-indents, highlights your HTML syntax, and closes your tags for you. 

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 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 in the upper left-hand corner of your template in the design manager. Next, name the file with a .html extension. 

Was this article helpful?

Previous article:

Next article: