Updated Editor User Interface

Print Friendly and PDF Follow

Our Updated Editor enables efficient email template creation:

  • The User Interface is more intuitive and user-friendly. You can create email templates quickly and easily with its drag-and-drop interface. 
  • You can design great email templates for all devices, including desktops, tablets, and mobile phones. This ensures that your emails are accessible to your audience, regardless of device. 
  • The editor enables the creation of templates compatible with all major email service providers. 

 User Interface Layout

 

The UI can be divided into the following 4 components:

1. Email Content (Body)

The Email content area is the main area of the editor where users can drag and drop design elements to create their email templates. Before adding design elements, the initial email content can be customized for size, color, and background image.  To learn more about the customization see Email Content Customization.

Positioning Selected Elements

When you drag a new element, you can place it in an existing block or create a new block above or below the existing block. A block is a container element that the system uses as the base container for all other elements when added.


When you drag an element onto the box element, you can position the element in a box. You can place the element on the top, bottom, left, or right.

Breadcrumbs

In the Updated Editor, the Breadcrumbs feature is located at the top of the email content and shows the hierarchy of the design elements in the email template.

As you add design elements to the email content, the Breadcrumbs feature updates to reflect the current selection and the elements that contain it. This can be useful when working with complex email templates that have many design elements and layers.

By clicking on the elements in the Breadcrumbs, you can quickly navigate to a specific design element in the template without having to manually search for it in the email content. This can save time and help streamline the design process.

Additionally, the Breadcrumbs feature in the Updated Editor can be used to select parent elements and easily edit their properties. This can be done by clicking on the parent element in the Breadcrumbs, which will automatically select it in the email content and display its properties in the Details Panel.

2. Sidebar

The Sidebar is located on the left side of the editor and contains all the design elements and components that can be added to the email template. This includes the Content Elements, Structure Elements, Dynamic Content (Loop), and Favorite Blocks.

To learn more about the design elements, click the following links:

3. Details Panel

The Details Panel is located on the right side of the editor and allows users to customize the selected design element or component. Users can change each element or component's size, font, color, alignment, and other properties.

Note: The panel options change according to the selected design element. To learn more about the properties applied to the design elements refer to Building Email Structure and Building Content.

 

4. Top Menu

The menu is located on the top right of the UI and, includes the following options: 

  • Undo, Redo buttons: Revert changes or redo changes. Changes can be reverted or redone for as long as the editor is open.
  • Save: Save changes. The system will auto save changes every 2 to 3 minutes as well.
  • Zoom Functionality: You can zoom in and out of the screen with 25% increment options. You can zoom out to 50% screen size and zoom in to a maximum of 200%.
  • More Options: Under this menu, you have the Choose Template and Save and View options.
  • Send Preview: You can send a preview email.
  • Exit: Exit out of the template. You will get a warning if the changes are not saved.