Overview - Using the Drag & Drop Email Builder

About the email builder

Our Drag & Drop Email Builder makes it easy to create beautiful messages that can be used to send all sorts of email campaigns: a company newsletter, announce a new product, promote a sale, etc.

It combines great ease of use with many features that give you full control on the design of your emails. Its drag & drop interface enables you to design a nice-looking message without any knowledge of HTML, and produces code that adapts automatically to small screens, such as that of a smartphone.

 

To get started, go to Assets > New Asset > Email Asset.

  • If you want to start a new email message from scratch, choose Start From Scratch.
  • If you need a starting point, you can double-click on any of pre-built email messages.

 

Rows vs. Content

For maximum design flexibility, the rows of the email message are separated from their contents. This means, for example, that you can have rows of content that use different designs for different sections of the message (e.g. full-width background colors, a different number of columns, etc.) without negatively impacting the responsiveness of the message on mobile devices.

 

The Canvas and Properties Panel

The Drag & Drop Email Builder is divided into two main areas: the main message editing stage on the left, and the properties panel on the right. In general, you will be dragging and dropping content elements onto the stage and then editing their properties. This is true for entire rowss (e.g. a single-column row) and individual content blocks (e.g. a text content block).

When it comes to images, you can drag & drop image files directly from your desktop onto an image content block. You can also upload them using the File Manager or use the URL of remotely hosted images.

The properties panel is divided into three sections:

  • Content
    This is where you will choose and edit the specific content elements that make up your message: buttons, images, text blocks, etc.
  • Rows
    Here you can select different structural elements (e.g. a single-column vs. three-column row) to organize your content.
  • Settings
    Here is where you will define some overall settings that affect the entire message. For example, a default font family.

 

Content

The Content tab allows you to choose a new content element and add it to your message. Just drag and drop a content element (a button, an image, a text block, a transparent or solid divider, social media sharing, etc.) in the message area on the left.

Content properties

Clicking on a content element inside the message will make the content panel switch to Content properties mode, so you can change the settings of that particular content block. If you click outside of a content element, instead, the row in which the content element is located will be selected and its properties will be available (more on this under Rows below).

The Content properties area changes depending on the content element that has been selected.

If you select a button, for example, you will see a number of tools to help you style the button and link it to your desired action (open a web page, send an email, make a phone call, etc.). In the example shown below, for instance, the “Gest the ticket” button has been selected.

The properties panel switches to button mode and allows you to set the button’s width, background color, text color, alignment, roundness of the corners, padding around the text, … you name it. When the properties panel is longer then the height of the screen, a scroll bar appears on the right side.

With buttons as well as many other content items, the editor gives you great control on the design of your email messages. Some of the controls, including Content padding and Borders have both a simple editing mode – where only one setting is shown – and an advanced editing mode, where more control is provided (e.g. specifying padding for the four sides of the object independently of each other).

Text editing

If you click inside a text content block, the text editor toolbar will appear directing on the editing stage. It gives you access to a number of text editing tools: font family, font size, basic formatting, text alignment, numbered and non-numbered bullets, font color, links, etc.

Note that if you set the font family to Global Font, it will inherit the font family selected under the SETTINGS tab. This allows you to change the font family for multiple elements at once just by changing that property in the Settings tab.

Content settings

The properties panel displays different controls depending on which content element you selected. Here is a description of some of the most frequently used ones.

Padding

Padding settings can be configured both for all sides of the selected element...

... or separately for each side.

Borders

Border settings can be configured both for all sides of the selected element...

... or separately for each side of a button, column, etc.

Spacers

Spacers help create visual separation between design elements. They can be transparent...

... or visible. Here too, granular control on padding provides great design flexibility.

Color memory

As you pick colors for fonts, background colors, etc., the editor will learn and remember them, making them quickly accessible to style future content elements.

 

Rows

The Rows panel includes different types of structural elements for your message. They allow you to create different sections of the message. Why different sections? Can’t you just have different content blocks within the same section? You can, but that won’t always work. Rows allow you to create a structured email where each row has different content than the one preceding it and following it.

For instance, you may need…

  • a single-column structure with a hero image to introduce your online store’s new promotion
  • a two-column structure below it to display some of the store’s best-selling products;

Whenever you need to switch to a different number of columns, that’s when you will introduce a new section by using the Rows panel.

 

Selecting a row will switch the properties panel to the row and column settings. The editor provides great flexibility and customization at both the row and column level.

To make message creation even easier and faster, you can clone entire rowss (for example, a picture, a button and a text block) with all of their settings and blocks. This allows what email designers call modular design: you create a module and then replicate it n times in the message.

Columns within rows

Settings at the column level within a row allow control on background color, padding and borders for the selected column.

Selecting rows and content

