Email Builder

Builder Overview

The MailPilot email builder lets you design professional-looking emails without any technical knowledge. Simply drag content blocks onto your canvas, customize them, and preview how they'll look on different devices.

Getting Started

To access the email builder:

1. Create a new campaign or open an existing one
2. Click Design Email
3. Choose to start from a template or create from scratch
4. The builder will open with your canvas ready

Builder Interface

The email builder is divided into three main areas:

Left Sidebar - Content Blocks

Contains all the building blocks you can add to your email. Simply drag them onto the canvas to use them.

Center Canvas

Your email design area. This is where you arrange and customize blocks. What you see here is very close to how your email will look in inboxes.

Right Panel - Block Settings

When you click on any block, its settings appear here. You can customize colors, fonts, spacing, alignment, and more.

Content Blocks

MailPilot offers a variety of content blocks to build your emails:

Text Block

Add paragraphs, headings, or any text content. Features include:

• Rich text formatting (bold, italic, underline, lists)
• Multiple heading levels (H1-H6)
• Font family and size selection
• Text color and background color
• Alignment (left, center, right, justify)
• Line height and letter spacing
• Padding and margins

Image Block

Add images to your emails:

• Upload from your computer
• Choose from your media library
• Insert from URL
• Adjust width (full width, custom pixels, or percentage)
• Add alt text for accessibility
• Add a link destination
• Adjust alignment and spacing

Button Block

Add call-to-action buttons:

• Customize button text
• Set link URL
• Choose button color and text color
• Adjust button size and padding
• Set border radius for rounded corners
• Add border styles
• Choose alignment (left, center, right)

Divider Block

Add horizontal lines to separate sections:

• Solid, dashed, or dotted line styles
• Customize color and thickness
• Adjust width and alignment
• Control spacing above and below

Spacer Block

Add vertical space between blocks:

• Drag to adjust height
• Enter exact pixel height
• Useful for creating breathing room in your design

Social Media Block

Add social media icons that link to your profiles:

• Choose from popular platforms (Facebook, Twitter, Instagram, LinkedIn, YouTube, etc.)
• Add custom social links
• Select icon style (colored, monochrome, outline)
• Adjust icon size and spacing
• Set alignment

Video Block

Embed videos with clickable thumbnail images:

• Add YouTube or Vimeo URL
• Automatically generates thumbnail
• Links to video when clicked (opens in browser)
• Add play button overlay
• Adjust thumbnail size

Columns Block

Create multi-column layouts:

• 2, 3, or 4 column layouts
• Drag blocks into each column
• Automatically stacks on mobile devices
• Adjust column width ratios
• Set gap between columns

Header Block

Pre-designed header sections with logo and navigation:

• Add your logo
• Customize background color
• Add navigation links (optional)
• Adjust height and padding

Footer Block

Pre-designed footer with required elements:

• Automatically includes unsubscribe link (required by law)
• Add your company address
• Social media icons
• Copyright text
• Customize colors and fonts

Using Templates

Templates are pre-designed email layouts that you can customize to match your brand.

Choosing a Template

1. When opening the email builder, click Browse Templates
2. Browse by category (Newsletter, Promotional, Announcement, etc.)
3. Preview templates by hovering over them
4. Click a template to start customizing

Template Categories

• Newsletter: Perfect for regular content updates
• Promotional: Sales, discounts, and special offers
• Announcement: Product launches, news, and updates
• Welcome Series: Onboard new subscribers
• E-commerce: Product showcases and cart abandonment
• Event: Webinar invitations and event reminders

Saving Your Own Templates

After designing an email you're proud of:

1. Click the menu icon in the builder toolbar
2. Select Save as Template
3. Give your template a name and optional description
4. Choose a category
5. Click Save

Your saved templates will appear in the template library for quick reuse in future campaigns.

Personalization & Merge Tags

Make your emails feel personal by including subscriber-specific information using merge tags.

Using Merge Tags

Merge tags are placeholders that get replaced with actual subscriber data when the email is sent. To add a merge tag:

1. Click in a text block where you want to add personalization
2. Click the Merge Tag button in the text editor
3. Choose from available fields
4. The tag will be inserted in the format {'{'}field_name{'}'}

Available Merge Tags

• {'{'}first_name{'}'} - Subscriber's first name
• {'{'}last_name{'}'} - Subscriber's last name
• {'{'}email{'}'} - Subscriber's email address
• {'{'}phone{'}'} - Subscriber's phone number
• Any custom field you've created (e.g., {'{'}company_name{'}'})

Default Values

If a subscriber doesn't have a value for a merge tag, you can set a fallback:

This would output "Hi John" if the name exists, or "Hi there" if it doesn't.

Mobile Preview

Over 50% of emails are opened on mobile devices, so it's crucial to check how your email looks on small screens.

Switching Views

Use the device toggle buttons in the builder toolbar:

• Desktop view: Shows email at full width
• Tablet view: Medium-width preview
• Mobile view: Narrow mobile phone width

Mobile Optimization Tips

• Use larger font sizes (at least 14px for body text)
• Make buttons at least 44px tall for easy tapping
• Keep important content and CTAs in the top half
• Avoid narrow columns that become too small on mobile
• Test all links to ensure they're tappable

Global Styling

Set consistent styles across your entire email:

Email Settings

Click the Settings button in the toolbar to access global options:

• Background color: Color behind your email content
• Content width: Maximum width of email body (typically 600px)
• Content background: Background color of email content area
• Font family: Default font for all text
• Text color: Default text color
• Link color: Color for all hyperlinks

Importing HTML

If you have an existing HTML email template, you can import it:

1. In the email builder, click Import HTML
2. Paste your HTML code or upload an HTML file
3. Click Import
4. MailPilot will convert it to editable blocks

Testing Your Email

Before sending to your list, always test your email:

Send Test Email

1. Click Send Test in the builder toolbar
2. Enter one or more email addresses (comma-separated)
3. Click Send Test Email
4. Check your inbox and verify:
   • All images load correctly
   • Links go to the right destinations
   • Personalization works (use a test subscriber with data)
   • Layout looks good in your email client
   • Subject line and preview text are correct

Preview Mode

Click Preview to see your email in a simulated inbox view without sending.

Email Design Best Practices

• Keep it simple: Focus on one main message or call-to-action
• Use hierarchy: Clear headings, subheadings, and body text
• White space: Don't cram too much content; let it breathe
• Contrast: Ensure text is readable against backgrounds
• CTA placement: Make buttons prominent and above the fold
• Brand consistency: Use your brand colors, fonts, and logo
• Image-to-text ratio: Use more text than images (60/40 split is good)
• Accessibility: Add alt text to images and use sufficient color contrast