General settings
This section allows you to apply one style to all elements in an email message. You can configure font colour, button colour and form, link colour, padding for content, line spacing, e-mail background colour as well as e-mail width.
Email width - is set to 600 pixels by default - this is the most common size.
Padding - the external indentations are configured here. Size is specified in pixels.
Note
Padding will be used only for all new structures added to the email from the "Content" tab, or when adding new stripes.
Email background colour - applies to the entire space of the email. If the message is open on a desktop, the background takes up the entire area of the email, while on mobile screens it is hidden.
Content background colour- the colour inside the email, which is applied to all containers with product cards, contact information, etc.
Adapt for Gmail App- adapts the email template for different versions of the Gmail App.
Note
Gmail App for Android has a built-in feature to adapt emails for mobile devices, but different versions of the app show different results with the same email.
If any of the styles that you apply to a single line/container/block differs from the styles configured in the "General settings" section, then it will take precedence over the general style.
It is recommended that you select fonts, colours, buttons, and padding before starting to work with your email template. However, the background colours of the email and content can be configured after the entire template is ready. In this way, you will see whether all the configured elements really blend well with one another.
Headings
General settings are applied only to the body of your email template.
The “Headings” block is used to configure the heading font, size and style.
Header
This is the very first element of the email message which will be seen by users. It usually has a brand logo and menu.
Let’s take a look at how to add a logo to the header of your email template.
To add a logo, you need to perform the following steps:
- click on the header block in your empty template
- click the “Image” button or drag and drop the image into the block you need
- add a link to your site
- add alternative text for the logo
Alternative text is required to:
- bypass spam filters
- recognise the details of the image in case it isn't displayed in the email.
- comply with email accessibility guidelines
Let’s look at how to add a menu to the header of your email template.
Steps to follow:
- click the “Content” tab in the settings panel
- drag and drop a structure with 1 column under the logo
- open the “Blocks” tab
- click the “Menu” block, then drag and drop it into the template
In the settings panel, you can decide whether you will use icons or links (or both). Icons are menu images and links are the names of menu tabs.
Next, name each item and add links to them.
If necessary, you can hide some elements for mobile devices by clicking the option “Hide element” > “On mobile”.
Footer
You can add contact information to the footer of the email template, for example, site address, links to your social media accounts (presented as icons), an unsubscription link and author of the mailing. All of this information is mandatory.
Button
You can design a button as a converted URL. It should be visible and with a short text.
Mobile view
The size of headers, button text and content in different containers are set here.
Please note that these settings will only work in the mobile version of the email template in clients which support media queries.