When you mouse over the message in the message editing area of the editor (the stage), the following happens...

  1. You mouse over a block of content (a button in the example below): the editor shows you an icon on the right side that allows you to drag that block of content elsewhere.

 

  1. You click on a block of content, and the editor will:
  • Show you two icons on the stage, which allow you to remove or clone that block of content.
  • Change the properties section on the right side of the editor to display a series of properties that you can set for that block of content.

 

  1. You mouse over an area that is free of content, i.e. the row in which the content is located. The editor will highlight it and show you an icon that allows you to drag that entire row elsewhere on the stage.

 

  1. You click on a row, and the editor will:
  • Deselect any block of content that had been previously selected.
  • Select the row, and show you two icons that allow you to remove or clone the entire row and all its content.
  • Change the properties section on the right side of the editor to display a series of properties that apply to that column within the row. A row can contain more than one column.

 

 

Settings

From this tab you can modify general settings that apply to the entire message:

  • Content area width: this is the width of the area where content blocks are dropped. According to email marketing best practices, it should typically be set to 600px or less. Please note that this is the maximum width that will be used on larger devices. When the device’s screen is smaller, the message will adjust automatically to it.
  • Background color: it's the message background color. This setting is effective only for rows (and columns) where a color has not been specified. Otherwise, the background color specified for that content row will be used.
  • Content area background color: it's the background color for the content area. This setting is effective only for rows and columns where a color has not been specified.
  • Default font: it's the default font that will be used when another font family has not been specificed. This setting affects all text set to use the global font.
  • Link color: it's the link color. As above, this setting affects all text links set to use the default color.

 

The file manager

What it does

The editor includes a built-in file manager. The file manager is the component that you will use to browse, search, and select the images and documents that you wish to use in your email message.

With the handy file manager you can:

  • Browse, search, and sort existing files
  • Import new files
  • Create folders
  • Preview and insert images into your message

How it looks

The file manager will open over the editor, covering the entire working area. This allows you to browse your files without worrying about your screen size or resolution.

You will find a top section with actions and navigation helpers, with most of the space used to list your files and the information you need to work with them. Here is a visual example.

 

 

How you access it

The file manager will load in several scenarios.

  • When you click on the Browse button in an image placeholder, which is displayed when you drag and drop an image content block into a message:


  • When you click the Change image button in the image properties panel:


  • When you click on Link file when working with images and buttons:

 

How to upload files

The quickest way to upload a file into the file manager is to drag it from your computer to the file manager window, dropping it into the upload area. Cool, uh?

You can also:

  • Browse and upload from your computer using the Upload
  • Import from an external application using the Import button (see more below), if this feature has been enabled.
  • Search and import free stock photos using the Search free photos button, if this feature has been enabled.

Note that there is an upload limit: the maximum allowed file size is 5MB.

How to import files from other applications

The Import feature allows you to connect external applications like DropBox, Google Drive, Instagram and more, and import your files.

How to browse or search files

To locate your desired image or document, browse your folders and order their content by name, date, size or type by clicking on the sort labels on top of the list.

An arrow icon next to this labels means that this is the current filter, and its orientation will tell you the order, ascending or descending.

Too many files in the selected folder? Click on the lens icon to run a search. Results will be filtered on the fly. Mind that this search is performed only in the current folder, and not in your entire repository.

How to use files

When you move your cursor over a file or folder, that row will be highlighted and the available action icons will be shown on the right side:

  • insert and preview for files
  • delete for both files and folders

If an action is momentary not available, you will be notified by the tooltip text of the icon, such as when you try to delete a folder that contains files, because only empty folders can be deleted.

If you want to delete multiple files or folders, use the check-boxes to select them, the delete action will be shown on top of the list. Only elements that can be deleted will have a selectable check-box.

 

How to organize folders

You can create the folder structure you prefer to organize your files. To add new folders, use the Add folder icon.

For your folder names you can use letters (upper and lower case), numbers, spaces, periods (.), hyphens (-), or underscores (_).

To navigate to the parent folder, use the top breadcrumb. Clicking the home icon will take you to your root folder.

 

 

Undo and Redo - Moving Back and Forth Between Changes

When changes are detected, a compact Undo widget displays in the bottom left corner:

The widget displays 3 icons:

 

History Icon

A history icon that expands a timeline of the latest changes:

This timeline allows users to browse through their most recent changes.

For each point in the timeline, there is:

  • An icon to identify the content element type (an image, text, etc.) that changed
  • A description of what changed, giving the new property value (if any)
  • The exact time it happened

When the user selects a point in the timeline, the Drag and Drop Email builder will revert the message back to that particular point in time.

Don't worry -- if you need to go back to the point before you made any changes, select the entry called "Message Opened".

 

Undo and Redo

Undo and Redo arrows allows users to move back and forth between changes.

The Undo widget currently displays the last 15 edits, but users can always rewind to the Message Opened state to undo all changes since the message was initially opened in the Drag and Drop Builder.