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 automatically apply your website's style settings to your campaign, or set these styles manually. 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).
Apply website styles
If you want your campaign to match your website's aesthetic, you can automatically apply your site's style settings. To do this:
- While editing your campaign draft, click Style in the right-hand panel.
- Click Apply Site Styles, then click Apply.
This changes your campaign fonts, colors, and logo to better match your site's site styles panel. After making this change, you can revert it to the previous settings by clicking the undo arrow, or you can make manual changes to individual style tweaks.
If you don't see the Apply Site Styles button, you may be looking at a content section's style settings. Click in the area outside the draft content to show the global email styles.
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:
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.
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.
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.
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:
- Click the blog post section.
- Click Details.
- Click Button Color.
- 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.
There are three types of background color settings:
- Content Background - 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 content background or email background will appear behind the section instead.
To set the Content Background 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.
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.
To change the white space around text and images, click any section to view the padding options. Padding appearance may vary depending on the device. For example, campaign images don't have any padding on mobile devices to ensure content is visible and clear on smaller screens.
If too much or too little padding appears, experiment with different settings until you find the ideal appearance for your needs. Keep in mind your campaigns may have slight differences in appearance, depending on how your subscribers view the campaign.
Tip: You can add more white space above and below sections with spacers.
Email Campaigns' built-in responsive design resizes your images and text based on the recipient's screen. Whether your subscribers are sitting at a 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:
- Go to your Email Campaigns dashboard.
- Click Sent.
- Click the campaign.
- 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.