E-mail layout

Step 2 - Template >

E-mail layout

Previous pageReturn to chapter overviewNext page

The commands in this window are for defining the style of the e-mails created, for example, in the Contact Form Object or Shopping Cart.

First of all, you have to select the E-mail Item you want to define a style for, selecting it from the drop-down menu or clicking on it in the preview.

The elements of an e-mail that you can define styles for are:

E-mail Layout: the e-mails created by the Program all have an identical layout: a outer background with a central area for the message. You can include a border around the central area to visually separate the message from the background.

Image/Company Logo: you can add an image to the e-mail header. This could be a company logo or a banner that is as wide as the e-mail.

Message Content: this is the central area of the e-mail, where the message is written.

Social Buttons: a section that displays the social media you have an account on and which you can make available for the e-mail recipient.

Footer Note: this is the text that ends the e-mail. It is normally a standard text, written in a smaller font.

According to the selected E-mail Item, you can work with different options, which are available in the Style section:

Background Color: this one is available for all the elements, and you can use it to define the background color. Of course, by using the same or different colors for the elements, you will get widely differing results.
Border Color / Border Width / Rounded Corners: available for the E-mail Layout only, these options can be used to define the color, the thickness and the rounded corners for the border that separates the outer frame from the body of the e-mail.
Position: available for the Image/Company Logo and the Social Buttons, you can define if these elements need to be displayed Inside the frame or Outside the frame . If the Social Buttons are displayed outside the frame, the Footer Note will take up the same position too: otherwise, it will be possible to freely choose how to place them.
Image File: you can use it to select the image to use as Image/Company Logo in the e-mail header. You just need to click on the button (Local File) or on the button (Online Library)  to choose the graphic format to be imported: .JPG, .GIF or .PNG.
Margin: to set the horizontal or vertical margin for all the available elements, except for the E-mail Layout.
Alignment: to set the Left, Center or Right  alignment for the  Image and/or Footnotes.
Width: this option automatically reports the original width of the image you added as Image/Company Logo, and which you can modify if you want. The maximum width for Images is 700 pixels and depends on the structure of the e-mail. This parameter ensures proper display by all mail clients.
Text Color: to define the color for the text of the e-mail and the Footnotes.
Font Type: specifies the font, style and size to use for the text. The menu shows the command for applying the Default Font (defined by the style of the Page Text item in the Text Style window), the list of safe fonts (those which are present on all devices and do not need to be published, and all the Google fonts and web fonts added in the Add web fonts window, which is opened by the Other font types command.
Style: to define the graphic style for the icons used for the Social Buttons. If you choose the Flat style, you can select an Icon Color.
Icon Size: to set the size in pixel for the icons of the Social Buttons.
Type: here you can find the list of the Social Media you can activate. Select one and report the Website URL corresponding to your profile in order for the correspinding icon to be displayed in the e-mail.
Text: to write the text that needs to be used as Footnote. By default, a text about the confidentiality of the message is proposed.