Newsletters are a fantastic way to communicate with your customers. But just sending plain-text newsletters is far from enough, and with increasing competition fighting for attention in your customer's inbox, making your emails stand out is not just a matter of good branding – it's a necessity.
That's why edrone is constantly seeking ways to help you get the most out of your newsletters and create beautiful and efficient emails as easily as possible, and that's excactly what the new Drag 'n' Drop Editor will do for you!
First steps
To get started, go to AUTOMATYZACJE, następnie READY FLOWS and select any scenario. The Drag 'n' Drop Editor is available at the DESIGN stage.
User Interface
Let's take a look at each element you will see on your screen when you open the editor. Going from top to bottom, left to right:
Language tabs: If you have a multi-language campaign, here is where you will select which language you're working on. Please note that emails for each language will need to be set up separately, so in this case we recommend creating an email for one language first, then copying and pasting it (see below) to the other language afterwards.
Message type drop-down menu: If your scenario involves multiple emails (for example, Refer-a-friend Program), here is where you will choose which email you will work on. Again, each message type will involve building a new email.
Sender info and Subject line: These are pretty self-explanatory. You will have chosen your sender on the previous step, and here is where you will write your subject. Again, one for each variant (language and message type).
Actions buttons: Here you can choose from the five actions below.
Save: will save your progress.
Copy: will copy everything
Paste: will paste everything
Clear: will delete everything and you will start again from scratch
Templates button: The Drag 'n' Drop Editor comes with several predefined templates which you can use as a starting point for your own emails. To make it even easier and faster to create great emails, specific templates will be pre-loaded for each engagement. If you want to start from scratch, you can always click on “Clear” button in the editor navigation bar. To restore the previous template, click on “Undo”. To select another template, you can open the list of templates by clicking on the “Templates” button.
Select a message: Creator saves your recent messages, here you can go back to your previous version of the message!
NOTE: You will create a new creative template that you can save and then use with the new Newsletter Hub creator!
At the bottom of the Drag 'n' Drop Editor you will also find undo and redo buttons in the form of arrows. But also it's the place where you can check how your email would look on mobile, desktop or dark mode!
Menu: On the right side of the screen, you will see a grey column with five buttons. Here is where you will select and edit your emails' visual elements. They are discussed in detail below.
Workspace: On the center of your screen is the space where you will actually build your email.
Content
In this section, you will see all of the elements you can explore inside your emails. While the Blocks section (see below) form the structure of your email, here you will define what goes inside it: text, images, buttons, etc.
To add each element to your email, just click, drag and drop. It's that easy!
Your first option when editing each element is choosing between Desktop and Mobile tabs. Every email designed using the Drag 'n' Drop Editor will be 100% responsive, but you can create a specific variant of your email for each type of device.
See those icons next to the text, headline, image, button? These elements are aided by AI! You can learn more here!
Columns
This is the same option as you will find on the Blocks section. By using this element, you will be essentially creating a new row for you email, where you'll be able to determine that row's column structure. See the blocks section to learn more.
Text
Use this element to add a text box.
Hover menu: when editing a text box, a hover menu will appear with several options:
Font family and font size
Bold, italic, underline, strikethrough, superscript, subscript
Emojis
Align to left, center or right
Ordered and unordered lists
Text color and background color
Text orientation (left to right or right to left)
Links
Merge Tags (these are variable elements used to personalize content. For example, the "first name" merge tag will appear as *|FIRST_NAME|* while you build your email, but will appear as the recipient's actual first name when they receive your email – provided that information is on your database, of course).
HOW TO ADD COUPONS To add discount coupons in your emails, use the *|COUPON|* merge tag inside a text box. Please note that, when you use this merge tag, it will be necessary to upload a CSV file with your coupons on the COUPONS section of your scenario. |
TEXT tab: here you can change your text's color, alignment (left, center or right) and line height.
LINKS tab: in this option you can choose whether the links in this particular text box will inherit your entire email's body style (see Body section below).
GENERAL tab: here you can change your text box's padding, which is the distance between the element's edges and its content. If the "More Options" switch is turned off, you will change the padding on all sides simultaneously. If you switch "More Options" on, you will be able to change each side's padding individually.
RESPONSIVE DESIGN tab: by activating the "Hide on Desktop" switch, that entire text box will appear only on your email's mobile version.
Heading
Use this element to add headings and subheadings to your email. This is different from the "Text" element in that it creates a different information hierarchy, specifying that this text is a title instead of a paragraph.
This is specially useful for your email's plain text and HTML versions, which might appear if your images fail to load, your subscriber's internet connection is weak, or for users with visual impairments who use screen readers.
Hover menu: when editing a heading, a hover menu will appear with a few options:
Bold, italic, underline, strikethrough, superscript, subscript
Links
Emojis
Merge Tags (these are variable elements used to personalize content. For example, the "first name" merge tag will appear as *|FIRST_NAME|* while you build your email, but will appear as the recipient's actual first name when they receive your email – provided that information is on your database, of course).
TEXT tab: here you can change some of your heading's properties:
Heading Type: H1 is the highest hierarchy, H4 is the lowest.
Font Family
Font Size
Color
Text Align (left, center or right)
Line Height
LINKS tab: in this option you can choose whether the links in this particular heading will inherit your entire email's body style (see Body section below).
GENERAL tab: here you can change your heading's padding, which is the distance between the element's edges and its content. If the "More Options" switch is turned off, you will change the padding on all sides simultaneously. If you switch "More Options" on, you will be able to change each side's padding individually.
RESPONSIVE DESIGN tab: by activating the "Hide on Desktop" switch, that heading will appear only on your email's mobile version.
Image
Use this element to add an image (static or GIF).
IMAGE tab: this is where you will upload your image. By clicking on the Apply Effects & More button, you will open the built-in image editor which offers several editing options such as applying filters, cropping, adding text, and much more. When you add an image, there will be a few options:
Auto width: by selecting this option, your image will be as wide as possible. When this switch is turned off, you will be able to choose the image's width as a percentage of the total width.
Align: align image to the left, center or right.
Alternate text: this is the text your subscribers browsers will show if the image fails to load, or in a plain-text or HTML version of your email. This is also important for people with visual impairments who use screen readers. We recommend always including a short description of each image here.
ACTION tab: here you can choose whether you want something to happen when your readers click on your image, and what that action should be. Click the drop-down menu on the top-right of this section to find these options:
Open website: this is the most common option, where you basically make an image act as a button. Just insert the link you want your readers to open, and choose whether you want that link to open in the "Same Tab", or a "New Tab".
Subscribe: choose this option to turn your image into a "subscribe" button.
Unsubscribe: choose this option to turn your image into an "unsubscribe" button.
Gender confirmation (male / female / refused to pass / other): choose this option to turn your image into gender confirmation buttons.
Referrer link / Referrer code / Confirm affiliate programme participation link: these options are specific to affiliate program emails. Click here for more info.
GENERAL tab: here you can change your image's padding, which is the distance between the element's edges and its content. If the "More Options" switch is turned off, you will change the padding on all sides simultaneously. If you switch "More Options" on, you will be able to change each side's padding individually.
RESPONSIVE DESIGN tab: by activating the "Hide on Desktop" switch, that image will appear only on your email's mobile version.
Banner
Banner is a new tool in the DESIGN editor (Unlayer) and it is available in every type of engagement and it extends the capabilities of the standard Image by automatically adding effects onto the uploaded picture.
TEXT: We write two text lines onto the image. The text is automatically chosen based on the Engagement Type and the Language of the Agent. It can be changed manually:
EFFECTS: after uploading the image we automatically add graphical effects.
Button
Buttons are fundamental to email marketing! Here's what you can do with them in the Drag 'n' Drop Editor.
ACTION tab: here you can choose whether you want something to happen when your readers click on your button, and what that action should be. Click the drop-down menu on the top-right of this section to find these options:
Open website: this is the most common option. Just insert the link you want your readers to open, and choose whether you want that link to open in the "Same Tab", or a "New Tab".
Subscribe: choose this option to make a "subscribe" button.
Unsubscribe: choose this option make an "unsubscribe" button.
Gender confirmation (male / female / refused to pass / other): choose this option to make gender confirmation buttons.
Referrer link / Referrer code / Confirm affiliate programme participation link: these options are specific to affiliate program emails. Click here for more info.
BUTTON OPTIONS tab: this is where you can change your button's text color, background color (button's color), width (full width or percentage), and alignment (left, center or right).
SPACING tab: here you can change your button's line height, padding (distance between the button's edge and the text), border (type, width, color), and rounded corners.
GENERAL tab: here you can change your button's padding, which is the distance between the element's edges and its content (in other words, the space around the button). If the "More Options" switch is turned off, you will change the padding on all sides simultaneously. If you switch "More Options" on, you will be able to change each side's padding individually.
RESPONSIVE DESIGN tab: by activating the "Hide on Desktop" switch, that button will appear only on your email's mobile version.
Divider
This element creates a line across the width of the container. Use it to separate sections of your email.
LINE tab: here you can change your divider's width, line type (solid, dotted, dashed), line height (in pixels), line color, and alignment (left, center or right).
GENERAL tab: here you can change your divider's padding, which is the distance between the element's edges and its content. If the "More Options" switch is turned off, you will change the padding on all sides simultaneously. If you switch "More Options" on, you will be able to change each side's padding individually.
RESPONSIVE DESIGN tab: by activating the "Hide on Desktop" switch, that divider will appear only on your email's mobile version.
HTML
One of the biggest benefits of using the Drag 'n' Drop Editor is not having to code anything, but sometimes you might want to include an HTML element. No problem! Here's what you can do with it.
HTML tab: this is where your HTML code goes.
GENERAL tab: here you can change your HTML element's padding, which is the distance between the element and its content (in other words, the space outside the HTML element). If the "More Options" switch is turned off, you will change the padding on all sides simultaneously. If you switch "More Options" on, you will be able to change each side's padding individually.
RESPONSIVE DESIGN tab: by activating the "Hide on Desktop" switch, that HTML element will appear only on your email's mobile version.
Menu
You can add a menu to your emails, which works similarly to a menu on a website.
MENU ITEMS tab: this is where you will write each item's name and choose an Action Type. Usually, it will be "open website", which requires an URL and a choice between opening that link in the same tab, or a new one. You can also change each item's position by clicking and dragging the button on the item's upper left corner.
STYLES tab: here you can change your menu's visual properties:
Font Family
Font Size
Font Color
Link Color
Align (left, center or right)
Layout (horizontal or vertical)
Separator: a character or symbol separating each menu item (for example, | )
Padding: the distance between each item's edge and its content
GENERAL tab: here you can change your menu's padding, which is the distance between the element and its content. If the "More Options" switch is turned off, you will change the padding on all sides simultaneously. If you switch "More Options" on, you will be able to change each side's padding individually.
RESPONSIVE DESIGN tab: by activating the "Hide on Desktop" switch, that menu will appear only on your email's mobile version.
Social
You might want to take your readers from your email to your social media channels. That's easily achieved with the Social element.
ICONS tab: here you will choose which social media buttons you want to add, their appearance (circle, rounded or square / color or black and white) and URLs.
GENERAL tab: here you can change your social menu's padding, which is the distance between the element and its content. If the "More Options" switch is turned off, you will change the padding on all sides simultaneously. If you switch "More Options" on, you will be able to change each side's padding individually.
RESPONSIVE DESIGN tab: by activating the "Hide on Desktop" switch, that social menu will appear only on your email's mobile version.
Timer
The Timer element is perfect for generating a sense of urgency. It creates a countdown based on the settings below:
COUNTDOWN tab: this is where you will set up your timer's main properties:
End Time: when the timer will run out. After that moment, when someone opens your email, the timer will read 00:00:00:00
Time Zone: your End Time's time zone
Language: in which language your labels will be (choose from 16 options)
Labels: if this option is active, your timer will have labels for Days, Hours, Minutes and Seconds
Background, Digits and Labels colors
Digits font and Font size
Labels font and Font size
IMAGE tab: your timer will have some of the same properties as images have:
Auto width: if this option is active, your timer will span the entire width of its container. If turned off, you will be able to choose a width.
Align (left, center or right)
Alternate text: see the Image settings above to learn more.
ACTION tab: here you can basically turn your Timer into a Button. See the Button settings above to learn more.
GENERAL tab: here you can change your timer's padding, which is the distance between the element and its content. If the "More Options" switch is turned off, you will change the padding on all sides simultaneously. If you switch "More Options" on, you will be able to change each side's padding individually.
RESPONSIVE DESIGN tab: by activating the "Hide on Desktop" switch, that timer will appear only on your email's mobile version.
Video
Adding a video to your emails is as simple as pasting a URL on a text box!
NOTE: your video will not be directly embedded into your email, meaning it won't be possible to play it inside the email. The Drag 'n' Drop Editor automatically creates a thumbnail of your video and turns it into a button, which will redirect your readers to the link you used.
VIDEO tab: paste your video's URL (Youtube or Vimeo) here
GENERAL tab: here you can change your video's padding, which is the distance between the element and its content. If the "More Options" switch is turned off, you will change the padding on all sides simultaneously. If you switch "More Options" on, you will be able to change each side's padding individually.
RESPONSIVE DESIGN tab: by activating the "Hide on Desktop" switch, that video will appear only on your email's mobile version.
Dynamic items: Bestsellers
edrone allows you to add dynamic items to your emails. Using the Bestsellers element, you can showcase personalized product recommendations to your readers. The Bestsellers element is available for all engagements.
BESTSELLERS tab: here you will choose how many products you wish to showcase, their categories in your website, and whether or not you wish to fallback on recommendations (you standard product recommendations in case you don't have bestsellers for that category)
PRODUCT PROPERTIES tab: here you will choose whether you want to show your products' names and/or add a call to action. Note that, if you choose to add a call to action, a new tab will appear below (CUSTOMIZE CALL TO ACTION), and it will have the same setting options as regular buttons. See Button settings above to learn more.
CUSTOMIZE NAME tab: here you can change the product's name font, font size, color, alignment (left, center or right) and choose between short and long titles.
GENERAL tab: here you can change the padding, which is the distance between the element and its content. If the "More Options" switch is turned off, you will change the padding on all sides simultaneously. If you switch "More Options" on, you will be able to change each side's padding individually.
RESPONSIVE DESIGN tab: by activating the "Hide on Desktop" switch, these product recommendations will appear only on your email's mobile version.
Dynamic items: Viewed, Abandoned, Purchased, Recommended, Observed
This element works much the same way as Bestsellers, but its name and function will vary according to each scenario:
NEWSLETTER SUBSCRIPTION, SMS NEWSLETTER, BIRTHDAY, CHAT SUBSCRIPTION: This element will not appear
RESTORE CUSTOMERS, DYNAMIC NEWSLETTER, CUSTOM, VIEWED PRODUCTS, NEWSLETTER A/B, NEWSLETTER CATEGORIES: Viewed products
LOYALTY PROGRAM, AFTER SALE: Purchased products
RECOVER ABANDONED CARTS: Abandoned products
CROSS-SELLING, RECOMMEND: Recommended products
WISHLIST: Observed products
VIEWED / ABANDONED / PURCHASED / RECOMMENDED / OBSERVED PRODUCTS tab: here you will choose how many products you wish to showcase, and whether or not you wish to fallback on recommendations
PRODUCT PROPERTIES tab: here you will choose whether you want to show your products' names and/or add a call to action. Note that, if you choose to add a call to action, a new tab will appear below (CUSTOMIZE CALL TO ACTION), and it will have the same setting options as regular buttons. See Button settings above to learn more.
CUSTOMIZE NAME tab: here you can change the product's name font, font size, color, alignment (left, center or right) and choose between short and long titles.
GENERAL tab: here you can change the padding, which is the distance between the element and its content. If the "More Options" switch is turned off, you will change the padding on all sides simultaneously. If you switch "More Options" on, you will be able to change each side's padding individually.
RESPONSIVE DESIGN tab: by activating the "Hide on Desktop" switch, these product recommendations will appear only on your email's mobile version.
Fallback to BestsellersIn order to increase overall conversions from emails, we want to present more products in front of the user. As a result, inside dynamic elements such as:
There is now an option called “Fallback to Bestsellers”:
 When this option is enabled and there aren't enough products to present in the email, additional products (Bestsellers) will be automatically added to the products grid. This will avoid empty spaces inside the email and hopefully increase sales!
 Note that a BESTSELLER label is added to differentiate these fallback suggestions from the other ones. The colors can be customized to fit your branding. |
Blocks
Each row of elements is called a block. You can have as many elements as you want inside a block. Remember that the more elements in a block, the higher the chance that, especially on mobile devices, these elements will be less readable on mobile.
In this section, you can choose between different column structures, and edit your email at the block level. Click on a row to view the options:
Desktop or Mobile
Your first option when editing a row is choosing between Desktop and Mobile tabs. Every email designed using the Drag 'n' Drop Editor will be 100% responsive, but you can create a specific variant of your email for each type of device.
Column Properties
Here, you will be able to change each column's properties individually. Select each column right below the COLUMN PROPERTIES header.
Background Color: change the column's background color. Note that this will only change that specific column's background, and not the one next to it. If you wish to change both columns' background color simultaneously, go to the "Content Background Color" option on Row Properties (below).
Padding: this is the inner space between the column's edges and its content. If the "More Options" switch is turned off, you will change the padding on all sides simultaneously. If you switch "More Options" on, you will be able to change each side's padding individually.
Border: here you can change your column's border type (solid, dotted or dashed), width (in pixels) and color. Unlike background color, is not possible to edit borders for all columns simultaneously.
Row Properties
Background Color: here you can change the row's background color, without affecting the columns' background color. In other words, you'll change the color of the empty space on both sides of your email, aligned with that row's height.
Content Background Color: this is where you can change all of your columns' background color at once.
Background Image: you can upload an image for each row's background. As with the Background Color, this will be limited to the row's height. You have three options for your image:
Full Width: by activating this option, your image will span the entire width of the empty space on both sides of your email. By switching it off, your image will be the content's background, limited to the row's height.
Repeat: by activating this option, your image will be automatically repeated, horizontally and vertically. This is specially useful when creating background patterns. By using small images repeated in a pattern, your email's file size will be much smaller than using a single pattern image in full width.
Center: by activating this option, your image will be aligned to the center.
Padding: the inner space between the row's edges and its content. If the "More Options" switch is turned off, you will change the padding on all sides simultaneously. If you switch "More Options" on, you will be able to change each side's padding individually.
Responsive Design
By activating the "Hide on Desktop" switch, that entire row will appear only on your email's mobile version.
TIP 01: If you use the same blocks frequently (for example, a combination of heading + image + button), or across campaigns, it's possible to save a block and reuse it. Click here to see a screen recording of how to do it.
Tip 02: Blocks are especially useful when creating emails with more complex structures. Click here for a screen recording showing how to use blocks to create a responsive footer.
Body
In this section, you will set up some of the more general aspects of your email.
Text color: Color of your all text
Background color: the color of the negative space around your newsletter
Content width: the width of your newsletter on desktop screens. By default it is set to 600 pixels, but you're free to change it as you please.
Content Alignment: You can choose between align-to-left or align-to-center. By default it is set to align-to-center.
Font Family: Here you can choose from over 25 fonts.
LINKS: Here you can alter the color of your links, and whether they will be underlined or not. These are general settings which can be altered individually on the "Text" element of the Content section.
Images
In this section, you can choose from millions of free high quality stock images. Just search what you need on the toolbar and pick the ones you like best.
Upload
This section is where you'll upload your own images and GIFs. One of the more interesting features of the new Drag 'n' Drop Editor is that all your images will be saved in your media library.
You can drag and drop directly from your media library to your email. It is also possible to delete any image or GIF you no longer need by clicking on the ⋯ button and selecting "Delete".
Need more help?
If you have any further questions about the Drag 'n' Drop Editor, please do not hesitate to contact us at hello@edrone.me