1. Default settings
When you start an email template from scratch, there are a few general styling options that you may want to consider. These options can be found on the Defaults tab on the right panel.
1.1 Email background
This option sets the whole background of the email. You can choose color, or an image. Keep in mind that in most email clients, especially on compact devices, not too much will be visible from the background of your email, unless you choose transparent content elements. So it is mostly just for setting a general mood for the template.
1.1.1 Colored template background
According to the above, be careful when choosing a general color for your background. It is better if this color is not in a big contrast to the content, this way you can avoid having an awkward distinct frame around the content on compact devices.
1.1.2 Background image
The same caution is advised with background images as with background coloring. It is likely that just a small portion of the image will be visible in most cases. Therefore in it is not wise to use a big background image for a couple of reasons:
1. A big background image can highly increase the size of your email, so it will load slower in every email client (especially on mobile internet).
2. Warning: Outlook 2007, 2010 and 2013 only support background images on the body element (default background image) with "repeat both" property.
A more usual use of the background image is tiling. Using a small repeatable image that resembles a material, or shows a geometric pattern. This is a much wiser use, since this way you don’t need to include a large image in your emails, so your message will still load fast even through slower connections.
2. First elements
When you start a template from scratch you get two starting elements: a Full width element and a Box inside that. These two basic elements give the frame to your email template.
2.1 The first Full width element
The first Full width element (Row) acts as the base of your email, it fills the whole window of the users email client where the email us read. It is essential for the template to be displayed correctly. You can add any number of Full width elements to your email templates. It’s quite common to have three of it in a newsletter: one for the header, one for the content and one for the footer. If you follow this approach you can easily set different background colors for the separate parts of your email message, and give a website like feeling to your email templates.
2.2 The first Box – a Container
The Box is a container element that usually groups different elements together, titles, texts, images, tables and so on. It is also a tool that can give a different background color or image (this background image is not supported on Outlooks, so in case you still use one, please use a similar fallback color as well) for an element or a group of elements. Furthermore, the box element is the key to the responsivity of your template. It adjusts to the available width and resizes its contents accordingly. Any element can be inserted into a Box except for the Full width element and multiple Boxes can be nested into each other. Every Box has 5px padding and transparent background by default. You can change both settings if you wish. See 3.2 Box for details on how to do this.
3. Content elements
In the top toolbox you can see the drag elements you can use in your template. To add an element, simply drag&drop it to the desired place in your template..
3.1 Full width
As the name suggests, the Full width element fills the email window horizontally, while its height adjusts to its content. Its’ role is to give a full-width background to a section of your template. You can use it for headers, footers and highlights. Header:
Highlighted section:
3.2 Box
The Box is a container element for your content. It can contain one or more elements. The box (along with the table) provides responsive capability to your template, as it adjusts to the viewing window and sets the contained elements’ size accordingly.
3.2.1 Padding
If the Box has a background or a border you’re better to use some spacing inside, this is called Padding. The size of the Padding can be set in the Position toolbox on the right. If you click on one number, you can set a side separately (top/right/bottom/left padding). If you click on the PADDING label in the middle, you can set the Padding simultaneously on each side.
3.2.2 Margin
The Margin is the spacing outside that separates the Box from other objects. Similarly to the Padding, you can adjust the size of each side individually or set the overall Margin altogether by clicking on the MARGIN label.
3.2.3 Border
You have the option to set the Box’s borders on each side separately or you can set the same border to all sides. First you have to select which side you want to set and adjust the settings afterwards on the right.
If you click in the middle you can set all sides together. To disable a border you can select “None” for its Style, or you can set its Width to 0px.
3.2.4 Background
The Background of a Box is usually used to give a distinct color background to an emphasized text or table. The default background setting is transparent, and you can set a color if you want to distinct the Box’s content by background color. An image can also be used as background. This is good in situations where you want to put text on an image, or you want to use a tiled image to have some geometric pattern or simulated fabric as background. When you have text on an image background, always check how they behave in mobile and tablet views. Because of the template’s responsiveness the element’s positions change according to the viewing size and this may affect how your text looks like on your image.
3.3 Image
The most eye-catching parts of your template are most likely to be images. In old school newsletters images dominated the content, but nowadays we usually see a healthy mix of stylish images and well-designed content in most beautiful responsive email designs. Whenever you create an email template always think about the purpose of your message and align your image and text content to the desired need. In some cases a stunning image will sell your product, while in other cases – for example in business consulting – rather a convincing sentence will do the job for you.
3.3.1 Media library
Images will not be sent along with your email message, instead they will be linked in from your Media library (Gallery). That is why you do not just throw images directly from your computer into your template, but upload or import them into the Media library at first, and pick them from there. You need to double click on the Image placeholder to bring up the Media library, or you need to push the “Jump to Gallery” button in the Image toolbox on the right. With the Upload option you can upload images from your computer to the cloud, or you can import images from URL, if they are already hosted somewhere on the web.
3.3.2 Image settings
After putting an image into your email template you need to click on it to set it’s properties. Right below the preview you can add a link to the image, as well as an alternative text. Add Link to an image Because the images are visually strong, it is a good practice to use them as links – readers will probably try to click on them. Add Alt text to an image The alternative text is displayed when the image is not available. Email clients often do not display by default, only after confirmation from the user. In some rare cases images may not be displayed at all. So it is good to have at least a text describing what the image should tell to the user, or provide something to click on. Size and aligning If the Image size is large enough it will fill the horizontal space available and adjust its height accordingly to keep the image ratio. The space available will be defined by the container element of the Image, usually a Box or a Column. If the Image is smaller than its container, it won’t be stretched but will shrunk if it is larger than it. You can reduce the size of your image by using the slider or input field in the Size toolbox. The image can be aligned inside its container element to the left, center or right. It is important to note that the widest view of your responsive template is 600px. This means that it isn’t worth using larger images than this. Keep in mind that the email client has to download the images to display them, and this can be a slow process if there are big files to download. Just think about mobile devices and small mobile internet connections. So try to minimize the size of the images you use.
Padding, margin, borders and background The other options can be set exactly like in case of the Box. With the Margin you can set a distance to be held to other objects for example Text. Be careful with side margins though, as they may not be welcome in your mobile view. If you want to put image and text next to each other, you should rather set the image’s and its container’s size so that the image has a distance to the next object. Setting top and bottom margins are safe in terms of responsiveness; they should not cause any problems in mobile view. If you want to create “frame” effect around your image you can add a background color, add some Padding, add Borders and even some Margin to have spacing between your image and other elements.
3.4 Text
Text content is another essential part of your email message, so we built-in all general text styling options to the editor for you. This way you are able to define exactly how you want your written content to be displayed in your email templates.
3.4.1 Typography settings
What kind of font you use greatly influences your template’s style. A good rule of thumb is not to use many different fonts, it’s better to stick to one or maybe two – one for headings and one for content text. The preset font sizes are generally good for almost any kind of template, but feel free to change them. The bigger the text, the safer that it can be easily read on mobile devices. For every kind of text there is an option to change the color and the line-height. The color is obviously important for your style, whereas the line-height helps with the legibility of your text content. You can set whether the links in a text should be underlined automatically, and also define their color. It is important to note that you can override these settings with the built in text (WYSIWYG) editor.
3.4.2 Fonts
You have the option to choose from 7 different fonts, some of them more classic, book-like (Times, Georgia), others more modern (Arial, Helvetica), and some in between. Because it is generally not a good idea mixing different styled fonts, it makes sense to choose one. Most content on the web is written in Arial, as this is one of the most widely used fonts of all time on electronic devices. Probably the safest choice too if you want to make sure your template gets displayed the same way on every device, in every email client.
3.4.3 Font colors
Font color is an important factor in readability, together with the background of course. Try to choose a color combination with a comfortable amount of contrast – not too high and not too low. Using different colors is one of the best ways of highlighting / emphasizing text, so setting different color for headings makes sense. The colors are independent, so if you want to change heading color generally, you have to change it in every heading. If you have already chosen a custom color, do not try to match it next time by hand, pick it from the last used section! This way you will not end up using different shades of the color you wanted to use.
3.4.4 Line height
Default setting for line height is the same size as the font. With bigger line height the text becomes more readable. At the same time, a too big line height can ruin the look of a paragraph, so adjust it carefully. Please note, that when setting a smaller font size, the line height does not automatically follow the font size, so you may have to adjust the line height accordingly.
3.4.5 Headings
Headings 1-3 are available for you to use in your template. These are generally used in hierarchy, representing different levels of importance. That is what you see in their default sizes.
Heading 1 is usually only used once on a page, for the main title. Heading 2 would typically be used as the title of the different sections, or articles, while Heading 3 is for smaller block titles. Avoid using headings for emphasizing some part of a text. Headings are for titles. Emphasizing can be done with setting bigger size and/or different text or background color.
3.4.6 Links
Most of the time you would want your readers to make some action, so it is essential for them to see where to interact, what to click on. That’s why links should be easy to distinguish from rest of the text. Usual methods of making links distinct are underlining and/or different coloring. You can set these options under Typography settings as well. In some places links are self-explanatory and do not need different styling, for example in menus, or block titles. Here you can set the link color matching the text color, and switch off underlining.
3.4.7 Text editing and styling
You have a convenient (WYSIWYG) text editor built into our system to add text, set paragraph format (heading1-3 or normal) and styling options. You can activate it by double clicking on a text. This is also the tool with which you can add links to the text. It might be useful to add multiple text elements if you would like to have different text styles in your email template for example a “block quote”, “footer text” or “promotional message”.
3.4.8 Spacing
The Spacing of a Text is like the Margin of a Box or an Image. Its role is to separate the text from other elements. Just like in the case of Margin or Padding, you can set the Spacing of the Text on each side separately or together for all sides by clicking in the center on the SPACING button.
3.5 Button
The Button is the obvious place of interaction in your template. This is the element with which you usually need to use as the main call-to-action (CTA) in your email templates.
The Button is a really important element so there are lots of styling options available in the editor to help you create stunning responsive buttons. You can set the link where the Button should take the user. You can adjust the border radius as well. You can align the Button in its container element. You can set the Buttons width to adjust to the text in it, or to have fixed width (in pixels). In mobile view the Button fills its container horizontally by default, making it easier to push on smaller devices. This behavior is called Fluid. You can turn that off if you want to keep your buttons size (Fixed). Buttons have Margin and Padding just like a Box. The Padding sets the Button’s height, together with the size of the Button’s text. It also can set the Button’s width, if the sizing is set to Fit to text. The Margin has the same function then in the case of other elements – to keep distance from other elements. You can set the Borders of a Button the same way as for a Box or Image. You have the option to set the Buttons background color or to choose a background image. The background image is a great option in case you want a custom Button design that is not achievable by just colouring and setting borders.
Note: Backround images are not supported in most Outlooks, so always have a fallback color in this case!
3.6 Column (/Multicolumn)
The Column is the tool for dividing text horizontally. It can be used in various ways and has a lot of useful options. You can add up to five columns to a Column set. You set the width of the individual columns in pixels according to the desktop view, but by that the columns in fact get a relative width in percent (relative to the total width). This makes the columns able to adjust their size when in different environments (for example different devices, different email clients). You can rearrange the columns in the right panel by drag&drop, equalize them, or delete the selected one, if there are more columns than two.
3.6.1 Fluidity
A column set adjusts its width to its container element. Because of their relative sizing the columns can change their absolute width when viewed on smaller devices, keeping their ratio to each other the same. When you are styling your columns you can lock the width of those that you already set. In this case only remaining columns will be resized, and the Locked columns will remain the same. Note: Sizes are locked in % not in pixels! If you don’t want a given column to appear on mobile, you can simply hide it with the display on mobile function.
3.6.2 Mobile settings
Individual Columns are reordered (from left to right) to one column by default on mobile screens. This is happens in order to keep the text as readable as possible. But in some cases (for example in case of small social icons) you may want to turn this behavior off. This can be done with the “Reorder columns on mobile” switch. And in some rare cases where the whole column set cannot be used well on mobile phone in any form, you can hide the whole set.
3.6.3 Uses of Columns
Image and text
Table
Menu
Icons
Two column structure
3.7 Complex
The Complex element is a group of elements that you can save and use it later anytime. For example if you use often image and text next to each other, you may save that structure as a Complex element, then next time you will not have to build it up again from scratch using Column, Image and text elements. To make use of this function select the containing Box, scroll down to the Complex element manager in the right menu, name your element and hit save. Later you can drag-and-drop a Complex element from the top menu to your template and choose from your previously saved elements – and magic happens