View and Edit Section Design in Email and Landing Pages

Mailchimp’s templates for email and landing pages are divided into sections, to help organize your content and guide your design. When you set fonts, colors, and other styles for a section, your changes will apply to all content blocks in that section.

In this article, you'll learn how to access and edit design settings for each section of your landing pages and email marketing.

Access the Style tab

To access the Style tab in the campaign builder, follow these steps.

1. In the Content section of the builder, click Edit Design.
   
2. On the design step, click the Style tab in the editor window.
   
3. Click the section you want to edit.
   
4. Set your preferences for the section, and click Save.
   

Design options for sections

When you access design options for a section, you’ll see a number of different elements to customize. This usually includes background colors, font sizes, and link styling, but some sections have additional options like borders and padding.

Available sections and design options vary by template. To learn more, check out Types of Email Templates and Types of Landing Page Templates.

In this section, we’ll go over the most common elements available in each section type.

Page

The area behind the content in your email or landing page.

• Background Style
  Choose a background image or color, then set its border and padding. If you choose an image, you can also edit its size, position, repetition pattern, and fallback color.
• Email Border
  Add a border around the central content.
• Heading 1-4
  Set the font style for headings. Headings can be applied to text in content blocks by highlighting text and selecting the heading style from the Styles drop-down menu in the content block's editing toolbar.
  

Preheader

The area at the very top of your email that usually includes a blurb about the content and a link to the campaign page. Many email clients, like Gmail and Yahoo, show the preheader text after the campaign preview text and subject line in their inbox.

• Preheader Style
  Choose a background image or color, then set its border and padding. If you choose an image, you can also edit its size, position, repetition pattern, and fallback color.
• Preheader Text
  Set the text color, font, font size, line height, and alignment.
• Preheader Link
  Change the link color and style.

Header

The main image and text at the top of the email or landing page. This is typically the first thing recipients or page visitors see.

• Header Style
  Choose a background image or color, then set its border and padding. If you choose an image, you can also edit its size, position, repetition pattern, and fallback color.
• Header Text
  Set the text color, font, font size, line height, and alignment.
• Header Link
  Change the link color and style.

Body

This is the main content of your email or landing page. Include a good balance of text and images to engage recipients or visitors.

• Body Style
  Choose a background image or color, then set its border and padding. If you choose an image, you can also edit its size, position, repetition pattern, and fallback color.
• Body Text
  Set the text color, font, font size, line height, and alignment.
• Body Link
  Change the link color and style.

Columns

Content that appears in two or three columns rather than a single column. If your template also includes a Body section, the less important information is usually placed in the columns. This option is available only for templates with more than one column.

• Column Style
  Choose a background image or color, then set its border and padding. If you choose an image, you can also edit its size, position, repetition pattern, and fallback color.
• Column Text
  Change the text color, font, font size, line height, and alignment for a column or columns.
• Column Link
  Change the link color and style in a column or columns.

Footer

The content at the bottom of your email or landing page. This section is often used to contain trademarks and other fine print.

• Footer Style
  Choose a background image or color, then set its border and padding. If you choose an image, you can also edit its size, position, repetition pattern, and fallback color.
• Footer Text
  Change the text color, font, font size, line height, and alignment.
• Footer Link
  Change the link color and style

Mobile Styles

Change how your email or landing page appears on mobile devices. Use the Preview feature and review your designs on mobile devices to check for readability.

• Heading 1-4
  Change the set font size and line height for headings on a mobile device.
• Boxed Text
  Change the font size and line height for Boxed Text and Image Card content blocks on a mobile device.
• Preheader Visibility
  If your content includes a preheader, choose to Show or Hide the preheader when viewed on mobile devices. On mobile devices, the preheader stacks, so that the text on the left side of the preheader appears above the right-side text.

You also have the option to change the font size and line height for each section. These styles are applied only when viewed on a mobile device.

Referral program

If you are on a Free plan or are a paid user who wants to include our Referral badge in your email marketing, you can choose the color and logo style here. Paid users can choose to have the badge on or off from the Rewards Badge drop-down menu.

Notification Bar

If activated, the Notification Bar section appears when someone visits your landing page for the first time. This is a good place to notify your users if you are using any tracking tools like Track With Mailchimp, the Meta Pixel (formerly Facebook Pixel), or Google Analytics.

• Enable Notification Toggle
  Turn on the notification bar that appears at the top of your landing page.

Mailchimp Badge

The Mailchimp Badge is located at the bottom of your landing page. It includes the Mailchimp logo and a link for reporting abuse. While this badge is required for Free plans, paid plans are able to remove this badge.

• Enable Mailchimp Badge Toggle
  Turn off the badge that appears at the bottom of your landing page.
• Style
  Change the look of the privacy badge.