Get the Most Out of the Mailing Editor

See our helpful tips to learn more about the Tidio Email Marketing tool.

In this article, you'll learn:

• How to build a header
• How to add a logo to your emails
• How to personalize your emails - using your recipients' names
• How to build a banner
• What are Smart Elements & how to use them
• What is Image Rollover Effect & how to use it
• How to add Social Media icons in your emails
• How to add Video to your email
• What are the CTA buttons & how to add them
• How to add the menu bar within the email
• How to add a spacer to your email
• Email rendering on mobile devices

Build your own header

The email header — is the first element of emails that recipients see. It normally contains the brand logo and menu.  So, first of all, we need to decide what our header will look like. There are many types of header design. Yet, the most popular one with eCommerce is when the logo on top, and menu below.

This header type requires two separate rows: one for the logo, and the other one for the menu.

Add logo to your emails

• pull a 1-column structure in your “empty template”
• Click the “image” button, or drag and drop the “image” block;

on the left, in the settings panel, the system will ask you to drop your image of JPG, PNG format. You can also paste an external URL link to your logo

• insert a hyperlink that takes readers to your website
• add alt text to the logo
• set the logo size —  logo width we used in the example is 144 px

center alignment is set by default. If you need to change it, click “left” or “right” alignment

Why apply links to the logo? — Quite often, recipients click on it to get to your website faster

Why add alt text to the logo? — First of all, to pass the anti-spam filters, second of all; second of all, to provide users with information on what the image is about, in case they do not see images in emails; third of all, to comply with the email accessibility best practices.

How to add a menu to your emails

• Click the “Content” tab in the settings panel
• rag the 1-column structure and put it below the logo
• now open the “Blocks” tab
• pull a menu block and drag it into your template

• once you select the links type, which we did, you will see that the color and font of your links, that you previously set in the “General settings” section, are already applied to the menu links. We made them bold by clicking the “B” icon in the settings panel

now you need to name each menu item and insert necessary URL links

• if you want to hide some elements for mobiles, just click the “Hide on mobile” icon

Personalize your emails

Emails with personalized copy — addressing by names —  bring in 14% more profit than those without personalization.

Add merge-tags to greetings, like in the example below, to email footer to specify recipient’s email address, always address by names in triggered emails.

 

How to add merge-tags in the email editor

• in the email template you are working with, place the mouse cursor in the necessary place over the text
• in the settings panel above the template, you are working with, you’ll find the “Merge Tags” button
• once you see the dropdown menu, select the parameter you want to use

As an example, if done correctly, it will look like this:

The tag will replace this parameter with the first name of each recipient. If the first name (or any other parameter) is not specified, then your tag will leave this field empty.

Build a banner

It is said that the banner is the face of your newsletters. Hence, you need to work thoroughly on it.

Normally, as a banner, we understand an image that evokes emotions in your target audience, along with complementary copy over this particular image.

How to build an email banner:

• drag a 1-column structure into your HTML email template
• pull the “Banner” block into this structure

 

• click this block in the template to activate the settings panel
• upload image that you’re about to use;
• in the settings panel, the system will suggest that you crop the image if needed
• set image orientation. It can be vertical, square, and horizontal. The latter is the most popular one

 

• paste the link that will take recipients to the place related to the value offer described on the banner
• enter alt text — this text will be shown to recipients if images for some reason cannot be displayed

• if you need to place any copy over the banner image, you need to click the “T” button on the settings panel above. Once it gets light, you need to left-click this image again
• the very moment, you’ll see the “Caption” inscription on the banner
• erase this inscription and enter your text here
• set font size, font color, and the font type

• among the banner fonts, choose the one that fits your email best
• toggle the “additional picture” button in the settings panel. It can be anything you like: sticker, frame, logo, background to make your copy more noticeable, etc. Yes, you can place text over it.

Currently, our mailing editor offers over 40 banner fonts. They are decorative. Yet, you should not be afraid to use any of them, because our banner generator works like Photoshop — images, text, frames are edited as separate layers.

 Yet, they all combine into one single image during the export. This means that any text placed over banners are considered image elements by email clients. Consequently, they do not get replaced with the default ones.

Smart-elements

To save your time for routine operations, we created new elements - smart blocks that allow you to automate this process. But first, let's figure out what are smart elements...

A smart element is a structure, container or stripe with the same basic blocks (image, text, button, etc), but there is a special option to receive variable data from external sources. You configure content just once customizing and designing product name, image, price, description and Buy button, and arranging them in the preferred order. Then, add internal and external variables, set the rules on where to receive data from and how to apply it. Done - smart element is ready. Just insert the product page link, and the system will get the data and apply it to specified elements. This way you save a lot of time specifying just one link for your smart element - the system will update the rest automatically!

learn more by looking at our article where we explain the Smart Elements further. 

Image Rollover Effect

The image rollover effect helps you entertain and engage customers. Moreover, it saves you precious space in emails, as you can hide product details behind its photo. You can also use this feature to introduce a small game inside the email in which you hide an item (discount code, access link, etc.) and the recipient needs to locate it. There are many more reasons why you need to add image rollover effect to your emails. 

Image rollover effect works on desktop devices. Other users will see the primary image only.

It can be applied to any image you add in email except for the banner one.

How to build image rollover effect:

•  upload image; 
•  in the settings panel, toggle the “Rollover effect” button; 

