What are modular email templates?
A modular email template is an email template split into self-contained sections, called modules, that can be reused in any order: a header, a hero, a product grid, a promo banner, a footer. Each module is coded and tested once. A new campaign is put together by choosing modules and filling in their content, instead of coding a new email.
The autumn edit is here
Waxed jackets, wool layers and trail boots for the wet months.
One library of sections instead of a new email each time
Most email programmes still treat each campaign as a one-off. A brief lands, a designer lays it out, a developer codes it, and next week the same thing happens with a different headline and a similar shape.
A modular template turns that round. The sections that recur are designed and coded once as modules, each with its own structure, spacing and responsive behaviour, and each with the content fields a campaign needs to fill, such as the hero's image, headline and button, or the promo banner's code. A campaign is then a stack of modules in the order the brief needs.
You'll meet the same idea under different names. HubSpot and Marketo call them modules, Beefree and Stripo call them blocks or rows, and Salesforce Marketing Cloud calls them content blocks. Modular email design is the practice of designing emails this way, and anemail design system is what you have once the modules, their shared styles and the rules for using them are kept together.
The modules most programmes build first
Ten modules cover most of what a retail or B2B programme sends. Add more when a brief needs one.
Header
Logo and a short line of links. Usually fixed, with no editable fields.
Hero
An image, a headline, a line of body copy and a button.
Text
A headline and a paragraph, for an intro or an editorial note.
Image and text
A picture beside copy, with a left or right layout option.
Product grid
Two, three or four products, each with an image, name, price and link.
Promo banner
An offer line and a code, in one of the approved colours.
Quote
A customer's words and their name.
Social row
Icons linking to your channels, fixed once for the brand.
Spacer or divider
A fixed gap or rule between sections.
Footer
Address, unsubscribe and legal lines, fixed.
How to break your emails into modules
The practical steps, whether you end up with a folder of HTML files or an email CMS.
- Audit your last twenty campaignsLay them out side by side and mark the sections that repeat. Most teams find the same eight to twelve shapes in different combinations. Write the list down: it's your module inventory.
- Write down the rules every module followsFonts and sizes, colours, spacing, button styles, image sizes and the email's width. If brand guidelines exist, start there and adapt them for email.
- Cut the template into sectionsTake your best-performing template and split it at the section boundaries. Keep modules at section level, such as a hero or a product grid. A button on its own is part of a module, not a module.
- Make each module self-containedInline its styles and give it its own top and bottom padding, so it doesn't rely on the module above or below. It should be responsive on its own too. The test: paste a single module into an empty email and it should still render properly.
- Decide what's editable in each oneFor each module, list the content a campaign changes (a headline, an image, a link) and the choices a marketer should have (a layout, a colour). Everything else stays fixed.
- Test each module once, then build a campaignCheck every module in Gmail, Apple Mail and Outlook before it joins the library. Then assemble your first campaign from the library, send a test and export it to your ESP. The second campaign is where the time saving shows.
Where the modules live
For a developer, or a small team comfortable in HTML, a shared repository with one file per module is enough. A campaign is assembled by copying the modules it needs into one file, and the library is maintained like any other code.
That breaks down when people who don't write HTML need to build campaigns, or when several people build at once and nobody is sure which version of the footer is current. This is the point at which teams put anemail CMS over the library: the modules stay in code, and the campaign work happens in fields.
In an email CMS, a module is plain HTML with its editable parts marked
Your template stays standard HTML. A data-mm attribute marks
the text, images and links a campaign can change, and the form builder sets each
field's label, type and limits. Anything without one stays exactly as written.
<table class="promo">
<tr>
<td data-mm="headline">
30% off ends tonight
</td>
</tr>
<tr>
<td data-mm="code">FLASH30</td>
</tr>
<!-- colours, spacing and type stay as written -->
</table>
Modular templates compared with one-off emails
| One-off emails | Modular templates | |
|---|---|---|
| Starting point | A blank file or last week's HTML | A library of tested modules |
| Who builds each campaign | A designer and a developer | The marketer, by filling in fields |
| What keeps the design consistent | Care, and a brand PDF | The modules themselves |
| Testing | Every campaign, in full | Each module once, then a test send per campaign |
| Changing the design | Edit every template | Edit the module, and the next campaign picks it up |
| Best for | Occasional one-off designs | Teams that send often from the same sections |
Teams that get the most from modular templates
Ecommerce and CRM teams
Several sends a week, most of them a hero, a grid and an offer in a new combination.
See how CRM teams use itAgencies
One module library per client, so producers build campaigns and designers are only pulled in for new modules.
Modular Mail for agenciesEmail developers
Build and test a module once instead of coding the same hero every week.
Modular Mail for developersModular templates, with an editor for the whole team on top
Modular Mail is an email CMS built for this way of working. Your modules stay in your HTML, and your team builds campaigns from them.
The autumn edit is here
Waxed jackets, wool layers and trail boots for the wet months.
Your modules, in your HTML
Your developer marks the sections you already have, so nothing is rebuilt in someone else's block format.
Reorder by dragging
Add the modules the template allows, drag them into order and remove the ones you don't need.
Rules where a field needs them
Character limits, required fields, and approved colour and layout options.
Export to any ESP
Copy or download the finished HTML for Klaviyo, Braze, Salesforce Marketing Cloud or wherever you send from.
What is a modular email template?
A modular email template is an email template split into self-contained sections, called modules, that can be reused in any order. Each module is coded and tested once, and a campaign is built by choosing modules and filling in their content.
What is modular email design?
Modular email design is the practice of designing emails as a set of reusable sections rather than as one-off layouts. The modules, the styles they share and the rules for using them together make up an email design system. What is an email design system?
What's the difference between a module and a content block?
Mostly the name, and which tool you're in. The useful distinction is between a module, a whole section with its own fields and rules, and a block in a builder, which is styled in the builder each time.
How many modules do we need?
Eight to twelve covers most programmes, and the ten above are a reasonable first list. Cut the ones your audit didn't find, because a module nobody uses still has to be maintained.
Do modular templates work with Klaviyo, Braze or Salesforce Marketing Cloud?
Yes. A module is HTML, and a finished campaign exports as HTML that any of those platforms, and any other ESP, will accept. The ESP still sends, segments and reports.
Which platforms let a team build modular templates with reusable content blocks?
Three kinds. Some ESP editors support modules in their own format, HubSpot and Marketo among them. Email builders such as Stripo and Beefree build blocks in the builder's format. An email CMS such as Modular Mail keeps the modules in your own HTML, gives marketers fields to fill in and exports to any ESP. What is an email CMS?
How long does it take to set up modular templates?
If the HTML exists, splitting it into modules and marking the editable parts is usually days rather than weeks. Most teams using Modular Mail are live within one to two weeks, including their first campaign.
Can a marketer change the layout of a module?
Only in the ways the module allows: a product grid might offer two, three or four across, a hero might offer image left or right. Anything outside those options is a new module, which your developer, your agency or our team adds to the library.
See your own email in Modular Mail.
Send us a recent campaign. We'll rebuild it before the call, so you can see exactly how your team would work.