Note: While our most popular guides have been translated into Spanish, some guides are only available in English.

Styling email campaigns

Each email campaign is made of multiple sections. Although you can style most sections separately, there are certain “global” style settings that affect your whole campaign. This creates a consistent look to help you maintain a unified brand.

These global styles are applied throughout each campaign:

You can also save and reuse colors for any element.

Tip: To adjust global styles, click the area outside the sections (the email background).

Style a section

With the exception of global styles, each section is styled separately. Click a section in the preview on the left, then use the right panel to style it. For more help, visit our tips on building and styling each section type:

Choose your fonts

In any section, click Font Pack to set the fonts for all text in a campaign.

Font packs are combinations of fonts, carefully chosen by our designers to be pleasing to the eye and help your subscribers focus on your message. Browse the options to find a font pack that matches the tone and content of your campaign.

There isn't a way to edit individual fonts within a font pack. Our font packs are curated to look consistent across a wide variety of mail clients. Most mobile email clients, for example, don't support webfonts, and instead will replace them with their own default fonts. The fonts in our font packs are selected for maximum compatibility, so you can be sure that what you see in your draft is as close as possible to what your subscribers will see in their inbox.

If you need a different font in a specific location, consider adding it as an image, or using color and formatting to distinguish your text.

For example, in the Bloom layout, the "Bloom" is an image added to the header, and "extra special" (in its own text section) is italicized and pink to help it stand out:

bloom.png

Set your text sizes

In any section, click Font Sizes to set the size for all text in your campaign.

  • Use the Base Font Size slider to choose the size of your campaign's body text.
  • Use the Type Scale slider to set the text size contrast. For example, a lesser type scale will result in a “flat” email, where headers are only marginally larger than paragraph text, and a greater type scale will make headers relatively larger.

font-size.png

There are a few exceptions. Header text has its own size settings, and the following elements are currently a fixed size:

  • Header text
  • Button text
  • Blog post and product titles
  • Product prices
  • Blog post dates
  • Unsubscribe links
  • Footer address text

Change your colors

When you click an element to change its color, such as a background area or font, you'll see swatch circles for the colors currently used in that campaign. You can use these colors or add new colors.

  • To use an existing color, click its swatch.
  • To add a new color, click within the color picker to find the color you want, then click the + icon in the swatch that appears.
  • To delete a color, click the swatch, then click the X icon that appears.
Tip: If you accidentally delete a color, see our troubleshooting tip.

adjust-colors.gif

Tip: See our tips for creating character through color.

If you know the value for the color you want, you can enter it in the value field. This is a great way to copy exact colors from other style settings. The value field accepts HEX and RGB.

color_code.jpg

Background colors

Each section has its own background color.

  • Click a section and then click Background Color to set its background color from your campaign's swatches.
  • Click the area outside the sections to adjust the surrounding Email Background.
  • For image sections, the background color only shows behind captions and transparent image areas. For example, if you selected the Below image section layout and hid the captions, the background color won't be visible.
  • To create a transparent background, choose the swatch on the left with diagonal lines.

transparent_color.jpg

Style text links

Text links follow your global font pack and global font sizes. To set the color for all links in your campaign, click the area outside the sections, then set the Link Color.

TipView-in-browser links have their own color option, because they display above the header background color.

style-a-link.png

Padding

To adjust the white space around text and images, click any section to see its padding options.

Tip: You can add more white space above and below sections with spacers.

Responsive design

Email Campaigns' built-in responsive design resizes your images and text based on the visitor's screen. Whether your subscribers are sitting at a desktop computer or checking their email on a smartphone while waiting for a train, responsive design helps your campaign look great no matter what.

  • Fonts get slightly bigger on mobile devices so they’re more legible on a smaller screen.
  • For blog, products, and image sections, Side and Numbered layouts stack in narrow browsers and screens. This helps your images and text remain visible.

Image links

A clickthrough URL turns an image into a clickable link. Some campaign images have built-in links:

In an image section, click Unlinked next to the image name and add a web address in the URL field, or click  for additional link options. This is supported for all layouts except the Card layout.

image-link-1.png

Reusing a style

To use a campaign you've already sent as a template, with all its style settings:

  1. Go to your Email Campaigns dashboard.
  2. Click Sent.
  3. Click the campaign.
  4. Click Reuse this Layout.

The layout appears as a new draft, which you can use as a starting point for a new campaign. To learn more, visit Building email campaigns.

Was this article helpful?
5 out of 22 found this helpful
Styling email campaigns