How to create a modular HubSpot email template?

HubSpot8 min read

A modular HubSpot email template consists of reusable drag-and-drop blocks that marketers can assemble themselves in any desired order. Well-built means: one base template, 8-12 modules (hero, article, product block, CTA, two-column, etc.), tested on all major email clients (Outlook, Gmail, Apple Mail), and with dark mode in mind. Building takes an experienced developer 20-40 hours. Once ready, marketing can build newsletters themselves in 30-45 minutes.

What "Modular" Means in HubSpot Email

HubSpot offers two types of email templates: drag-and-drop (out-of-the-box) and custom-coded. Modular means custom-coded where you define your modules as separate "groups" with HUBL fields. Each module has its own settings fields (text, image, color, link, alignment) that the marketer adjusts in the email editor.

The difference from a standard drag-and-drop template: you have 100% control over HTML/CSS, which is crucial for brand consistency and Outlook rendering. And your modules are reusable in all emails — not rebuilt per template.

The 8 Modules You Always Need

  • 1. Hero Banner — image + text overlay or split. Varies per campaign.
  • 2. Article Block — image + title + text + CTA link. For blog recaps and updates.
  • 3. Two-Column Article — two article blocks side-by-side. Responds on mobile as stacked columns.
  • 4. CTA Block — button only, full-width, for explicit actions.
  • 5. Quote / Customer Story — quote text + photo + name + company. Builds trust.
  • 6. Text-Only Block — plain text with heading only. For announcements and updates.
  • 7. Spacer — vertical space, configurable. Indispensable for readability.
  • 8. Footer with Social + Address — at the bottom, with unsubscribe link (mandatory for GDPR/CAN-SPAM).

How to Build It (Technically)

In HubSpot's Design Manager, you create a new email template in HTML + HUBL. Each module is a {% module %} block with fields. Important principles:

  • Inline CSS, no external stylesheets. Email clients (Outlook!) often strip external CSS.
  • Table-based layout. Outlook 2016/2019 does not support modern CSS-grid/flexbox in email.
  • MSO-conditional code for Outlook. <!--[if mso]> for specific Outlook fallbacks (e.g., bulletproof buttons).
  • Maximum 600px wide. Standard for email; design your modules within this.
  • Test in Email on Acid or Litmus. Before rolling it out, test on at least: Outlook 2019, Outlook.com, Gmail web/mobile, Apple Mail, iPhone Mail.

Common Mistakes

  • Making too many modules. With 20+ modules, marketing loses track of what each does. Stick to 8-12 well-documented modules.
  • No mobile-first design. 60-75% of B2B emails are opened on mobile. Explicitly test each module on a 375px-wide screen.
  • No dark mode tested. iOS Mail and Outlook Dark force color inversion. A white background with gray text becomes black with light gray text — sometimes unreadable.
  • Modules without field validation. A button module without a mandatory URL field results in empty links. Make fields "required" where necessary.
  • Not documenting. For each module, write: "When to use this, with example screenshot." Saves marketing onboarding time.

Frequently Asked Questions

How long does it take to build a modular email template?

For an experienced email developer: 20-40 hours, depending on the number of modules and the complexity of your brand identity. Additionally, allow 8-15 hours for testing on various email clients.

Can I convert an existing email in HubSpot to modular?

Not directly. An existing HTML email needs to be re-structured into modules. In practice, it's faster to start from scratch with a good base template and transfer the old content module by module.

Does it also work in other email platforms like Mailchimp or ActiveCampaign?

The concept works everywhere, but each tool has its own template syntax. Mailchimp uses mc:edit/mc:repeatable, ActiveCampaign has its own drag-and-drop. Your code is not 1-to-1 portable.

How much does it cost to have a modular email template built?

At a specialist agency in 2026: €3,500 - €8,500 for a complete template with 10-12 modules, tested on all major clients, including documentation. A quick-and-dirty version can be €1,500-€2,500, but expect less coverage and no Litmus tests.

Do I really need to support dark mode?

Yes. Between 50-70% of iOS users use dark mode by default. An email that renders poorly in dark mode appears unkempt and can harm deliverability (lower engagement → lower reputation).

What about Outlook 365 for Windows?

Since 2024, Outlook 365 for Windows uses the Edge/Chromium rendering engine, no longer Word. Modern CSS largely works. But Outlook 2016/2019 (still widely used in business environments) remains Word-based — there, you still need table layout and mso-conditionals.

Ready to get started?

Read our approach for building a HubSpot email template, or schedule a brief introduction — we'll take a no-obligation look and provide an honest estimate of scope, costs, and lead time.

Back to Journal →
Chat