View and Edit Section Design in Email and Landing Pages

Copy Article URL

Copied

Mailchimp’s templates for email and landing pages are divided into sections, such as the body and footer. Sections 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 emails and landing pages.

Things to know

Here are some things to know.

  • Available sections and design options vary depending on which template you're using, for both email templates and landing page templates.
  • Section styles will overwrite any global styles you’ve created.
  • Section styles won’t overwrite styles you’ve made for individual items, such as buttons and links.
  • Because our drag-and-drop templates are mobile responsive, we recommend that you add a background image to a content section with a single column. Background images in multi-column content sections may appear distorted on mobile devices.

Access section styles in the new builder

To view and edit section styles in your email in the new builder, follow these steps.

  1. In the Content section of the checklist, click Edit Design or Resolve.
  2. Click an area outside of a content block.
  3. Click the section you want to edit. View and Edit Section Design in Email and Landing Pages - 图1
  4. Click the up arrows to collapse a section.

Access section styles in the legacy builder

To view and edit section styles in your email or landing page in the legacy builder, follow these steps.

  1. In the Content section of the checklist, click Edit Design or Resolve.
  2. Click an area outside of a content block, then click the Style tab. You may need to click Save & Close in a content block to access the Style tab. NO ALT-style-classic-builder
  3. Click the section you want to edit. Your options may vary depending on your email or landing page.
  4. Click the back arrow to return to the Style tab.

Design options for sections

When you access design options for a section, you’ll find a number of different sections to customize. These usually include background colors, font sizes, and link styling. Some sections have additional options, such as borders and padding.

Note

Landing pages aren't subject to the same design limitations as email, so you may come across additional elements in landing page templates. These include background transparency options and a special element called an Interior Style that lets you layer 2 backgrounds on top of each other to highlight the content in a section.

Use this table to find the most common design options for each section and check whether they’re available for the new builder, legacy builder, and landing pages.

Section What it is Common design options New builder Legacy builder Landing pages
Page The area behind the content in your email or landing page. Background colors, images, borders, and padding. Font color and style for headings 1-4. yes Use Styles for page style yes yes
Preheader The area at the very top of your email that usually includes text about the content and a link to the campaign page. Many email clients show the preheader text after the preview text and subject line in their inbox. Background colors, images, borders, and padding. Font color and style for text and link. yes The preheader is included with the header section yes no
Header The image and text at the top of the email or landing page. This is typically the first thing recipients or page visitors see. Background colors, images, borders, and padding for container and interior. Font color and style for text and link. yes yes yes
Body The main section of your email or landing page. Background colors, images, borders, and padding for container and interior. Font color and style for text and link. yes yes yes
Columns Multi-column layouts. Background colors, images, borders, and padding for column style. Font color and style for text and link. yes yes yes
Details Some templates include a details section. Background color, top and bottom borders, top and bottom padding for container and interior. Interior style also has box shadow options. Font options for text. no yes yes
Footer The content at the bottom of your email or landing page. This section is often used to contain trademarks and other fine print. Background colors, images, borders, and padding. Font color and style for text and link. yes yes yes
Mobile styles Styles that display when your email or landing page appears on mobile devices. Font size and line height for headings 1-4, and for boxed, header, body, and footer text. yes Use Styles for mobile style options yes yes
Notification bar Horizontal bar at the bottom of your website or landing page. Display messages such as a limited time offer or info about cookies. Background color and text options. no no yes
Referral badge Located at the bottom of your email. Earn bill credits when you refer new paying customers to Mailchimp through the badge. Choose between 2 Mailchimp logo styles. no yes yes
Mailchimp badge Located at the bottom of your landing page. Includes the Mailchimp logo and a link for reporting abuse. This badge is required if you have a Free plan. Choose between 2 Mailchimp logo styles. no no yes

About Content Blocks for Landing Pages

Learn how to use Mailchimp's various types of content blocks in your campaign design.

Create a Regular Email

Learn how to create a regular email in Mailchimp.