Skip to content
Modular Mail Modular Mail Modular Mail Docs

Quickstart for developers

This guide turns an HTML email you already have into a template with a header, a footer and one editable module. It takes about 20 minutes. You need the Developer, Admin or Owner role.

How a template fits together

Section titled “How a template fits together”

Modular Mail builds every email by joining three kinds of part, exactly as written:

header  +  module  +  module  +  …  +  footer

So the header holds everything from <!doctype html> to the point where the first module starts: the <head>, your styles, <body>, any wrapper tables and usually your logo. The footer closes everything the header opened. Each module is a fragment that fits between them, typically one or more table rows.

Set up the template

Section titled “Set up the template”

  1. Create the template.

    Go to Templates and click New template. Name it after the design, for example “Newsletter 2026”, and click Create template. A new template starts with a minimal header and footer and no modules.

  2. Paste your header.

    Click Header in the outline. In the code editor, replace the HTML with everything from your email’s <!doctype html> down to the point where the content starts.

    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title></title>
    </head>
    <body style="margin:0;padding:0;background-color:#f3f3f4">
    <table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0">
    <tr>
    <td align="center">
    <table role="presentation" width="600" cellpadding="0" cellspacing="0" border="0" bgcolor="#ffffff">

    Leave the <title> empty. Modular Mail puts the campaign’s subject there and the preheader just inside <body>.

  3. Paste your footer.

    Click Footer and paste everything from the end of the content to </html>, closing every tag the header opened.

    <tr>
    <td style="padding:24px;font-family:Arial,sans-serif;font-size:12px;color:#62626b">
    <a href="{{unsubscribe_url}}">Unsubscribe</a>
    </td>
    </tr>
    </table>
    </td>
    </tr>
    </table>
    </body>
    </html>

  4. Add a module.

    Click Add module in the outline, name it “Hero” and paste the rows for your hero section. Add a data-mm attribute to each element marketers should change:

    <tr>
    <td>
    <img data-mm="image" src="https://example.com/hero.jpg" width="600" alt="" style="display:block;width:100%;height:auto">
    </td>
    </tr>
    <tr>
    <td style="padding:32px;font-family:Arial,sans-serif">
    <h1 data-mm="headline" style="margin:0;font-size:28px;color:#18181b">Our autumn edit</h1>
    <a data-mm="button" href="https://example.com" style="display:inline-block;margin-top:16px;padding:12px 24px;background:#18181b;color:#ffffff;text-decoration:none">Shop now</a>
    </td>
    </tr>

    The preview shows the module inside your header’s styles.

  5. Add a field for each marker.

    The form panel lists the markers that don’t have a field yet. Click Add field beside each one and pick a type that suits the element:

    • image → Image. Turn on Can link if marketers may link it.
    • headline → Text. Set a Character limit such as 60.
    • button → Link, so marketers set both its text and its URL.

    Give each field a clear label, such as “Headline”, and help text if it needs explaining.

  6. Check it as a marketer would.

    Switch the form panel from Build to Preview. Fill in the form and watch the module change. Nothing you type here is saved.

  7. Publish.

    Click Publish in the top bar. If the template has errors, the dialog lists them and publishing waits until they’re fixed. Choose a version number, such as 1, and publish.

Your team can now pick this template under Campaigns, New campaign.

Next steps

Section titled “Next steps”