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 […]
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.
You can build email templates for HubSpot in the following ways:
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.
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:
At the same time, creating a template using the layout editor is not devoid of drawbacks. Here are the most notable:
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.
If you want to send a template created in the drag-n-drop builder over FTP, you won’t be able to do that.
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.
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.
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:
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.
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!
Learn about the key principles common to all email marketing strategies for small business In this post, we provide the main guidelines that every small business owner should follow when setting up and running an email marketing campaign. Just like every organized event, we can break down an email marketing campaign into three stages: preparation, […]
Do you know which meta tags control how your web page displays on Twitter or Facebook? Which will boost your SEO and which won't? Read this post for the answers to these and other questions related to meta tags.
In this post, we talk about one of our front-end + back-end development projects. You will learn about the challenges we faced, the solutions we offered, and the results we achieved.
