Global styles

Create a brand across all your emails

Set global styles to standardize design elements across all of your emails in a single workspace. Add text colors, fonts, the radius of standard components like buttons, and spacing - padding and margins.

Manage global styles

You can manage global styles by clicking Global Styles in the sidebar or while you're editing an email.

On the sidebar, find Global Styles above your File Explorer and below Email Analytics.

Global Styles is linked above File Explorer and under Email Analytics on the sidebar. To the right is the global styles landing with a list of colors, fonts, and settings for radius and spacing.
Global Styles landing page
TipWhen you save changes, they cascade to all emails and templates using the global style.

You can also modify global styles while editing an individual email. In the properties menu, click into any color, font, radius, padding, or margin field and you'll see a link to view and modify global styles.

The right hand properties panel. The field Text Color is clicked. A list of global style colors appears under the field. At the bottom is a button labeled View Global Styles.
Click View Global Styles to open the panel.
After you click the paintbrush icon at the top of the editor, you see this right-hand panel titled Global Styles where you can change all global colors, fonts, and sizing.
Global Styles in an email

When you change global settings in an email, the change impacts ALL your emails, not just the one you have open. If you delete a global style in use, we detach the style from global ones and make no change to the emails.

Colors

In Global Styles, click Add color then specify a variable name that you'll use when creating components and see when assigning colors during email creation. Add the hex value and specify the opacity or click the color preview box to choose from a color wheel.

On the global styles landing page, add color was clicked and a small modal appears with two fields: name and color.
Add a color to global styles

In an email or template, click the component you want to update to open the properties menu. Click the color field to choose from your list of global colors. This is where you'll see the variable name you set.

On the properties panel of a component, click the color text box to see a list of global colors available.
Assign a color variable to a component

If you're using html tags in your email, they will inherit global styles of higher-level components. For instance, if a <div> of text is nested within <x-section>, it will inherit the color and font of the section component.

Fonts

In Global Styles, click Add font then specify a variable name that you'll use when creating components and see when assigning fonts during email creation. Choose the Type of font - if you choose Standard, you'll choose from a list of available fonts. For instance, you could add a variable name of primary-font for Instrument Sans so anyone creating emails can quickly locate your brand. If you choose Custom, you can add an external stylesheet, for example https://fonts.googleapis.com/css?family=Tangerine, and specify a fallback font.

On the global styles landing page, add font was clicked and a small modal appears with three fields: name, type and font.
Add a font to global styles

In an email or template, click the component you want to update to open the properties menu. Click the font field to choose from your list of global fonts. This is where you'll see the variable name you set.

On the properties panel of a component, click the font text box to see a list of global fonts available.
Assign a font variable to a component

If you're using html tags in your email, they will inherit global styles of higher-level components. For instance, if a <div> of text is nested within <x-section>, it will inherit the color and font of the section component.

Radius

In Global Styles, click Add radius then specify a variable name that you'll use when creating components and see when assigning radii during email creation. Add the pixel value for the radius.

On the global styles landing page, add radius was clicked and a small modal appears with two fields: name and value.
Add a radius to global styles

In an email or template, click the component you want to update to open the properties menu. Click the radius field to choose from your list of global radii. This is where you'll see the variable name you set.

On the properties panel of a component, click the radius text box to see a list of global radii available.
Assign a radius variable to a component

Spacing

You can set global styles for spacing on any margin or padding field. In Global Styles, click Add spacing then specify a variable name that you'll use when creating components and see when assigning spacing during email creation. Add the pixel value for the spacing.

On the global styles landing page, add spacing was clicked and a small modal appears with two fields: name and value.
Add spacing to global styles

In an email or template, click the component you want to update to open the properties menu. Click the margin or padding field to choose from your list of global spacing. This is where you'll see the variable name you set.

On the properties panel of a component, click the margin text box to see a list of global spacing available.
Assign a spacing variable to a component
Previous ArticleNext Article