•  upload the second image — edit it if needed; 
•  insert URL link — it will be tied to both images; 
•  enter the “Alternate text”

Social media icons

The social network icons are necessary in your emails if you want to bring customers to your networks. You can place them anywhere in the email - in the footer or in the middle of the message.

So how do we add the icons to the email?

•  pull the “Social” basic block in your template; 

•  double click it in your template to activate the settings panel; 
•  by default, you will see 4 icons. If they are not enough, click the “plus” button to add extra icons in your email; 

 

•  in the settings panel, next to the social media icon, toggle the “more” button to start working with this particular social network; 
•  insert respective URL links; 
•  enter Title and Alt text; 

•  set style for these icons; 
•  set their size; 
•  and finally set the paddings and indents between the icons. 

Adding videos

According to numerous studies, potential customers are 65% more likely to buy from us after watching a video. Moreover, videos are one of the hottest trends for 2019.

This is a totally safe way of delivering videos because it works perfectly well in all email clients and on all devices.

How to insert URL link to your video

• pull the 1-column structure in your HTML email template
• pull in a basic “Video” block
• left-click the container in the email
• in the settings panel, you will only need to insert the link to your video on Youtube or Vimeo

• the system will automatically fill out the “Alternate text” field
• select the color of the “play button” — it can be white, traditional red and black

The system automatically generates the thumbnail/preview image for your videos. But you may also want to set a custom one.

How to set a custom thumbnail to video in emails

• toggle the “custom thumbnail” button in the settings panel

• upload an image
• edit it if necessary

Adding CTA buttons

Button, in fact, is a URL link beautifully designed. It should be visible, and its copy needs to be clear and concise

How to make a CTA button

•  pull the basic button block into your template and drop it next to the product it is related to; 

•  tap the button block in your HTML email template to activate the settings panel; 
•  insert a necessary URL link; 
•  enter your button label; 
•  set text style, such as font, its type, and font size; 
•  adjust button color, font color; 
•  set a border radius if you like oval buttons; 
•  choose alignment; 
•  set the button border if you like; 

Set internal paddings. They are responsible for the whitespace inside your button. Due to the chosen button layout method, it does not matter where exactly in the button your customers click. Whitespace is also clickable, yet it makes the buttons more appealing and clear;

• set external paddings — they are responsible for the whitespace outside the button, but within the container, it is located in:

 If you'd like to apply a hover effect to your buttons, you need to: 

•  go to the Appearance tab; 
•  enter the "Button" tab; 
•  toggle the "Highlight hovered buttons" button; 
•  set parameters for the buttons and their fonts when highlighted. 

These settings will be applied to all the buttons in your template. If you want to apply the hover effect just to some of them, set the same color both for "Button color" and "Highlighted button color" to the buttons you do not want to apply the hover effect to. It will work only if you set one text colo for both "Text color" and "Highlighted text color".

 The hover effect works in most email clients on desktop devices. It does not distort your email appearance on mobile devices and in email clients that do not support hoverable buttons.

Using menu bars in email campaigns

A menu bar comes in handy when a recipient would like to go directly to the information they need instead of looking for it directly on your website. The mailing tool allows you to build a menu of your choice. Follow the steps below to add the menu:

•  click the “Content” tab in the settings panel; 
•  drop the 1-column structure and put it below the logo; 
•  now  open the “Blocks” tab; 
•  drop a menu block and drag it into your template; 

•  add  extra menu items if you like. By default, the tool offers three of  them; 

•  now in the settings panel, you need to choose whether to use icons,  links, or both. “Icons” stand for the images in the menu; while  “links” stand for the names of the menu tabs; 
•  once you select the links type, you will see that the color and font of your links, that you previously set in the “General settings” section, are already applied to the menu links. I made  them bold by clicking the “B” icon in the settings panel; 
•  now  you need to name each menu item; 
•  insert  necessary URL links; 

 

•  do  the same to all menu items; 
•  if  you want to hide some elements for mobiles, just click the “Hide  on mobile” icon; 

 

Adding a spacer to your email

Spacer, aka divider, does not drive conversions, or anything else. This is just a decorative element, which makes emails look structured and leads to a better and easier perception of email content.

Adding a spacer

•  drag the 1-column structure into your HTML email template; 
•  drop the “Spacer” block; 

•  set its color; 
•  to set the “thickness” of your spacer — you need to set the “number” in the “Line” section — increase/decrease numbers; 
•  you also need to choose the style of your line. It can be solid, dashed and dotted; 
•  set width — the width here is measured in %, not in pixels
•  specify spacer alignment. By default, center-alignment is set. If you like, please change it in the “alignment” section; 
•  toggle the “responsive spacer” button for a spacer to render properly on mobile devices; 
•  if necessary, set paddings. 

Email rendering on mobile devices

Yes, in the General Settings tab, you’ve already set your preferences. Yet, they are applicable to desktop only. You need to specify your preferences for mobiles, also. Why would you?

Because, for instance, your font size is 14 px, but it will seem small for mobiles, 16 px is more preferable here.

But, say, for info area/footer, 12px will be enough.

And it’s critical to allow “full-width” for buttons on mobiles.

Don’t let your customers miss the buttons :)

 How to set preferences for mobile view: 

•  In the settings panel, click the “Appearance” tab; 
•  click the “mobile view” tab; 
•  set your preferences for headings size, for text size in different content areas, and text size in buttons.