HubSpot email templates are reusable layouts you build once and use for every newsletter, promotion, or automated email. You can create them with HubSpot’s drag-and-drop editor or code them in HTML and HubL for full control. The best templates are mobile-first, on brand, easy for marketers to edit, and tested in the inboxes your audience actually uses, including Outlook.
What are HubSpot email templates and why use them?
A template controls the structure of an email: the header, content sections, footer, spacing, fonts, and colors. When your team creates a new email from a template, they only swap in new copy and images. The layout stays consistent.
That consistency matters for a few reasons:
- Emails look like they come from the same brand every time.
- Marketers can build a campaign in minutes instead of starting from scratch.
- Tested layouts reduce the risk of broken emails in specific inboxes.
- Required elements, like the unsubscribe link and company address, are never forgotten.
If you want the broader case for templates, see our earlier post on how email templates save time and keep campaigns consistent.
Should you use drag-and-drop or coded templates in HubSpot?
HubSpot gives you two main ways to build templates. The right choice depends on who will build and edit your emails.
Drag-and-drop templates
The drag-and-drop editor lets you add sections, columns, and content blocks like text, images, buttons, dividers, and social links without writing code. HubSpot handles the responsive HTML behind the scenes. This works well for teams that want speed and do not have a developer on hand.
The tradeoff is control. You are limited to the modules and layout options HubSpot provides, and fine-tuning spacing or Outlook behavior can be difficult.
Coded templates
Developers can build templates in HubSpot’s Design Manager using HTML, CSS, and HubL, HubSpot’s templating language. A coded template can define exactly which areas are editable and which are locked. It can also include custom modules built for your brand, such as a product card, an event block, or a testimonial row.
Coded templates take more upfront work, but they give you pixel-level control and a cleaner editing experience for marketers, because each module only exposes the fields that should change.
A common middle ground
Many teams use a coded template with drag-and-drop areas: the developer controls the header, footer, and styling, and marketers add or reorder approved modules in the body.
How do you create email templates in HubSpot?
The exact steps vary by subscription and account setup, but the process usually looks like this:
- Set up brand settings first. Add your logo, brand colors, and fonts to HubSpot’s brand settings so new emails and templates pick them up by default.
- Plan your sections. Sketch the modules you need, such as a hero, a text block, a two-column feature row, a call-to-action button, and a footer.
- Build the template. Use the drag-and-drop editor for a quick layout, or have a developer code it in Design Manager.
- Define editable areas. Decide what marketers can change (headlines, images, button text) and what stays locked (footer, legal text, core styles).
- Add personalization. Insert tokens for names or company details, with fallback values.
- Test and save. Preview on desktop and mobile, send test emails, and fix issues before the template goes into use.
How do modules and editable areas work?
A module is a reusable content block with its own fields. For example, a button module might have fields for text, link, and color. When a marketer edits an email, they fill in those fields instead of touching code.
Good module design keeps choices limited. Give marketers the options they need, like a choice of two approved button colors, rather than a full color picker. This keeps emails on brand no matter who builds them.
In a custom HubSpot email template, you can also lock areas completely. Locking the footer means no one can accidentally delete the unsubscribe link or change your company address.
How do personalization tokens and smart content work?
Personalization tokens
Personalization tokens pull data from HubSpot contact, company, and other records into the email. The most common example is a first name in the greeting. Always set a default value, such as “there” in “Hi there,” so contacts with missing data do not see an awkward blank.
Smart content
Smart content lets you show different content to different contacts in the same email, based on rules like list membership or lifecycle stage. A customer might see an upsell offer while a new lead sees an introductory guide. Smart content is available on higher HubSpot tiers, so check what your subscription includes before you plan around it.
What makes a responsive email template work on mobile?
Many people read email on their phones, so design for small screens first and then make sure the layout scales up. A responsive email template adjusts to the screen size, but good mobile emails start with simple design choices:
- Use a single-column layout for most content. Multi-column rows should stack on mobile.
- Keep the email around 600 pixels wide on desktop, which is a long-standing standard.
- Use body text large enough to read without zooming, typically 14 to 16 pixels.
- Make buttons big enough to tap, with space around them.
- Put the main message and call to action near the top.
HubSpot’s drag-and-drop editor stacks columns on mobile automatically. In a coded template, you control this with media queries and fluid table widths.
Why do HubSpot emails break in Outlook?
Older desktop versions of Outlook for Windows render email with Microsoft Word’s engine instead of a browser engine. That engine ignores or mishandles a lot of modern CSS. Newer Outlook apps behave better, but many business audiences still use the older version.
Build layouts with tables
Flexbox and CSS grid are not reliable in email. Tables are still the safest way to build columns and spacing that hold up in Outlook.
Use inline CSS
Some email clients strip styles from the head of the document. Inline styles on each element are more dependable. HubSpot can inline CSS for you in many cases, but developers should still test the final output.
Use VML for buttons and background images
Outlook’s Word engine does not support CSS background images or rounded button styles well. Developers use VML, a Microsoft markup language, inside conditional comments to create “bulletproof” buttons and background images that display correctly in Outlook while other clients use normal HTML and CSS.
Watch spacing and fonts
Outlook may add extra gaps around images, ignore padding on some elements, and fall back to a default font if a web font is not supported. Set explicit widths, use fallback font stacks, and avoid relying on margins.
How should you test a HubSpot email template?
- Preview in HubSpot. Check desktop and mobile previews, and preview as specific contacts to confirm tokens and smart content render correctly.
- Send test emails. Send to real inboxes, including Gmail, Outlook, and Apple Mail on both desktop and phone.
- Use a rendering tool. Services like Litmus and Email on Acid show how your email looks across many clients and devices at once.
- Check links and tracking. Click every link and button, and confirm UTM parameters if you use them.
- Test with images off. Some clients block images by default. The email should still make sense.
How do you make email templates accessible?
Accessible emails are easier for everyone to read, including people using screen readers or reading in bright sunlight.
- Write useful alt text. Describe what the image shows or does. Use empty alt text for purely decorative images.
- Use real text, not images of text. Headlines and offers inside images cannot be read by screen readers and disappear when images are blocked.
- Check color contrast. Make sure text stands out clearly from the background, including on buttons.
- Use clear link text. “Download the guide” is better than “click here.”
- Keep a logical reading order. Content should make sense when read top to bottom, especially after columns stack on mobile.
What are the most common HubSpot email template mistakes?
- Building the whole email as one large image.
- Giving marketers too many style options, which leads to off-brand emails.
- Forgetting fallback values for personalization tokens.
- Skipping Outlook testing because the email looked fine in Gmail.
- Leaving no clear primary call to action.
- Creating a new template for every campaign instead of a small, flexible set.
When should you hire a developer for HubSpot email templates?
The drag-and-drop editor is enough for many small teams. Consider bringing in a developer when:
- You need custom modules that match a specific brand design.
- Your audience uses Outlook heavily and emails keep breaking.
- You want to lock down brand elements while giving marketers flexibility.
- You need advanced HubL logic, such as dynamic content pulled from HubDB or CRM data.
Our email template and landing page services cover this kind of work, from custom modules to Outlook-safe builds.
Frequently asked questions
Can I use my own HTML in HubSpot email templates?
Yes. You can build coded email templates in HubSpot’s Design Manager using HTML, CSS, and HubL. Coded templates need to include HubSpot’s required elements, such as the unsubscribe link and company address, to be used for marketing email.
Are HubSpot drag-and-drop emails responsive?
Yes. Emails built with the drag-and-drop editor are responsive by default, and columns stack on smaller screens. You should still preview and test them on real devices.
Why does my HubSpot email look different in Outlook?
Older desktop Outlook for Windows uses a Word-based rendering engine with limited CSS support. Table-based layouts, inline styles, and VML buttons help emails display correctly there.
How many email templates does a business need?
Most businesses do well with a small set, such as a newsletter, a promotional email, a plain-text style email, and a transactional or notification layout. Flexible modules cover the variations.
Well-built HubSpot email templates make every campaign faster to create and more reliable in the inbox. See how we handled this for a client in our HubSpot and Mailchimp email template case study, explore our email template services, or contact us.
