Guide to the Advanced Email Template Editor

Overview

The Advanced email editor delivers a modern, intuitive, and highly flexible email-building experience. Built for enterprise-level needs, it provides a cleaner information structure, smoother interactions, and extensive styling options. This empowers you and your teams to create professional, brand-aligned emails without relying on developers. 

How to access the advanced email editor

There are two ways to access the advanced email editor, depending on your workflow:

1. Editing an email in a flow

If you’re editing an existing flow or creating a new one for email notifications, navigate to Notifications > Flow > Edit Flow > Send Email > Edit.

2. Editing an email template

If you're working directly with an email template, go to Notifications > Email Templates > Edit.

• By default, the editor you’re currently using for the notification (whether you’re editing a flow or template) will open automatically. If you’re creating a new flow or email template from scratch, the drag-and-drop email editor will be applied by default.
• To switch to the advanced editor, click the two opposite-facing arrows icon at the top to expand the dropdown, then select Advanced Email Editor.
• Click Switch to transfer any saved content from the previous editor to the new one. The advanced email editor will then open.

Editor layout and structure

1. Top bar: Contains the Editor switcher, Save the changes, Save as Template, Cancel, and Send Test Emails options.

• Device preview: Toggle between desktop and mobile views to view how the email would look on both the devices. To switch back to the editing mode, click the arrow button (Edit mode) to continue editing the email template.
• Undo/Redo: Track changes and revert actions.

2. Left sidebar: Contains Blocks, Layers, Style, and Settings for the email template.
3. Canvas: The main editing area where you build your email.
4. Properties panel (Right Sidebar): The right sidebar for configuring the properties like Page color, background of the selected blocks.

Core interactions and operations

About Layouts and Elements

When you open the Advanced email template editor, the sidebar will display a selection of elements and layout options to choose from. Choose between basic blocks, which are blank slates used to build emails from scratch, and pre-built content, which is content you’ve built in other templates and saved for later use. 

In the Basic section, you’ll find a selection of both elements and frames. Use elements to add content, like text, images, or buttons. Use layouts (i.e., frames and columns) to group your elements and configure them. 

Elements and layouts can be cloned, deleted, or saved using the icons that appear when you hover over the block or section. 

Adding blocks

1. Drag from Sidebar: Drag blocks from the "Left Sidebar" to the canvas.

2. Insert in the Canvas: Hover over a block on the canvas, click the {...} icon on the right side, and select Insert block before or Insert block after from the menu.

Editing blocks

1. Selecting: Click to select individual blocks and apply changes to the selected block.

• Copy:

a. Duplicate blocks by clicking the copy icon in the toolbar.

b. Use Ctrl + C and Ctrl + V keyboard shortcuts.

• Edit Content:

a. Edit the content directly within the canvas.

b. Edit additional properties in the Properties panel.

• Delete:

a. Click the delete icon in the toolbar.

b. Remove blocks using the delete key.

• Reorder: Drag blocks within the canvas to reorder them.
• Edit visibility: Select which devices (mobile, desktop) this block will display on.
• Select Parent: Click the parent selection icon in the toolbar to select the parent container of the current block.

Editing email page background

1. Selecting: Click on the background area outside the email body in the canvas (in the above screenshot, the grey area around the email body is the email page background)

• Background options: On the right sidebar, under Email page, you can configure the following actions for the email page.

a. Customize the email page's background color.

b. Upload an image as the background.

• Image placement options:

a. Original Size: Displays the image at its actual dimensions without scaling.

b. Fill: Stretches the image to cover the entire background area.

c. Fit: Resizes the image to fit within the background area, maintaining the aspect ratio.

d. Tile: Repeats the image horizontally and vertically to create a patterned effect.

• Image position:

a. 9-Point Grid: Click on dots to position the background image (top-left, center, bottom-right, etc.).

b. Purpose: Control how the background image aligns within the email canvas.

Core concepts

1. Layout

The layout is the structural foundation of your email, defining how content is arranged to create a cohesive visual hierarchy.

Frame → (Horizontal Frame) arranges elements in neat side-by-side columns, while Frame ↓ (Vertical Frame) gathers them into a clean top-to-bottom stack of rows.

1. Frame → (Horizontal Frame):

a. Purpose: Organizes content side-by-side in columns, creating horizontal layouts.

b. Visual Effect: Divides space horizontally, allowing multiple blocks to sit next to each other in a row.

c. Common Use Cases:

• Multi-column layouts (2, 3, or 4 columns).
• Header sections with a logo and navigation side-by-side.
• Product showcases with images and descriptions in columns.

We provide pre-built 2-column, 3-column, and 4-column layouts based on the Frame → capability that can be used directly.

2. Frame ↓ (Vertical Frame):

a. Purpose: Stacks content vertically in rows, creating vertical layouts with consistent spacing.

b. Visual Effect: Organizes blocks in a vertical sequence with controlled spacing between each element.

c. Common Use Cases:

• Maintains consistent vertical rhythm throughout the section.
• Builds content hierarchies with controlled vertical spacing.

2. Container

A block's parent container is determined by its placement. By default, this is the email body. When placed inside a frame, the frame becomes the block's parent container.

3. Space control

Margin vs. Padding:
Margin refers to the space outside an element’s border.
Padding refers to the space inside the border, between the border and the element’s content.

Margin vs. Spacing:
Margin affects the space around a single element (we provide options for top and bottom margins; use “spacing” if you need left or right separation).
Spacing controls the space between multiple elements within the same container, that is, the distance between sibling elements.

1. Margin:

