Quick Start Guide

Get from signup to your first campaign export in minutes.

This guide covers the core workflow: creating a template, building modules, and assembling your first campaign.

---

What you’ll accomplish

By the end of this guide, you’ll have:

• Created your first email template
• Built reusable content modules
• Assembled a campaign and customized its content
• Exported production-ready HTML for your email platform

---

Step 1: Sign in to your workspace

Go to app.modular-mail.com and sign in with your credentials.

---

Step 2: Create your first template

Templates are the foundation of every campaign. They contain all the styles, design, modules, and editable content configuration that your team uses to build campaigns.

1. Click Templates in the main navigation
2. Click New Template
3. Enter a descriptive name (e.g., “Monthly Newsletter” or “Product Announcement”)

---

Step 3: Add your header and footer

The header and footer define the opening and closing sections of your email. How you use them is flexible, as every template has different requirements.

The header typically includes the document opening tags and wrapper table structure. It can also contain content that appears at the top of every email, such as a logo bar or navigation.

The footer closes your wrapper and document tags. It can also include content like social links, address text, or legal information.

Like modules, header and footer blocks can include editable fields.

1. Click Header in the Template Structure section of the sidebar
2. Click Edit Header in the right sidebar
3. Paste your header HTML
4. Click Footer in the Template Structure section
5. Click Edit Footer
6. Paste your footer HTML

Tip: See Template Best Practices for HTML structure recommendations.

---

Step 4: Create your first module

Modules are the building blocks of your emails: hero images, text blocks, product grids, CTAs. Each module is a self-contained section that your team can mix and match when building campaigns.

1. Click Modules in the navigation
2. Click New Module
3. Enter a descriptive name for your module (the name field is automatically focused)
4. Click Edit Code to open the code editor
5. Paste or write your module HTML
6. Add mm-editable attributes to elements your team should be able to customize
7. Add labels to give editors helpful field names, e.g., mm-label="Headline"

You have flexibility over what a module should be: a self-contained <table>, <div>, or a <tr>.

Example:

<table bgcolor="#FFFFFF" width="600" cellpadding="0" cellspacing="0" border="0" class="wrapper" role="presentation">
  <tr>
    <td class="mobile-padding" align="center" valign="top" style="padding: 32px 0 10px 0;">
      <h1 mm-editable="" mm-label="Title Text" style="color:#000000; font-family: Arial, sans-serif; font-size: 38px; letter-spacing: 2px; font-weight: 400;">TITLE TEXT</h1>
    </td>
  </tr>
  <tr>
    <td class="mobile-padding" align="center" valign="top" style="padding: 0 0 32px 0;">
      <p mm-editable="" mm-label="Subtitle Text" style="color:#000000; font-family: Arial, sans-serif; font-size: 13px; letter-spacing: 2px">SUBTITLE TEXT</p>
    </td>
  </tr>
</table>

Any fields marked with mm-editable will appear in the sidebar when editing campaigns.

See the Full Tag Reference for all available attributes.

---

Step 5: Create a campaign

Campaigns are where your team builds emails by selecting modules and filling in content. No HTML editing required.

1. Click the Modular Mail logo at the top left to return to your workspace
2. Click Campaigns in the navigation
3. Click New Campaign
4. Select the template you created earlier
5. Enter a campaign name (e.g., “January Newsletter” or “Spring Sale Announcement”)

---

Step 6: Build your email

Your team assembles campaigns by selecting modules and filling in content fields. The template structure stays protected.

1. Click Add Module to insert a content block (the module sidebar opens automatically)
2. Drag the module to reorder, or start editing content right away
3. Update text, images, and links using the editable fields in the sidebar
4. Changes save automatically—watch the save status indicator in the toolbar

Tip: Use Cmd+Z (Mac) or Ctrl+Z (Windows) to undo any mistake. See Version History for more on undo/redo and restoring previous versions.

---

Step 7: Preview and export

Before exporting, check how your email looks across devices.

1. Use the device toggles to preview at desktop, tablet, and mobile resolutions
2. Click Export when everything looks right
3. Download the HTML file
4. Upload to your email service provider