Setting up Global Styles
Marketers find it helpful to define all Global Styles prior to dragging components into the stage.
Email Builder / Drag-And-Drop Editor / Control Panel / Global Styles
- Select the Global Styles Tab in the Control Panel
- Select the collapsible accordion element labeled Typography
- Assign the following Page Text (Paragraph/Generic) style values:
- Text Color: the color of the generic text
- Font Family: the web-safe font face of the generic text
- Font Size: the font size of the generic text - follow the numeric value with a unit of measurement
- Font Style: select bold, italic, both or neither if it does not apply
- Line Height: the vertical space between lines of text
- Letter spacing: the horizontal space between individual letters - follow the numeric value with a unit of measurement
- Text Alignment: the basic alignment of the text - choose between left, center, or right alignment
- Assign the following Anchors (Text Links) style values:
- Text Color: the color of the generic text
- Font Family: the web-safe font face of the generic text
- Font Style: the characteristics of the text - select bold, italic, both or neither if it does not apply
- Text Decoration: the visual affordance of the text - choose between none, underlined, or overlined
- The remaining attributes are inherited from the format of the hyperlinked text.
- Assign page headers h1 through h4
- Text Color: the color of the generic text
- Font Family: the web-safe font face of the generic text
- Font Size: the font size of the generic text - follow the numeric value with a unit of measurement
- Font Style: select bold, italic, both or neither if it does not apply
- Line Height: the vertical space between lines of text
- Letter spacing: the horizontal space between individual letters - follow the numeric value with a unit of measurement
- Text Alignment: the basic alignment of the text - choose between left, center, or right alignment
- Select the collapsible accordion element labeled Page
- Assign a background color. This is the background color of the space around the content container.
- Select the collapsible accordion element labeled Preheader, Header, Body, and Footer
- Assign a background color. This is the background color of each individual section.
Note: Matching the Page background color to any individual section will make the design of your email not feel as constrained inside of the container. This technique can also be used in the borders component when matching the designated background color to the Page background color. As a result, the email design will appear as if it is made up of multiple vertical containers or cards. These are great techniques to segregate content. However, be aware of how the email will render when opened in a mobile device.