Our drag-n-drop email editor 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 over the design of your emails. Its drag-and-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.

For maximum design flexibility, the structure of the message is separated from its content. 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 editor 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 structures (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:

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.

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 “Show me how” 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, the roundness of the corners, padding around the text, … you name it. When the properties panel is longer than 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 over 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).

If you click inside a text content block, the text editor toolbar will appear directly 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 BODY tab. This allows you to change the font family for multiple elements at once just by changing that property in the Body tab.

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 settings can be configured both for all sides of the selected element...

... or separately for each side.

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

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

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

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

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.

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 with different structures allow you to organize content in a way that is different from the preceding and following rows.

For instance, you may need…

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 Rows (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.

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

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.

2. You click on a block of content, and the editor will:

3. 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.

4. You click on a row, and the editor will:

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

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:

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. By default, folders and images are shown in Grid view. If you switch to List view, it will be used next time you open the File Manager. Here is a visual example of images within a folder, in Grid view:

And here is the same folder, in List view.

The file manager will load in several scenarios.

a. 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.

b. When you click the Change image button in the image properties panel:

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

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 anywhere on the page.

You can also:

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

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.

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:

If an action is momentarily 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 checkboxes 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.

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.

When designing an email, several layouts can be created by combining icons or small images, often with some copy. That is why the editor has an Icons content block for creating icon-based content. This block is also not restricted by row structures, allowing you more flexibility in your designs.

You can use Icons to create visual bullet lists, ratings, properties, logo galleries, etc.

To get started, drag the Icons content block into a row. A placeholder will fill the content block; click on it to open the icon options in the sidebar. Click on Add new icon to add the first icon. A predefined icon will populate the block.

Then, click on Change image to select an image from the file manager. Once done, you may edit the image with our image editor by clicking on Apply effects & more.

Repeat this process until you complete your icon collection.

If you use the toggle to open More options, you'll find a couple of options specific to Icons content blocks.

Adding the Icon text will create an accompanying section of text that you can position on top, bottom, left, or right of the icon. From this panel, you may also add a link for the icon and the image's alternate text.

If you have multiple icons, you can change their order by clicking and dragging them in the panel.

Scrolling down through the properties, you will see a few settings that are specific for Icons.

You can pick a size for the icons, decide the spacing between them, and apply additional padding that will affect all the icons.

When enabled, the video content block allows you to share your video content easily in your emails. You only need to copy and paste the URL of your video from YouTube or Vimeo, and the editor will do the rest: it will automatically grab the cover image for the video, overlay a Play icon on top of it, and link it to the actual video content.

The "Content properties" section will ask you to provide a video URL from YouTube or Vimeo, the popular video hosting services that are currently supported (if you would like us to support other video hosting services, let us know).

Once you insert a valid URL, the content block in the editing panel will display the cover image for the video with a Play icon overlaid on top of it. You can edit the type, color, and size of the Play icon to change the way it looks. For example, on some videos a white icon will work better than a black one, or vice versa.

Note that the editor cannot access password-protected videos to get the cover image.

Additional notes about embedding video in email:

When you insert an image in the editor, you can flag it as “dynamic”. Dynamic images are images that change depending on one or more values that are "passed" to the system that delivers them. The link to the image is no longer a static URL but rather a URL that contains some variables, such as an email, a customer ID, a date, etc.

The variables are merge tags in the URL and are replaced with actual values (e.g. the ID of a customer, the email of the recipient, the name of the person...) at the time the email is sent, or the landing page is rendered.

The main goals of this feature...

Some cool examples of dynamic images include:

Dynamic countdown timers

Another great application for dynamic images is countdown timers. Here you will be passing in the Dynamic URL the date of an event, the time of a new store's grand opening, the date and time a promotion expires... you name it. The system on the other side will automatically generate a GIF animation that will look like a countdown timer, signaling the time remaining to the event.

A placeholder image can be used in the URL while you design the message (or page), so you know exactly how the end result will look like.

There are many services that you can use for this purpose. Niftyimages again, but also Fresh Relevance, CountdownMail, and many others.

Dynamic ads

You can also use dynamic images to turn your emails into a revenue producer, if you have a large audience and are open to the idea of hosting third-party ads. Companies like LiveIntent provide a quality solution for publishers that want to monetize newsletters, blog digests, etc.

Typically, you will need to pass a few variables to LiveIntent, including the recipient's email. They will help you configure the Dynamic URL, which you will then simply need to enter into the corresponding field in the editor.

Ever made a mistake and wanted to undo it? What if you wanted to go back to several edits ago? And what if you changed your mind after all and decided that the latest changes worked?

When enabled, the Undo feature allows you to rewind and fast-forward to any point in your recent edit history. When changes are detected, a compact Undo widget displays in the bottom left corner of the stage, as shown below.

Clicking on the Undo or the Redo arrows allows you to undo the latest edit or re-apply it.

The Timeline icon, instead, loads an additional panel (shown above) that allows you to browse through the most recent changes. For each recent change, it displays:

These details help determine what modification was applied, and if desired… rewind the message to that state.

The Undo widget currently displays the last 15 edits in the timeline, but you can always rewind to the Message Opened state to undo all changes since the message was initially opened in the editor.

When enabled, the Custom HTML content block allows you to add your own HTML code to an email message that you are designing with the editor. It’s as simple to use as a text block.

HTML experts: Using your own code may affect how the message is rendered in email clients, preventing it from adjusting to the screen size (i.e. the "responsiveness" of the message). Make sure to use HTML that is email compliant and responsive.

Adding live content from external providers

Product recommendations, dynamic ads, personalized maps, countdowns… all of this advanced content can be easily included in a message created with the editor. Just copy and paste the code provided to you by the vendor that you are working with.

How do I add my HTML code?

To add your code just drag an HTML content element into your message. It can be positioned alone, with other HTML content items, or mixed with other types of content.

The newly inserted content block will show some default placeholder text. Click on it and the right-side property panel will display the HTML code editing pane. You will find some placeholder code inside the editing area.

Paste your own HTML code or write it directly in the editing area. The system will highlight your syntax and indent your code to make it more readable.

Which HTML tags are allowed?

The HTML content will automatically correct some issues like HTML tags that are left open, and strip out code that cannot be used, such as script tags or iframe tags (this code tags are not allowed by the major part of email clients, can cause deliverability problems or security risks).

Allowed tags list:

a, abbr, acronym, address, area, b, bdo, big, blockquote, button, caption, center, cite, code, colgroup, dd, del, dfn, dir, div, dl, dt, em, fieldset, font, form, h1, h2, h3, h4, h5, h6, i, ins, kbd, label, legend, li, map, menu, ol, optgroup, option, p, pre, q, s, samp, select, small, span, strike, strong, sub, sup, table, tbody, td, textarea, tfoot, th, thead, u, tr, tt, u, ul, var

Allowed attributes list: