Creating Your First Email

This guide walks you through the detailed steps of creating an email template in Email Love Builder, from choosing your starting point all the way to previewing your finished design.

​

Navigate to Your Project

Before you can create an email, you need to be inside a project (projects are folders that hold your email templates).

1. From your workspace dashboard, click Projects in the left sidebar
2. Click on the project where you want to create your email
   • If you haven’t created a project yet, see Getting Started for instructions
3. You’re now inside your project. You’ll see any existing templates listed, plus a New Email button

​

Click “New Email”

To start creating a new template:

1. Click the New Email button (top right of your project)
2. A dialog box will appear asking you to choose your starting point

This is one of the most important decisions, so let’s break it down.

​

Choose Your Starting Point

​

Name Your Template

Once you’ve chosen your starting point:

1. A text field will appear asking for your template name
2. Enter a descriptive name (examples: “Welcome Email”, “Order Confirmation”, “Weekly Newsletter”, “Black Friday Sale”)
3. Optionally add a description if you want to help your team understand the template’s purpose
4. Click Create

The editor will now open with your new template.

​

Meet the Editor

The Email Love Builder editor is designed to be intuitive while giving you powerful customization options. Here’s your orientation:

​

Left Panel: Elements

This panel contains everything you can add to your email:

• Layouts: Pre-designed multi-column structures (if starting from scratch)
• Basic Elements: Text, images, buttons, dividers, spacers, lines, and more
• Components: If you’re using a design system, branded components will appear here
• Search: Use the search bar to quickly find specific elements

How to use it:

• Simply drag any element from the left panel onto your canvas
• Elements will be placed where you drop them
• You can drag multiple copies of the same element if needed

​

Center: Canvas

This is your email. Everything you see here is a live preview:

• The canvas shows your email at actual width (typically 600px for email width)
• This is the visual representation of what your recipients will see
• Click on any element to select it
• You can see how your design looks as you build it
• Use the zoom controls (bottom right) to zoom in/out if needed

​

Right Panel: Properties

When you select an element, the properties panel appears on the right:

• Design Properties: Colors, backgrounds, borders, shadows, etc.
• Typography: Font family, size, weight, line height, text alignment
• Spacing: Padding and margin controls
• Layout: Width, height, alignment, positioning options
• Advanced: Conditional logic, dynamic content, and other advanced features
• Context: Element-specific settings (for example, buttons show “Link” and “Text” settings)

Properties change depending on what element is selected. A text block will show text-specific options, while an image will show image-specific options.

​

Top Toolbar

The top of the editor contains essential controls:

• Back: Return to your project
• Template Name: Shows your template’s name; click to rename it
• Save: Manually save (templates auto-save, but you can force a save)
• Preview: See how your email looks across devices and email clients
• Publish: Share or export your template (depending on your integrations)
• More Options: Duplicate, delete, or access advanced settings
• Account Menu: Workspace settings, billing, and account options

​

Start Building

Now you’re ready to design! Here’s a basic workflow:

1. Add elements by dragging them from the left panel onto your canvas
2. Arrange elements by dragging them around the canvas, or use alignment controls in the right panel
3. Customize appearance by selecting an element and editing its properties on the right
4. Use your design system components (if applicable) to maintain brand consistency
5. Preview frequently to see how your email looks on different devices

​

Saving Your Work

Good news: Email Love Builder saves your work automatically. You don’t need to worry about losing your progress. That said:

• You can manually save at any time by clicking Save or pressing Ctrl+S (Windows) / Cmd+S (Mac)
• The save icon shows you when there are unsaved changes
• Your version history is automatically maintained (see your template’s settings to view previous versions)

​

Preview Your Email

Before you’re done, it’s important to preview your email on different devices:

1. Click the Preview button in the top toolbar
2. You’ll see how your email looks on:
   • Desktop: Full-width view (typically 600px)
   • Mobile: Mobile-width view (typically 320px)
   • Different email clients: Gmail, Outlook, Apple Mail, and others
3. Make adjustments in the editor if needed
4. Click Close Preview to return to editing

​

Next Steps

Congratulations! You’ve created your first email template. Here’s what to do next:

• Explore Editor Features: Read our Editor Guide to learn about responsive design and advanced customization
• Build a Design System: If you haven’t already, set up a Design System to save time and maintain consistency
• Connect an Email Platform: Check out Integrations to export templates to Braze, Iterable, or Marketo
• Invite Your Team: Use Team Management to collaborate with colleagues
• Import from Figma: If you have designs in Figma, use the Figma plugin to bring them into Email Love Builder

You’re all set. Happy building!