To speed up email production and set one holistic style for the entire email, you need to work on the design styles in the "General Styles" tab.
All styles you set in the "General Styles" 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 from scratch every time.
The "General styles" tab contains the listed settings for:
General settings;
Stripes;
Headings;
Buttons.
Switching between Desktop and Mobile versions of your email is always an agile option to set the general styles of your email template separately.
Use the "device" buttons to switch between Desktop and Mobile versions:
1. General settings:
In General Settings, you can set up settings for the whole email:
Set the General Background color of the whole email template as well as 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 in the settings panel in the editor.
Click the "Background Image Repeat" control if you want your image applied to the entire email message regardless of length.
Important to note: The background image will only render on desktop devices and not on mobile devices.
Modify the Message Content width, which is 600px by default. Today, this is the most standard size among all email clients. Also, you can set any size between 320 and 900px;
Adjust the Message alignment;
Enable the Underline links control, which helps you enable or disable links underlining for the entire email template;
Manage Responsive design activation:
Enabling this option may help to improve mobile display. However, notice that results may vary on different devices.
If this control is disabled, then the mobile version of your email message will look like the desktop one.
Activate the Right to Left Text Direction:
This 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.
Set a default Custom list styles for the bullet list;
You will find more information about Bullet Customization here.
Set up Default Structure padding, which will be used by default for all new structures added to email from the Content tab placed on the left side of your working space or while adding new Stripes (rows);
Set up Margins around Message.
2. 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, or 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 Stripes tab, you can set up:
The font family, line height, and letter spacing for all types of stripes at once;
The chosen font family will be applied to all "Text" blocks in the email template except for Headings.
Line height 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.
Letter spacing is an optically consistent adjustment to the space between letters to change the visual density of a line of text.
Set the stripe and content background color as well as the background image, font size, font color, link color, hover link color, and enable the Paragraph Bottom Space for all stripes of the same type.
Select the desired type of stripe and customize its appearance:
Highlighting the stripe and its content with color 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, 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.
Setting individual font sizes for each stripe is especially necessary for the "Footer" stripe, where small fonts are preferred.
More information about stripes configuration can be found in our separate article here.
3. 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 headings 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 "General Styles" tab, you can set the necessary font family, and letter spacing and enable the Paragraph Bottom Space for all types of headings at once;
Also, you can apply the separate settings for different headings by choosing a necessary heading;
Apply font size, line height, and text style, as well as the font color.
4. 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 template, so you can set the following:
Font family, font size and color, as well as text style;
Letter spacing;
Button color;
The full button border, or do it separately for each side with an option to customize the border color;
Set a border radius;
Enable Fit to Container;
Add paddings inside the button.
The "Support of Outlook" control allows improving buttons displaying in Outlook by inserting a special VML-code element.
Furthermore, you can activate the "Hover button styles" to make your buttons more attractive and animated.
The button color stands for the primary color, the highlighted button color stands for the color your users see when you move the mouse over it, and the text color also will be changed with the highlighted font color.
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.