Visual Editor

Overview

The visual editor lets you design email templates without writing code. Build layouts, add content, and style elements—all with instant preview.

Editor Interface

The editor has three main areas:

1. Canvas - The center area where you build your email
2. Properties Panel - The right panel for editing selected elements
3. Preview - Toggle between edit and preview modes

Adding Content

Text Blocks

Click anywhere in a section to add text. The editor supports:

• Bold and italic formatting
• Links
• Lists (bullet and numbered)
• Headings

Use the formatting toolbar that appears when you select text.

Images

To add images:

1. Click the image placeholder or add an image block
2. Enter the image URL
3. Set alt text for accessibility
4. Adjust width and alignment in properties

Images are automatically responsive and email-client safe.

Buttons

Buttons are call-to-action elements:

1. Add a button block
2. Enter the button text
3. Set the link URL
4. Style with background color, text color, and border radius

Layouts

Create multi-column layouts:

1. Add a layout block
2. Choose columns (1, 2, or 3)
3. Add content to each column

Columns stack vertically on mobile automatically.

Working with Sections

Sections are the building blocks of your email:

• Header - Logo, navigation
• Content - Main message
• Footer - Unsubscribe links, address

Adding Sections

Click between existing sections to insert a new one.

Reordering Sections

Drag sections to reorder them.

Section Backgrounds

Set background colors in the properties panel:

1. Select a section
2. Click the background color picker
3. Choose a color or enter a hex value

Properties Panel

When you select an element, the properties panel shows:

• Style - Colors, fonts, spacing
• Layout - Width, alignment, padding
• Content - Text, URLs, alt text

Using Variables

Add dynamic content with variables:

Hello {{firstName|there}}!

Variables use the syntax {{name|default}}:

• name is the variable name
• default is shown if no value is provided

See Using Variables for more details.

Preview Mode

Click Preview to see how your email will look:

• Desktop - Full-width preview
• Mobile - Narrow viewport simulation

Preview reflects your actual content and variables (with defaults).

Keyboard Shortcuts

Email Client Compatibility

The editor generates HTML compatible with:

• Gmail (web and mobile)
• Apple Mail
• Outlook (desktop and web)
• Yahoo Mail
• And many others

You don’t need to worry about email client quirks—mailshit handles them for you.

Tips for Better Emails

1. Keep it simple - Single-column layouts work best
2. Use system fonts - Arial, Helvetica, Georgia for reliability
3. Size images appropriately - 600px max width
4. Test on mobile - Always preview mobile view
5. Add alt text - For images that might not load
6. Use buttons over links - Higher click-through rates