• Purpose: Space outside a block, creating breathing room between blocks.
• Visual Effect: Creates invisible "breathing room" around blocks.
• Controls:

a. Top Margin: Space above the block.

b. Bottom Margin: Space below the block.

2. Padding:

• Purpose: Space inside the block, controlling the internal spacing within a container.
• Visual Effect: Creates visible space that affects how content sits within its container.
• Controls:

a. Top Padding: Space between the top border and content.

b. Right Padding: Space between the right border and content.

c. Bottom Padding: Space between the bottom border and content.

d. Left Padding: Space between the left border and content.

3. Spacing:

• Purpose: Space between blocks or columns within a container.
• Controls:

a. Element Spacing: Space between child elements within a container (e.g., text links, social links).

b. Column Spacing: Space between columns in horizontal frames.

c. Row Spacing: Space between rows in vertical frames.

4. Visual Effect: Creates breathing room between related content elements.

4. Layout

Position vs. Alignment
Position determines where a block sits within its parent container.
Alignment determines how content is arranged inside a container.

They can sometimes produce similar visual results, but they operate from different angles, one adjusts the container itself, while the other adjusts the content within it.

1. Position:

• Definition: Controls how a block is positioned within its parent container.
• Options:

a. Left: Aligns the block to the left side of its container.

b. Center: Centers the block horizontally within its container.

c. Right: Aligns the block to the right side of its container.

• Purpose: Determines the horizontal placement of blocks
• Usage: Use this option to control block alignment within frames and containers.

2. Alignment:

• Definition: Controls how content is positioned within a container.
• 9-Point Grid System:

a. Top Row: Top-left, Top-center, Top-right.

b. Middle Row: Middle-left, Center, Middle-right.

c. Bottom Row: Bottom-left, Bottom-center, Bottom-right.

• Purpose: Fine-tune content positioning within a container.
• Usage: Click on grid dots to position content precisely within blocks.

Editor overview

1. Blocks

Basic blocks

2. Layers

The Layers panel shows the hierarchical structure of your email content, allowing you to manage the organization of your blocks.

Layer management

• View structure: See all blocks in a tree-like hierarchy.
• Reorder blocks: Drag blocks in the layers panel to reorder them.
• Select blocks: Click on layer items to select the corresponding blocks.
• Block visibility: Icons will appear in the layer if you've hidden that block on a certain device.

3. Template style settings (Global)

Style hierarchy and priority

• Global settings: Apply to all defined elements of a particular type across the email.
• Individual block settings: Override global settings for specific blocks.
• Application: Blocks inherit global styles by default but can be customized individually.
• Consistency: Global styles ensure design consistency while allowing for exceptions when needed.

Branding global style

These settings control the default appearance of text and fonts across your email template. Anything configured here becomes the default style for all elements unless individually configured.

a. Color:

• Default text color: Set the default color for all text elements.

b. Fonts:

• Default font:

Font selection: Choose the primary font family.

Management: Use the "Manage" button to manage your custom fonts.

• Application: Set the default font for all text elements..

Blocks global style

These settings let you define default styles for specific block types, like buttons or dividers. Instead of adjusting each one manually, you set the default design here and all blocks of that type will follow it.

a. Buttons:

• Background color: Set the background color of buttons.
• Border color and width: Choose the border color for buttons. Adjust the border thickness.

b. Text:

• Font: Select the font family for button text.
• Font size: Set the button text size.
• Color: Define the button text color.

c. Shape: Edit the corner radius. Control the roundness of button corners.

d. Divider:

• Background color: Set the background color of dividers.

e. Thickness:

Color: Set the stroke color of dividers.

Width: Set the stroke width of dividers.

Settings (Global)

a. Email name: Internal reference name for your email (not shown to customers).

b. Email subject: The subject line that appears in recipients' inbox.

c. Preview text: Text displayed directly after the subject line in email clients to provide additional context and encourage email opens.

d. Sender info:

• Sender: Pre-configured sender email and sender name.
• Reply-to email:

Same as sender: Recommended option for better delivery rates.

Another email: Alternative reply-to address (may impact delivery rate).

Limitations and considerations

The truth about how emails actually render

Web browsers tend to follow modern standards pretty consistently but email clients are a completely different story. Each one has its own level of support (or lack of support) for common design features. So even though our editor lets you use things like custom fonts and rounded corners, not every email client will display them the same way.

• What this means in practice: The email you design is just the starting point. Once it’s opened, every email client (Apple Mail, Gmail, Outlook, mobile apps, etc.) interprets that design differently. A layout that looks perfect in Apple Mail may look stripped down or plain in Gmail or Outlook.

Features that often need extra attention

1. Outlook

• Fonts: Outlook generally sticks to “web-safe” fonts like Arial, Times New Roman, and Georgia. Custom fonts won’t load.

Impact: Your text will default to a fallback font.

• Border radius (rounded corners): Outlook on Windows and Windows Mail does not support border radius.

Impact: Rounded corners will turn into sharp 90° corners.

• Background images: Also not supported in Outlook Windows and Windows Mail.

Impact: Only the fallback background color appears.

• GIFs: Outlook Windows doesn’t animate GIFs.

Impact: Only the first frame shows with no support for animation.

2. Gmail

• Fonts: Like Outlook, Gmail only supports basic web-safe fonts. Custom fonts don’t load.

Impact: Text will fall back to standard fonts.

• Long email folding: Gmail has a message length limit.

Impact: Longer emails may get cut off with a “View more message” prompt.

If you want to explore the capabilities of specific email clients in detail, this tool is helpful: https://www.caniemail.com/clients/

Updated on: 25/11/2025