The Visual Editor is the heart of Email Love Builder, a powerful drag-and-drop interface that lets you build professional email templates without writing code. This guide covers everything you need to know to create, customize, and organize your email designs.
Left Panel: Element Palette
The left panel displays all the building blocks available for your template. What you see depends on your setup.
Using a Design System
When your workspace is connected to a design system (EDS, Email Design System), the left panel shows:
EDS Components Pre-built, consistent components organized by category:
- Header: Logo, navigation, and header elements
- Content: Text blocks, images, callout boxes, and more
- CTA: Call-to-action buttons in various styles
- Footer: Footer links, contact info, and legal text
- Container: Structural elements for layout and spacing
- Styles: Text styles, color swatches, and typography presets
Layouts Pre-designed template structures you can use as a starting point (single column, two-column, three-column, etc.).
Using a design system ensures consistency across all your templates and speeds up the design process significantly.
Starting from Scratch
If you're building a template without a design system, the left panel shows:
Layouts Basic template structures to jumpstart your design.
Basic Elements Fundamental building blocks like text, images, buttons, dividers, spacers, and containers. These give you complete control to build custom designs from the ground up.
Dragging Elements onto the Canvas
Adding elements to your template is simple:
- Click on an element in the left panel
- Drag it onto the canvas (the center white area)
- Drop it where you want it to appear
- The element is automatically added to your template
As you drag, you'll see a preview of where the element will land. Drop zones are highlighted to help you place elements exactly where you want them. You can drag elements to reorder them, and dragging between sections creates new structure.
Selecting and Customizing Elements
To edit an element, simply click it on the canvas. When selected, the element will show a blue border or highlight, and its properties will appear in the right panel.
Nested Selection
If elements are stacked, you might need to click multiple times to select the one you want. The first click selects the container, the next click selects the nested element inside it, and so on.
Multi-Select
You can select multiple elements at once by holding Shift or Command (Mac) / Ctrl (Windows) and clicking. This lets you move, copy, or delete multiple elements together.
Right Panel: Element Properties
The properties panel on the right shows all customization options for the selected element. Available properties vary by element type, but typically include:
Common Properties
Text Content Edit the text that appears in text blocks, buttons, and other text-based elements. You can apply basic formatting like bold and italic.
Colors
- Text Color: Change the color of text
- Background Color: Set the background of an element
- Border Color: Add and customize element borders
- Button Color: For CTAs, set the button background and text color
When a design system is active, you'll see predefined color swatches that maintain brand consistency.
Spacing
- Padding: Add space inside the element (between content and edge)
- Margin: Add space outside the element (between this element and others) Adjust spacing independently for top, right, bottom, and left, or set all sides at once.
Fonts and Typography
- Font Family: Choose from available fonts
- Font Size: Set the text size
- Font Weight: Make text bold or light
- Line Height: Control vertical spacing between text lines
- Text Alignment: Left, center, right, or justify
Images
- Upload/Replace: Choose an image from your files
- Alt Text: Add descriptive text for accessibility
- Image Width/Height: Control image dimensions
- Link: Make an image clickable
Links
- URL: Set the destination for links and buttons
- Open in New Tab: Control whether links open a new window
Advanced Properties
Some elements offer advanced options like:
- Border style and width
- Shadow effects
- Opacity/transparency
- Display conditions (show/hide based on rules)
Hover over any property label to see a tooltip with more information.
Section Locking
Workspace owners can lock specific sections of a template to protect important content from accidental changes. This is especially useful when:
- Multiple team members are editing the same template
- You want to enforce brand guidelines on certain sections
- You want editors to focus only on customizable areas
How to Identify Locked Sections
Locked sections display a lock icon next to the section name in the layers panel. Locked elements can still be viewed and previewed, but their properties cannot be edited.
Working with Locked Sections
- Locked elements: Click them to view their properties, but editing options are disabled
- Unlocked elements: Within a locked section, any unlocked elements can still be edited
- Contact your workspace owner: If you need to unlock a section, ask the workspace owner to adjust permissions
Locking is a powerful feature for maintaining template integrity while giving editors the freedom they need.
Working with Columns and Layouts
Email layouts typically use columns for horizontal organization. Email Love Builder makes working with columns intuitive.
Adding Columns
- Drag a Column element or Container onto the canvas
- The container shows available column configurations (1-col, 2-col, 3-col, etc.)
- Select your desired column layout
- Drag elements into each column to build your design
Resizing Columns
Click the divider between columns and drag to resize. You can make columns equal width or set custom proportions.
Nested Columns
Columns can contain other columns, letting you create complex, flexible layouts. For example, you might have a 2-column section with a 3-column subsection in one of the columns.
Mobile Responsiveness
Email Love Builder automatically handles responsive behavior on mobile devices. Most elements stack into a single column on mobile, but you can customize this behavior:
- Select a column or container
- Look for responsive options in the properties panel
- Set mobile-specific behavior (stack, hide, or adjust width)
Test your layout in Preview mode by toggling between desktop and mobile views to ensure it looks great on all screen sizes.
Tips for Success
- Use templates: Start with a layout template to save time and maintain structure
- Group related elements: Use containers to keep related content organized
- Test responsive views: Always preview on mobile to catch layout issues
- Leverage design systems: If available, use EDS components for consistency and speed
- Save frequently: While autosave protects you, use the Save button for peace of mind
- Lock sections: If working in a team, lock sections you want to protect
You're now ready to create beautiful email templates! Head over to the Previewing and Exporting guide to learn how to test and deliver your designs.