Skip to main content

​
Creating Custom HTML Templates

For developers and designers who want complete control, MailGreet’s HTML Editor provides full HTML/CSS capabilities with syntax highlighting, live preview, and variable support.

​
When to Use HTML Editor

Use HTML Editor For

  • Complex custom designs
  • Importing external templates
  • Pixel-perfect layouts
  • Advanced CSS styling
  • Developer-controlled emails

Use Block Builder For

  • Quick email creation
  • Non-technical users
  • Standard layouts
  • Easy editing by team
  • Mobile-responsive defaults

​
Creating an HTML Template

1

Go to Templates

Navigate to Templates in the sidebar
2

Click Create Template

Click the green Create template button
3

Select HTML Editor

Choose HTML Editor from the three format options:
  • Block-Based Editor (Recommended)
  • HTML Editor ← Select this
  • Plain Text
4

Enter Template Details

Fill in the template information:
  • Template Name — A descriptive name
  • Description — Purpose of the template
  • Category — Newsletters, Marketing, Events, Transactional, or Custom
5

Create Template

Click Create Template to open the HTML Editor

​
HTML Editor Interface

The HTML Editor provides a split-screen workspace:
PanelLocationPurpose
Code EditorLeftWrite and edit HTML code
Live PreviewRightSee real-time rendering
Top BarTopSubject, preheader, and actions

​
Top Bar Fields

Subject Line

The email subject line that appears in inboxes

Preheader

Preview text shown after the subject line

​
Editor Features

  • Syntax Highlighting — Color-coded HTML/CSS for readability
  • Line Numbers — Easy navigation for debugging
  • Auto-Indent — Clean, organized code
  • Live Preview — Instant visual feedback as you code

​
Writing Email HTML

​
Basic Template Structure

Start with this responsive email boilerplate: 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>{{subject}}</title>
  <style>
    /* Reset styles */
    body { margin: 0; padding: 0; }
    table { border-collapse: collapse; }
    img { border: 0; display: block; }
    
    /* Container */
    .email-container {
      max-width: 600px;
      margin: 0 auto;
      background: #ffffff;
    }
  </style>
</head>
<body style="background-color: #f4f4f4;">
  <table role="presentation" width="100%" cellpadding="0" cellspacing="0">
    <tr>
      <td align="center" style="padding: 20px;">
        <table class="email-container" role="presentation" width="600" cellpadding="0" cellspacing="0">
          
          <!-- Header -->
          <tr>
            <td style="padding: 20px; text-align: center;">
              <img src="YOUR_LOGO_URL" alt="Logo" width="150">
            </td>
          </tr>
          
          <!-- Content -->
          <tr>
            <td style="padding: 30px;">
              <h1 style="font-family: Arial, sans-serif; color: #333;">
                Hello, {{first_name}}!
              </h1>
              <p style="font-family: Arial, sans-serif; color: #666; line-height: 1.6;">
                Your email content goes here.
              </p>
              <a href="YOUR_CTA_LINK" style="display: inline-block; padding: 12px 24px; background: #16A34A; color: white; text-decoration: none; border-radius: 5px;">
                Call to Action
              </a>
            </td>
          </tr>
          
          <!-- Footer -->
          <tr>
            <td style="padding: 20px; text-align: center; font-size: 12px; color: #999;">
              <p>© 2026 Your Company. All rights reserved.</p>
              <a href="{{unsubscribe_link}}" style="color: #999;">Unsubscribe</a>
            </td>
          </tr>
          
        </table>
      </td>
    </tr>
  </table>
</body>
</html>

​
Using Variables

Insert personalization variables anywhere in your HTML:
VariableDescription
{{first_name}}Subscriber’s first name
{{last_name}}Subscriber’s last name
{{email}}Subscriber’s email address
{{unsubscribe_link}}Required unsubscribe URL
{{custom_field}}Any custom field you’ve created
Always include {{unsubscribe_link}} in your HTML templates. This is required for email compliance.

​
Importing External HTML

Have an HTML template from another source? Import it easily:
1

Create New Template

Start a new HTML template as described above
2

Clear Default Content

Select all code in the editor and delete it
3

Paste Your HTML

Paste your external HTML code into the editor
4

Add Variables

Replace static content with MailGreet variables where needed
5

Test Preview

Check the live preview to ensure proper rendering

​
Exporting Templates

​
Export as HTML

Click Export HTML to download the raw HTML file for use elsewhere.

​
Export as Template JSON

Export the complete template configuration for:
  • Backup purposes
  • Sharing with team members
  • Moving between MailGreet accounts

​
HTML Email Best Practices

Email clients have inconsistent CSS support. Use <table> elements for reliable layouts, not <div> or flexbox.
Many email clients strip <head> styles. Use inline CSS on elements:
<p style="font-family: Arial; color: #333;">Text</p>
Most email clients display best at 600px width. Use max-width: 600px for your container.
Images are often blocked by default. Add descriptive alt attributes:
<img src="..." alt="Product image showing our new feature">
JavaScript is stripped by all email clients. Never rely on JS for functionality.
Stick to web-safe fonts (Arial, Georgia, Times New Roman) or use font stacks with fallbacks.

​
Testing Your Template

Before using in campaigns:
1

Check Live Preview

The right panel shows how your email renders
2

Test on Mobile

Resize your browser to check responsive behavior
3

Send Test Email

When used in a campaign, send a test to yourself
4

Check Multiple Clients

View in Gmail, Outlook, Apple Mail, etc.

​
Common Issues & Solutions

IssueSolution
Layout breaks in OutlookUse table-based layout with mso- conditional comments
Images not showingUse absolute URLs, not relative paths
Fonts look differentUse web-safe fonts with proper fallbacks
Background images not workingMany clients don’t support CSS background images
Styles being strippedInline all CSS, don’t use external stylesheets

Block Editor

No-code visual editor alternative

Template Library

Browse and manage templates

Testing Campaigns

Test before sending

Create Campaign

Use templates in campaigns