Drag&Drop wizard

Creating emails has never been easier. The new, streamlined email designer lets you make beautiful, responsive email templates in no time.

 

GO TO EMAIL MARKETING => SEND EMAIL => ADD NEW EMAIL => USE THE NEW EDITOR


Main steps

  1. Choosing the layout or template
  2. Adding widgets to the project
  3. Previewing and finishing the project

Choosing the layout or template

First, decide which layout to use in your project. Later you will be able to add graphic elements (called widgets in our UI).

[1] Message settings – click the pencil icon to set up how the message will be displayed in the recipient’s inbox – name, subject line, sending account, preheader and template width (learn more in the following section – 1.1 Message settings – details). You can change these settings now or later, it’s up to you.

[2] Layout – the way widgets are arranged in your project. You can choose from a number of presets, or make a custom layout.

[3] Template – if you do not want to design an email from scratch, you can select one of our prebuilt templates.

[4] Back to list – click this button to close the email designer and return to the list of emails.

[5] Go to email designer – after choosing a layout or a template, click this button to start adding widgets.

Message settings – details

[1] Email name – enter the name under which to save this project in the system.

[2] Email subject – email subject line, you can also add simple icons to it.

[3] Group – from a drop-down list select the group of recipients or you can quickly create a new one by clicking the [ + ].

[4] Send from – from the drop-down list, select the account from which to send this email. You can also click [ + ] to create a new account .

[5] Email width – how much horizontal space your message will take in the recipient’s inbox. Adjust the value by using the slider.

[6] Email window and background color – click the color picker next to each element to change its color. The email window is the canvas of your project, the area that contains all elements of the template. The background is the area at the very back, behind the email window.

[67] Preheader – every email on the list in an inbox has a Subject and a short line right after the subject – a preheader.

A preheader is a short text that follows the subject line. The subject line and preheader are visible while the user is still on the list, even before the message is opened.

preheader

If you leave this field empty, the first line of text from your message will be used as a preheader. For this reason, it is usually better to set a custom preheader, just to be sure.

[8] Campaign name (for Google Analytics monitoring) – tick the checkbox if you want this mailing to be included in your Google Analytics.

TIP: The subject line and preheader share the small space in an inbox interface. A shorter subject line will let you fit a longer preheader into this space. Make sure both fit well, as it will increase the chances of your email being opened.


Adding widgets to the project

You can add widgets to the template in any order. Just drag and drop, it does what it says on the tin. After adding a widget, hover your cursor over it to open a contextual menu.

The email designer menu has three tabs.

[1] Widgets –  click, drag and drop the widget you want to use.

  • Text – a block of text,
  • Image – a block where you can put an image from the gallery,
  • Button – an interactive button, can be hyperlinked,
  • Image+Text – a combination of text and image in one block,
  • Image+Text (row) – a combination of text and image arranged in a row
  • Image+Text+Button – a combination of text, image, and button in one block,
  • Social media – a row of social sharing and social follow buttons,
  • Divider – a horizontal line to separate content,
  • Opt-out link – a link that lets recipients unsubscribe from receiving further emails from the sender. Make sure the opt-out link is in your message and is clearly visible.
  • Preview – a link that lets recipients see your message in a new browser window or tab (this is may come in handy if your recipient’s inbox does not accept images).
  • Image group – an experimental feature that lets you build a partially responsive arrangement out of pre-cut images (see 2.1c for more information).

[2] Your widgets – in this tab you can make and save custom widgets.

[3] Settings – here you can adjust the message’s display settings.

Widget – Image + Text

This advanced widget lets you add two basic widgets in one.

 

Contextual menu – to access this menu, hover your cursor over an element you want to edit.

  • 1st button (pencil) opens the selected element’s settings (as seen in the screenshot above).
  • 2nd button (two sheets) copies the selected element.
  • 3rd button (bin) deletes the element.
  • 4th button (on the right edge of the element) [ + ] adds a new column to the element.

[1] Horizontal and vertical margins – by default, the content in a widget takes as much space as possible in an element. To add padding to content, use this slider. This lets you set a margin of 0 to 50 px on each side of the element (horizontal padding and vertical padding). Background color – if the content in a widget does not take all the space in an element, element background is visible. Click the color picker to change the background of the element.

[2] Layout – choose one out of two field layout in the widget.

[3] Image – click Change to open gallery and add a new image.

[4] Text field – you can type in any amount of editable text here.

 – this button enables you to duplicate the same widget. It will appear next to the original one in the same row.

Select image

[1] Change – select the image from the default gallery in the system or upload your own image.

[7] Image URL – an image can be linked to any URL address, for example, a picture of a product can be linked to the product page.

[8] Image alternative text – also known as the alt attribute, a short text that is to be rendered when the image to which it is applied cannot be rendered by the recipient’s browser or inbox.

Text field settings

In the text field, you can type any amount of the text. You can track the changes in this field on the left side of the screen in the preview of the widget. You can change the format of the text (size, color, align, style, font). Additionally, You can also add a hyperlink or opt-out link to your text.

 

Widget – Image group

This advanced widget lets you put multiple images and form them into a coherent whole. The graphical content will display either responsively or it will be scaled, it’s all up to you. Arrange them into complex mosaics, and you can link each element to the website of your choice. You can adjust the number and size of columns. You can add multiple pictures, move them, adjust manually their sizes.

[1] Select from gallery – upload your own image or you can choose one from the default gallery.

[2] Change – you can change the image by selecting one from the default gallery or uploading the one of your own choice.

[3] Delete – clicking the bin icon causes removing of the image.

[4] Image URL – an image can be linked to any URL address, for example, a picture of a product can be linked to the product page.

[5] Image alternative text – also known as the alt attribute, a short text that is to be rendered when the image to which it is applied cannot be rendered by the recipient’s browser or inbox.

[1] Add column – you can create an additional column, which will adjust to the height of the highest image in the column in the case when the images in the message will be scaled. However, in the case of the column of images that behave responsively, the images will adjust to the column.

[2] Adjust the height – click the button to adjust the height of the template of the message to the height of the images.

 – add new field within the main field of the image.

 – add a new main field in which you upload the image. Thanks to this button the images added in this field will be scaled that means they won’t move below regardless of the device on which they will be displayed.

 – adjust the height and the width of the image.


Previewing and finishing the project

At any point during your work on the project, you can see it by clicking Preview on the top ribbon. In the preview, you can switch between various screen types to see what your design will look like on different devices [1]. When you finish working on the project, go back to editing [2] and click Save and send.

Submit your review
1
2
3
4
5
Submit
     
Cancel

Create your own review

Average rating:  
 0 reviews