I designed my first coded email template in HubSpot last week for use with Marketing Emails, and I thought I'd share my experience. While the HubSpot development documentation is very helpful in a lot of areas, I found it a little confusing when it came to creating Email Templates for Marketing Emails.
There are two types of emails you can use when creating Marketing Emails - Drag and Drop Templates, and Custom Templates.
Drag and Drop Templates are included in HubSpot. If you are using the Free version of HubSpot, you have a limited choice of templates to use. If you are using any of the paid versions of HubSpot (Starter, Professional or Enterprise), then you have a larger choice of templates to use versus the Free version.
With Drag and Drop Templates, you can structure emails with HubSpots drag and drop feature onto a preset layout. This is useful for content editors to design and customise their own emails when creating a marketing campaign.
For consistency, you can also save templates that you have created. This is useful for when you have a regular newsletter, and you want to keep the same layout and design for each one, but change the content within.
To create Drag and Drop Templates, go to Marketing -> Email -> Create Email. Once you have selected what email you would like to create, ensure that you are in the Drag and drop tab. Then, choose a template.
Custom templates are for developers, liaising with marketers, who want to create email templates from scratch. These emails offer very limited customisation from a content editor's point of view, and more suited towards emails that have content that is never or rarely changed.
Custom templates should be used for when you need to design an email where a layout provided by the Drag and Drop Templates is not suitable, and when content is static and not to be changed by a content editor.
The problem with emails is that different email clients render emails in different ways. For example, Microsoft Outlook may render an email differently than Apple Mail. To add to that, Microsoft Outlook installed on the desktop may render an email differently than Microsoft Outlook for Web.
Also, if you are planning on using Cascading Style Sheets (CSS), in most cases you would need to use inline css styling. Even then, an email client may not render the styling declared in your inline css styling. I've also noted that email clients have difficulties rendering HTML elements such as divs and spans.
However, when rendering an email in a Web based client, such as Outlook for Web, I have noted that does a better job at rendering HTML and CSS than a desktop version. To add to that, the new Outlook Experience for Desktop renders emails as if it was the Web version.
As a result of this complexity, if you are planning on using Custom Templates, you will find yourself designing Custom Templates using tables. While this may take you back to the early days of page layout and design, it is better to do so as your email design will have a better chance of looking as you plan it to look, no matter what email client the email is being viewed in.
I wanted to address this question directly. While you can use Drag and Drop in custom templates for website pages and landing pages, you cannot use Drag and Drop in Custom Email Templates in HubSpot.
But wait! In Design Tools (Marketing -> Files and Templates -> Design Tools) you can create a new Drag and Drop Template file for Email. Confusing, right? You'll notice that HubSpot now recommend that you don't do this, and instead use HTML + HubL. You'll also notice that the drag and drop editor for emails is still fairly limited. I suspect this is a feature that will be dropped in time.
I found two scenarios where you can add customisation to Custom Email Templates, but I'm certain there are a few more:
HubSpot is a very powerful Customer Relationship Management (CRM) and Content Management System (CMS) with some great features. However, you may find something that looks like it could be done one way, but then can't.
This is one of those situations - I wanted to design my own Drag and Drop Email template using Visual Studio Code or the Design Manager. I then found out you can't.
However, through this experience, I have managed to define where you would use one template over another. It goes something like this:
If you feel that I may have got anything incorrect in this post or have any useful information that might be able to help me or others, then please feel free to comment below.
HubSpot - Email Template Markup - https://developers.hubspot.com/docs/cms/building-blocks/templates/email-template-markup
HubSpot - Create email templates - https://knowledge.hubspot.com/email/save-your-marketing-email-as-a-template
