Welcome to the default settings support article pertaining to our drag & drop email editor. In this article you will find more on topics such as:
- Email background.
- Colored template background.
- Background images.
- Default typography.
- Font colors.
- Line heights.
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.
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, there will not be much to see from this background, unless you choose transparent content elements. So it is mostly just for setting a general mood for the template:
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 was you can avoid having an awkward distinct frame around the content on compact devices:
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 most cases it is not wise to use a big background image, the more because the client has to download that big file, even on mobile devices, and that can lead to slow loading and unnecessary network traffic and costs.
The more usual use of the background image is tiling, using a small repeatable image that resembles a material, or shows a geometric pattern.
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. Setting default fonts for the template encourages this good practice, and saves a lot of time when editing by not having to set fonts over and over again for standard text or headings.
The default 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 well read on mobile devices.
For every kind of text there is an option for the colour and the line-height. The colour is obviously important to your styling, whereas the line-height, though effecting style as well, is more a factor in readability.
You can set generally whether the links in a text should get underlined automatically, and what colour they should get.
It is important to note, that later when editing the content of the template, every one of these default settings can be overridden. So for example if you would like to get the links in the template’s content underlined, but at the same time you plan to make a menu on top where you don’t want underlining, that will be no problem, you will just change the default behaviour of the links in the menu and that’s all.
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 generally. 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.
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 more different shades of the one color you wanted to use.
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.
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 your emails sections, or articles, while Heading 3 for smaller blocks’ title.
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 color or background.
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 get some distinction.
Usual methods of making links distinct are underlining and/or different coloring. You can set these options generally for every link you create later.
In some places links are self-explanatory and does not need different styling, for example in menus, or block titles. Here you would set the link color matching the text color, and switch off underlining.