How to HubL : Block & Extend to Create a Master Email Template

The drag-and-drop Hubspot email template builder isn’t quite as customizable as one would like. It also doesn’t allow us to create global modules. Which would be handy if we were creating multiple emails with the same header and footer. We can, however, meet both of these needs by creating a HTML email template. Being customizable is taken care of by us coding it by hand. How do we create ‘global elements’ in HTML though? 

Building the Master Email Template

We’ll start by building out our “master” email template to house all our global elements. This would be things like our header, footer, and anything else to be used across multiple templates. 

So, in the Design Manager we’ll click to create a new file and choose HTML & HubL as the type of template we want to build. On the next screen where it asks us What are you building? we’ll select Template Partial. A template partial is just that, a partial template. Being a partial template will allow us to add it into other templates. This also means it won’t be available for selection when creating emails, therefore it won’t take up any unnecessary space.

The one downside to being a partial is that we don’t start off with Hubspot’s HTML email default content. However if we create a new HTML & HubL email template we can copy the content from there. Then we can paste it into our partial so that we have a start off point with all the required HubL email attributes.

Adding Blocks

After we have our master template coded we need to insert a block to tell it where content from the child template will be placed. Blocks can be named whatever we want, but here it’ll be main_body. We’ll replace the <!– Insert body here –> from the Hubspot default content, between the header and footer, with the following HubL:

We can add as many blocks to our partial as we think is necessary. We can also add blocks with content already inside them. This is useful for elements that are mostly going to remain the same throughout our child templates, but may need a variation in some. For an example we’re going to add a block around our footer content.

Extending with Child Templates

Now that we have our master template complete, blocks and all, we’ll create our first child template. To do this we first create a new HTML & HubL email template. Then we’ll remove the default content, leaving us with a clean slate. To pull in our master template content we’ll add in the following HubL extend :

[[ INSERT MASTER PATH HERE ]] will be replaced with our master template’s URL path. We can get this by opening the master template, clicking the Actions dropdown, and clicking Copy path. 

Back in our child template we’ll add a block matching the main_body block we created in the master template. Inside this block is where we’ll add the content for the body of our first of many email templates.

In this particular child template example we require a different footer than the master template. So we’ll add another block to match that of the footer block we created. The content we place inside the block will replace that of the master template.

When we preview our child template we’ll see that it’s identical to our master template except for the added content from our blocks. Furthermore, when we go back to our master template, make a change (e.g. add CSS to our styles to change the color of our font), and publish we’ll see the change take place in our child template as well.

From there we can go on to create as many child templates as we want in the same way. If we ever need to make a change to the global elements of these templates we’ll only need to go to the master template to update across them all. By using Block and Extend we’ve saved ourselves valuable time. We’ve also made our email templates’ code look cleaner and easier to peruse.