Email builder
How to make general settings:
- in the settings panel, click the “Appearance” tab;
- choose the “General settings” tab;
- set the parameters that you like or the ones that comply with your brand book.
We strongly recommend setting fonts, colors, buttons, padding prior to starting working on the email. In this case, all these settings will be applied to all elements across your email. Yet, email and content background colors should be set after the email is ready. This way, you see if they really fit in well.
How to set styles for Headings in emails:
- in the settings panel, click the “Appearance tab”;
- then select the “headings” tab;
- set the font and line spacing;
- set font size and color for each heading (H1, H2, H3).
Firstly you need to add a stripe. To add stripes, click the "+" icon at the bottom left corner of the stripe. Choose a stripe with 2 separate structures and set it as a Header stripe.
The header element requires two separate rows: one for the logo, and the other one for the menu.
How to add a logo to your emails:
- click the “image” icon, or drag and drop the “image” block in a container;
- on the left, in the settings panel, the system will ask you to drop your image of the JPG, PNG, or GIF format, not more than 3 Mb and maximum picture resolution of 4000 х 4000 px. 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 — my logo’s width is 144 px;
- center alignment is set by default. If you need to change it, click “left” or “right” alignment. Also you can set alignment for mobile by clicking on Mobile icon.
- Besides you can set padding for mobile view.
The default values for the desktop version of emails/templates are used for mobile view. So if you are not going to use the same padding or text/image/button alignment, click on the "Mobile" icon and set padding/alignment which you like.
How to add a menu to your emails:
- drag and drop the “menu” block in a second container;
- add extra menu items if you like. By default, there are 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, which I 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. I made them bold by clicking the “B” icon in the settings panel;
- set separator and its color between items if you need;
- now you need to name each menu item;
- insert necessary URL links;
- set a background color of items if you want;
- do the same to all menu items;
- if you want to hide some elements for mobiles, just click the “Hide on mobile” icon;
How to add a copy to your emails:
- drop the 1-column structure into your HTML email template;
- pull a “Text” block into it, or click the “text” button right in this structure;
- enter your greetings;
- double click the very text;
- set headings where necessary. In our example, for the greetings, I chose headings 2 — and as long as we’ve set parameters for Headings in the “General Settings” tab at the beginning, email builder automatically used them (Arial, 24px) for our email;
- enter your text in the next line;
- highlight it;
- set alignments;
- add links where necessary.
- If you want to attach a parameter from the task for example: - Text property then you need to add symbols for start {{ and for end }} - Rich text property then you need to add symbols for start {{{ and for end }}}
How to add links to text:
If you need to add links to text, but not only to CTA buttons, you need to:
- highlight a necessary word/words;
- in the setting panel, at the top, click the “Link” icon;
- then in the settings panel on the left/right, the system will ask you to paste your URL and once again will remind you what word the link is connected with.
You may or may not underline links in emails — do as you like.
How to build 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;
- added a new control "Size" in the basic block "Banner", which allows you to set your own height of the banner cropping area;
- apply filters if you like;
- paste the link that will take recipients to the place related to the value offer described in 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 text over the banner, 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 same 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. You also can place text over it.
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;
- our 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.
You may even insert an animated GIF as the thumbnail image.
