Build a custom coded template

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

Learn more about designing custom assets in our developer documentation. 

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 permissions 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.
• Custom coded templates can use many predefined variables. Some of these variables are required to create emails and pages, while others are optional. Learn more about adding required email, website, and landing page HubL variables. 

Create a new HTML + HubL file

• 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 New file dialog box, click the What would you like to build today? dropdown menu and select HTML + HubL, then click Next. 

• In the Set up your new HTML + HUBL template dialog box, enter the details of your new file:
  • Select an option for What are you building?:
    • Template: defines the layout and the structure of the content that will be displayed on the website pages, landing pages, blog posts, or email. 
    • Template Partial: is reusable code or a snippet of code that can be included in multiple other templates. 
  • Click the Template type dropdown menu and select a type for the custom coded template (page, blog post/listing, email, or system page). Learn more about template types.
  • In the File name field, enter a file name.
  • To update the file's location, click Change in the File location section and select a folder.
• Click Create.

Add HTML + HubL to your template

Once you have configured your new file, you'll be directed to the code editor to add your custom code and preview how it will appear on a live page.

Add HTML + HubL

• Enter the HTML for your template. Learn more about adding CSS and JavaScript files to your custom coded template. 
• To display how your HubL will render, click to toggle the Show output switch on. A panel will open on the right with the rendered preview.

Add required HubL

Custom coded templates require specific HubL variables to function. If any of these required variables are missing, an error message will appear when you try to publish the template. 

• Page and blog templates require the following variables:
  • {{standard_footer_includes}}
  • {{standard_header_includes}}
• Email templates require the following variables to be CAN-SPAM compliant. 
  • {{unsubscribe_link}} or {{unsubscribe_link_all}} (include at least one)
  • {{unsubscribe_anchor}}
  • {{site_settings.company_name}}
  • {{site_settings.company_street_address_1}}
  • {{site_settings.company_city}}{{site_settings.company_state}}
  • {{site_settings.company_zip}}

Clone a template to HTML

In addition to creating templates from scratch, you can also clone drag and drop templates for blogs, website pages, and landing pages to HTML.

• To create a coded version of an existing template:
  • In your HubSpot account, navigate to Content > Design Manager.

• • In the left sidebar, open the template you want to clone.
  • Click the Actions dropdown menu and select Clone to HTML. The HTML file will be created in the same folder as the original file.

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.

• 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.
• When you are finished editing, click Publish changes in the upper right.

• If there are any code errors, an error message will appear. Review more information about these errors in the error console below the code editor:
  • In the error message at the top of the page, click error console to open the console below the code editor. 
  • Alternatively, navigate to the bottom of the code editor and click Show details.