Why Use Modular Custom-Coded Templates for Your HubSpot Marketing Emails?

If you’ve been looking for an inbound marketing software solution and have chosen HubSpot, we fully support your decision. This popular platform has a ton of advantages, from the ability to integrate with social media and monitor the entire buyer’s journey to extensive customer lists and segmentation possibilities and excellent ROI reporting.

HubSpot is used by over 64,500 companies in over 100 countries across the globe. One of the most attractive features this platform offers is the email marketing automation solution. It allows you to deeply personalize your emails in order to get more clickthroughs, optimize email campaigns with A/B tests and analytics, and create beautiful marketing emails.

It is exactly the ways of building marketing emails in HubSpot that we’d like to discuss in this post. We want to show you why and when you should choose what we call modular custom-coded templates for your HubSpot marketing emails.

WAYS TO CREATE EMAIL TEMPLATES IN HUBSPOT

You can build email templates for HubSpot in the following ways:

• Use the in-built drag-n-drop visual designer tool
• Code a basic template using the HTML markup and HubL variables outside HubSpot and then upload the file to the platform (only the Professional and Enterprise pricing plans)
• Clone a drag-n-drop template into HTML code and edit it inside the HubSpot editor
• Code a template by creating modules first and upload the file to the platform (only the Professional and Enterprise pricing plans)

While building templates with the drag-n-drop tool may seem simpler and quicker, it’s the modular custom-coded templates made outside of HubSpot that can give your marketing campaigns real value. Let’s go over the details.

THE DRAG-N-DROP VISUAL DESIGNER TOOL

To build templates in this way, you use the HubSpot in-app tool by dragging and dropping groups and modules. Just follow the instructions to start creating a template in the layout editor.

The main advantages the drag-n-drop method provides are:

1. It’s good for someone who’s not well-versed in coding. Anyone can make changes to a template at any time in the process with no need to ask for a professional software developer’s assistance.
2. What you see is what you get – you can instantly visualize your email in a customer’s inbox.
3. You can turn a template made in the template builder into a coded template. The reverse conversion is impossible.

At the same time, creating a template using the layout editor is not devoid of drawbacks. Here are the most notable:

• A large amount of extra code that HubSpot adds

The HubSpot builder uses a 12-column Bootstrap-based grid, and all the HTML and CSS code for this grid is modified in automatic mode, depending on how you’ve arranged columns in your template.

Every single column, row, and module gets enclosed in a wrapper class. If you decide to make some enhancements in this automatically generated code afterward, you’re going to have a hard time doing it.

It’s true that you can still add your own classes and ids to certain portions of the markup. This will only help you make some cosmetic changes, though. When it comes to structuring your code the way you want, your hands are tied. You won’t be able to override the grid.

As a result, the drag-n-drop approach prevents developers from building more complex, flexible templates with unique designs. All they can get is something basic, something that looks similar to many other templates.

• No access via FTP

If you want to send a template created in the drag-n-drop builder over FTP, you won’t be able to do that.

BASIC CUSTOM-CODED EMAIL TEMPLATES

These are files that developers create themselves using HTML and HubL tags. This approach is more flexible.

Developers are free to modify the code in any way they want, including some email template variables like {{ contact.firstname }}, {{ contact.lastname}}, and {{ contact.email}}. HubL gives email templates the flexibility desired.

While they can’t perform the same high-level, complex operations as programmers who can use server-side scripting languages like PHP (HubSpot doesn’t provide this ability), HubSpot developers can leverage the power of HubL to create email templates with some useful functions.

HubL variables and tags can be added to drag-n-drop templates too. However, their use in those templates is restricted. In custom-coded templates, on the other hand, HubL gives developers ample space for flexibility and creativity.

Basic custom-coded templates do have some limitations, though. While they allow you to dynamically change some portions of a template, for example, a recipient’s name or a price of an item, you can’t apply logic inside a template. For instance, you can’t display or hide a block or image by clicking a button.

CLONED DRAG-N-DROP HTML TEMPLATES

You can clone drag-n-drop templates and tweak their HTML code right inside the HubSpot editor. However, modifying this builder-generated code can be extremely difficult and time-consuming. So, we recommend avoiding this method altogether.

MODULAR CUSTOM-CODED TEMPLATES

This method gives you maximum flexibility when creating your emails. You first build your own modules and add them to a template. You can choose any layout you want since you’re free from any restrictions HubSpot’s grid imposes. What’s even more important, you can add “switches” or control statements to your code. This allows you to hide or display entire content blocks.

Have a look at this screenshot, for example.

There’s no need to create the markup for both blocks in this template. You can simply add a “switch” to show or hide the image.

Before the switch is applied:

After the switch is applied:

Another example with the button displayed and hidden.

Before:

After:

As a result, you’ll get a block with the same markup as the one above.

Another benefit of using modular custom-coded templates is the ability to repeat (propagate) content. Furthermore, you can set odd and even elements to behave differently. Here’s an example:

WHEN TO USE MODULAR CUSTOM-CODED TEMPLATES

If you’re building a basic email template with a simple design and without much functionality, drag-n-drop email templates should meet your needs. Understand, though, that you’re not the only one who might have chosen this method.

It means that your marketing emails will look very similar to those your competitors have built. Potential customers won’t be able to distinguish your offer among the rest. And that’s the ultimate goal, isn’t it?

Modular custom-coded modular templates, by contrast, allow you to create truly unique emails by taking full advantage of the HubL markup language. Without any grid restrictions, you can choose your own custom layout. You can also add any specific features and conditional logic to your emails.

Modular custom-coded templates contribute to better brand recognition during email marketing campaigns. This happens because the flexibility of these templates allows developers to implement every tiny detail of the brand style in the design of an email.

GETDEVDONE CREATES STUNNING CUSTOM-CODED EMAIL TEMPLATES FOR HUBSPOT

One thing to note is that building custom email templates for HubSpot is much more complicated and takes up much more time than creating templates for similar email services such as MailChimp and Campaign Monitor.

However, this is not a problem for GetDevDone email professionals who have wide experience crafting beautiful and functional custom email templates for HubSpot and many other email service providers. We test all templates on 12 real devices and in more than 75 email clients.

Recently, we also introduced a new service: ASAP Email Template Development, which reduces the standard development time (one business day) by half and even by three times in certain situations. So, get in touch with us and get back a perfect custom-coded template to guarantee the success of your next email marketing campaign!