A profile defines look and feel of entire email, it can be thought of as sort of wrapper around email contents. The extension allows modifying many aspects of email appearance through profiles, such as width, background color, font color, logo image and the like. You can use one profile for all the emails or create as many profiles as you need to and apply them to specific emails. For example, you may want that emails from different stores have a different appearance.
Let’s look closer what controls provides the extension for modify profiles and how they affect an email appearance (figure 1)
Figure 1. Profile controls
‘Profile’ drop-down allows loading saved profiles.
‘Send test letter’ control allows sending a test email to the specified address so that you can check the look of an email in a specific email browser. Preview window content will be used as the content of test email, a profile will be defined from the existing mapping between content and profile.
‘Color scheme’ allows changing color solution for a profile in one click. You just need to select a base color and pick one of the color schemes and profile color controls will change its values depending on a selected scheme. You can select next color schemes:
- analogous – uses colors that are next to each other on the color wheel. They usually match well and create serene and comfortable designs.
- complement – colors that are opposite each other on the color wheel are considered to be complementary colors (example: red and green). The high contrast of complementary colors creates a vibrant look, especially when used at full saturation.
- monochromatic – is a color scheme based on only one, single color tint. It uses only variations (shades) of a single hue, made by altering the saturation and brightness of the base color.
- split-complement – is a variation of the complementary color scheme. In addition to the base color, it uses the two colors adjacent to its complement.
- triad – uses colors that are evenly spaced around the color wheel. Triadic color harmonies tend to be quite vibrant, even if you use pale or unsaturated versions of your hues.
- tetrad – uses four colors arranged into two complementary pairs. This rich color scheme offers plenty of possibilities for variation.
‘Profile name’ allows you to set meaningful profile name
‘Profile edit section’ (figure 1) allows you manage a profile, it contains next controls (from left to right):
- clone profile – allows making a copy of a profile
- delete profile – deletes profile. Some system profiles cannot be deleted and this control button will be disabled for such profiles
- save profile – saves a profile. In order the changes you made to profile became persistent you need to save them. If you don’t want to save changes simply reload the page
- undo changes – undo previous changes
- redo changes – rollbacks previously discarded changes
‘Template width’ – allows you to set the width of entire email. By clicking Bi-unit switch (figure 1) you can set width in pixels or in percents of available width.
‘Template width range’ – this option is available when ‘Template width’ is set in percents and allows you to restrict minimum and a maximum width of the email template. In order to get responsive email layout, you need to set ‘Template width’ as 100% and ‘Template width range’ as following: minimum value as 320px and maximum value as 600px. Of course, values may be different, but template width of 320px to 600px will match the screen of most email browsers. So with these settings, in screen size range 320px-600px, email template will be ‘responsive’ (will fill in all the available width), when available width will be more than 600px – template width will remain 600px.
‘Background color’ – sets email background color.
‘Background image’ – extension allows using image to compound background of an email.
‘Background image repeat’ – in a case when a background image is too small to fill in the entire background it can be repeated to cover all the available surface. There are several options for this setting: do not repeat, repeat along X and Y axis, repeat along X axis, repeat along Y axis.
The above settings are common to the entire email template. Also, each template consists of several parts: header, content, footer. Some templates may contain additional parts: top and bottom. To modify each part you need to use controls of specific sub-tab (figure 2)
Figure 2. Profile sub-tabs
Sub-tabs contain an almost identical set of controls which are:
‘Text color’ – defines text color of specific template part.
‘Font size’ – defines text font size in pixels of specific template part.
‘Link color’ – defines links color of specific template part.
‘Links font size’ – defines links font size in pixels of specific template part.
‘Background color’ – defines the background color of specific template part.
‘Background image’ – defines an image to be used as a background of specific template part.
‘Background image repeat’ – defines whether background image needs to be repeated in case if it’s too small to cover all background surface.
Figure 3. Profile sub-tabs
‘Text align’ – defines text horizontal alignment and can be as follows: left, center, right (figure 3).
‘Text vertical align’ – defines text vertical alignment and can be as follows: top, middle, bottom.
‘Height’ – defines the height in pixels of specific template part (‘Content’ part doesn’t have such setting).
‘Content’ – defines the content of a specific template part. ‘Content’ part doesn’t have that control since its content is email content itself. Controls of some template parts, such as ‘Top’ and ‘Bottom’, have the list of ready to use templates (figure 3)
‘Logo’ – sets logo image (only available for ‘Header’ template part). Double-click on the control to select an image. One click is to switch between embedded/attached image mode. By default, email browsers do not show images. To see images you need to make some explicit action, like click a button and the like. But when an image is embedded some email browsers may show it from the start. But you need to be aware that embedding images into an email will increase the email size.
‘Logo align’ – defines the horizontal alignment of a logo image and can be as follows: left, center, right (only available for ‘Header’ template part).
‘Logo vertical align’ – defines the vertical alignment of a logo image and can be as follows: top, middle, bottom (only available for ‘Header’ template part).
‘Logo width’ – defines the width of a logo image. Can be in pixels or in percent of ‘Header’ part width (only available for ‘Header’ template part).
‘Top margin’ – defines extra space between current template part and the template part above.
‘Bottom margin’ – defines extra space between current template part and the template part below.
‘Padding’ – defines extra space between border and content of a template part
‘Column width’ – defines the width of current template part. Can be in pixels or in percents of template width. With this setting, you can achieve such effect as ‘full-width header’. To do it set ‘Template width’ to 100%. ‘Template width range’ as follows: minimum width to 320px, maximum width to maximum possible value. ‘Column width’ for ‘Top’ (if any) and ‘Header’ template parts to 100%, for ‘Content’, ‘Footer’ and ‘Bottom’ (if any) to 600px. After that, you’ll get a profile that looks like that in figure 4.
Figure 4. Example of full-header template