To speed up email production and set one holistic style for the entire email, you need to work on the design styles in the "Appearance" tab.
All the styles that you set in the "Appearance" tab will apply to the entire email. How does it work? You set design styles for a certain element just once, and these design styles will apply to this element across the entire email no matter how many times you are going to use it. And there will be no need to work on its design every time from scratch.
The Appearance tab contains the listed settings for:
General settings;
Stripes;
Headings;
Buttons;
Mobile Formatting.
Let us take a closer look at each of these sections.
General settings:
In this tab, you work on your general email design styles: you customize email message width, default padding for structures, background color as well as image, font, line spacing, paragraph bottom space, underline links, RTL text direction, and responsive design.
We are now going to cover only the most important controls:
By default, the message width is 600 pixels. Today, this is the most standard size among all email clients. You can change it according to your preferences;
Message Alignment allows you to change the horizontal position of an email in the workspace of the inbox. You can align the template's position to the left or right edge of the screen, or keep it centered;
Default paddings stand for the fixed padding size of structures that you will be adding to your email message in the future. You can set separate padding for each side of the structure or remove them altogether;
Next, we would like to draw your attention to the difference between the two controls: the General background color and the Background image;
The General background color is the background color applied to the entire email message area. The background color will cover the entire message area if the email is opened on a desktop device. While on mobile devices, it is hidden.
The Background image is the image that will be applied to the email message over its background. To do this, you need to pick an image of the correct size and specify its position on the Settings panel in the editor.
Click the "Repeat image" control if you want your image to be applied to the entire email message regardless of its length.
Important to note: The background image will only render on desktop devices and not on mobile devices.
The chosen font will be applied to all "Text" blocks in the email except for Headings. You can choose any standard or custom font from the list;
Line spacing is the distance between the text lines in text blocks. You use them to give your email a more formal or informal style — this is totally at your discretion;
The "Underline links" control helps you enable or disable links underlining for the entire email;
The "RTL text direction" option allows you to write texts from right to left. Meant for those who write emails in Arabic, Urdu, and other languages that use the RTL script. Enable this option to make your texts, including numbers and punctuation, readable for people worldwide;
Responsive design — this option is always ON by default.
If you turn this option OFF, your email on mobile devices will look just like it does on desktop devices.
Stripes:
Stripe is the email message area containing structures, rows, containers, and basic blocks. Below, we will show you how to work with the stripes.
To add stripes, click the "+" icon at the bottom left corner of the stripe.
Every stripe might have its type: Header, Content, Footer, Info area. You can set it manually in the "Message area" settings.
Using different types of stripes can be helpful for advanced adjustments.
In the future, the stripe design styles will directly depend on its area.
You will be able to:
set individual font sizes for each stripe (it is especially necessary for the "Footer" stripe, where small fonts are more preferred);
set the font and link colors;
also, highlight the stripe and its content with a color. This is especially useful when you want to draw users’ attention to a certain email element;
the "Background image" option is another way to help you customize the background. It is required when according to the corporate guidelines, there should be images in the background or backgrounds with a logo.
Please note: Some email clients, like Outlook, may not display a background image. Therefore, we recommend that you set a background color for the entire email as a fallback. The color should be close to the color of the background image.
Headings:
Sometimes we need to highlight certain words or entire sentences to emphasize the importance of information or just visually separate email sections.
This is when Headings help. To apply heading styles to a certain piece of text, we need to highlight the latter and choose a necessary heading in the text formatting menu.
Then, in the Settings panel, you set the necessary font type, size, style, and color for the headings as well as line spacing.
Buttons:
Buttons in emails are always a call to action. They invite users to go to the website, place an order, follow on social media, leave a comment, vote for the best product, etc.
In the editor, you work on their design, so they don’t go unnoticed :)
The button menu allows you to set some default parameters that will be applied to all buttons in the email, so you can set:
font size, font style, and color;
button color;
border-radius;
the full content border, or do it separately for each side with an option to customize the border color;
internal padding;
Activate the "Highlight hovered buttons" styles and set hovered colors. The button colors will change when you hover the mouse over it;
The "Support of Outlook" control allows improving buttons displaying in Outlook by inserting a special VML-code element.
Mobile formatting:
Responsive email design comes as no surprise today, as we all know that mobile-friendliness, aka mobile optimization, is no longer just nice to have; it’s a must.
To make your emails fully legible across any device, you can apply font sizes to headings, to different stripes, to buttons, etc., that differ from the desktop version of your email. You can also work on internal paddings inside containers and hide/disable certain elements on mobile devices.
To do so, you need:
go to the "Appearance" tab;
open the "Mobile formatting" section;
apply font sizes to headings H1, H2, and H3 and to different stripes;
set button text size. 18px or higher is the most optimal size here;
enable the "Full-width buttons" option to fit the button on a user’s mobile screen.
All emails that you build with Stripo are responsive by default.
The option allows the image to adjust to the width of the mobile device's screen. Warning: Adaptivity only works on devices that support it.
However, you can disable the "Responsive image" design for some email elements.
While building an email template, you will be shown a mobile icon. This means that you can adjust the element for the mobile display by clicking on it.
For example, configure padding for the mobile view:
If you want to hide some elements on mobile devices, you don’t have to cope with HTML code anymore as now there is the "Hide on mobile" option in the Stripo editor.
With this option on, you literally forbid certain elements to display in the mobile version of your email.
Thank you for taking the time to read our articles. We hope you will find this information helpful.
If you have any additional questions, please email us at support@stripo.email.
We would be glad to talk with you.