How To Use A Build Template Code

Developers can build blog, website page, landing page and email templates from scratch using HTML. You can also clone a drag and drop template layout to HTML, then customize information technology as a coded template.

The types of content that can utilise custom coded templates depend on your Marketing Hub and CMS Hub subscriptions:

	No Marketing Hub subscription OR Marketing Hub Starter	Marketing Hub Professional/Enterprise OR Legacy Marketing Hub Basic
No CMS Hub subscription	Custom coded templates not bachelor	Custom coded templates available for blogs, landing pages and emails
CMS Hub Starter	Custom coded templates available for blogs and website pages	Custom coded templates bachelor for blogs, landing pages ,website pages , andemails
CMS Hub Professional/Enterprise	Custom coded templates available for blogs, landing pages and website pages	Custom coded templates available for blogs, landing pages ,website pages , andemails

Create a new HTML & HUBL file

In your HubSpot business relationship, navigate to Marketing > Files and Templates > Design Tools.
In the left sidebar, create a new file by clicking File > New file . Y ou may need to click the folder folder icon to expand the finder.
In the dialog box, click the What would you lot similar to build today? dropdown bill of fare and select HTML & HUBL .

ClickNext
Enter the details of your new file:
- Select Template or Template Fractional. A template partial is a template that tin can be used within other templates.
- In the dropdown menu, select the type of template you're coding (folio, blog, or email).
- Requite your file a name.
- To update the file's location, in the File location section, click Change and select the folder to add together the file to.
Click Create .
Write the HTML for your page or email template.
To preview how your HubL will render, click to toggle the Show output switch on. A panel will open on the correct with the rendered preview.
In the upper right, click Preview to preview how your template volition appear and function in the content editor. This preview syncs with the editor and volition automatically refresh as you piece of work.
In the upper right, clickPublish changes

Any errors in your lawmaking will be flagged in an error message when you lot try to publish changes. The error console at the bottom of the lawmaking editor will display the mistake or alarm details, as well as suggestions on how you tin fix these errors and warnings.

error-console

For additional resources on custom design, you tin refer toHubSpot designer documentation. There is additionaldocumentation on coded module optionssuch equally filter tags and icons.

Add the required HubL tags

Y'all'll see an error message if your code is missing whatever required HubL tags if y'all were to endeavour to publish the file.

Website, landing page and blog templates crave the following tags:

{{standard_footer_includes}}
{{standard_header_includes}}

Email templates require the following tags to be Can-SPAM compliant. They can exist added in ii ways:

Include this token that pulls in the unsubscribe Tin can-SPAM section: {{unsubscribe_section}}. Then, add these tokens individually:
- {{site_settings.company_street_address_1}}
- {{site_settings.company_city}}
- {{site_settings.company_state}}
- {{site_settings.company_zip}}
- With this method, you won't have the ability to format the language and style of the text and links.

Employ these tokens individually.:
- {{site_settings.company_name}}
- {{unsubscribe_link}} or {{unsubscribe_link_all}} (include at least ane)
- {{unsubscribe_anchor}}
- {{site_settings.company_name}}
- {{site_settings.company_street_address_1}}
- {{site_settings.company_city}}{{site_settings.company_state}}
- {{site_settings.company_zip}}
- Using the tokens individually volition allow you the flexibility to add together diction around the tokens and links and to format them in the desired way and language.

Clone to HTML

In add-on to creating a template from scratch, you can also clone one of HubSpot's templates to HTML. Cloning a template to HTML gives you access to a template's HTML content.

To create a coded version of an existing template:

In your HubSpot business relationship, navigate to Marketing > Files and Templates > Design Tools.
ClickActions > Clone to HTMLin the finder. The HTML file will be created in the same folder as the original file. Its file proper noun will friction match the name of the original template with copy appended to it.