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, or duplicate a campaign to reuse all its style settings in a new draft.

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

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:

  • Button text
  • Blog post and product titles
  • Blog post dates
  • Product prices
  • Footer text, including your address and the unsubscribe link

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 + in the swatch that appears.
  • To delete a color, click the swatch, then click X in the swatch.
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

I accidentally deleted a color swatch

If that color is being used in a different section, you can add it back to your main swatch colors. For example, if you delete a swatch color that's also being used in your blog post buttons:

  1. Click the blog post section.
  2. Click Details.
  3. Click Button Color.
  4. Click + in the swatch for that color, and it will appear in other color styling areas again.

If the color isn't used anywhere in your campaign, there isn't currently a way to retrieve it. As a precaution, you can write down the HEX code for colors you're using in case you accidentally delete a swatch.

Background colors

There are three types of background color settings:

  • Background Color - The background color of the area surrounding the content. If the below two styles are set to transparent, this is the color that displays behind the campaign content as well.
  • Email Background - The background color behind all the sections of a campaign. If the section color is set to transparent, this is the color that displays behind the section. If all the sections have unique color settings, this color may not display anywhere.
  • Section Color - The background color of an individual section. You can style each section independently. If the section color is set to transparent, either the email background or background color will appear behind the section instead.

To set the Background Color and Email Background, click the area outside of the sections and click the options in the side panel. To set a section's color, click the section, then click Section Color.

Keep in mind:

  • For images 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.
  • Because emails often take up the full screen when viewed on mobile, the Background Color may not be visible on some devices.
  • 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 click Link Color.

Tip: View-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. Campaign images don't have any padding on mobile devices to ensure content is visible and clear on smaller screens.

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 recipient'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.

Style a section

Aside from the above 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:

Reuse a style

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

  1. Go to your Email Campaigns dashboard.
  2. Click Sent.
  3. Click the campaign.
  4. Click ..., then 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?
10 out of 39 found this helpful