View and Edit Section Design in Your Website

Mailchimp website layouts 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 in your website.

Before you start

Here are some things to know before you begin.

• Sections display in a specific order in your website. The order from top to bottom is Notification Bar, Navigation, Header, Featured, About, Contact, Product, Testimonials, Subscribe, Footer, and Mailchimp Badge.
• You can move any content block from one section to another. You are not required to place a signup form block in a Subscribe section, for example.
• The styles you set in each section will override any global styles you set for your website, and any styles you set in an individual block will override the styles you set in each section.

Access section design

On the Style tab of the website builder, you can edit styles and other settings for each section of your layout.

To access the Style tab, follow these steps.

1. Click the Website drop-down and choose Website.
   

2. On the website dashboard, Click Edit Site.
   

3. In the page manager, click the page you want to edit.
   

4. In the website builder, click the Sections tab.
   

Excellent! On the Sections tab, you’ll see the available sections in your layout. Click a section name to access its settings.

Design options for sections

Navigation

The Navigation section displays links at the top of your web page, which can either link to other pages in your website, or externally to other websites.

• Navigation Menu Items
  Choose the order of your navigation links and set the page or external link for each individual navigation item.
• Navigation Menu
  Set the background color for the area behind the navigation menu items.
• Link Text
  Set the text color, font, font size, font style, line height, spacing, and alignment for links.

• Mobile Menu Icon Color
  Set the color for the collapsible navigation display shown to users on a mobile device.

  

Page Level Styles

The area behind the sections and content on your website.

• Page Container Style
  Set specific pixel-based padding or presets to limit the maximum width your website will stretch to fill horizontally.

• 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.

  

Header

The Header is the top section of your website and contains your logo and Navigation bar.

• Header Container 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, fallback color, overlay color, and transparency level.
• Header Interior Style
  The Interior Style overlays the Container Style. Choose a background image or color, then set its border, padding, and box shadow. If you choose an image, you can also edit its size, position, repetition pattern, fallback color, overlay color, and transparency level.
• Header Text
  Change the text color, font, size, line height, and alignment.
• Header Link
  Change the link color and style.

Featured

The Featured section is the topmost section after the Header. Use this section to introduce your brand or business, and create a good first impression for your visitors.

• Featured Container 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, fallback color, overlay color, and transparency level.
• Featured Interior Style
  The Interior Style overlays the Container Style. Choose a background image or color, then set its border, padding, and box shadow. If you choose an image, you can also edit its size, position, repetition pattern, fallback color, overlay color, and transparency level.
• Featured Text
  Change the text color, font, size, line height, and alignment.
• Featured Link
  Change the link color and style.

About

The About section appears after the Featured section. Here you can share more details about your brand, business, or projects.

• About Container 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, fallback color, overlay color, and transparency level.
• About Interior Style
  The Interior Style overlays the Container Style. Choose a background image or color, then set its border, padding, and box shadow. If you choose an image, you can also edit its size, position, repetition pattern, fallback color, overlay color, and transparency level.
• About Text
  Change the text color, font, size, line height, and alignment.
• About Link
  Change the link color and style.

Contact

The Contact section has two separate columns so that you can display content side by side, and includes a social follow content block by default. Share your contact information here, so your website visitors know how to reach you.

• Contact Container 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, fallback color, overlay color, and transparency level.
• Contact Interior Style
  The Interior Style overlays the Container Style. Choose a background image or color, then set its border, padding, and box shadow. If you choose an image, you can also edit its size, position, repetition pattern, fallback color, overlay color, and transparency level.
• Contact Text
  Change the text color, font, size, line height, and alignment.
• Contact Link
  Change the link color and style.

Product

The Product section is designed to help you sell more stuff. It includes a payment block by default.

• Product Container 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, fallback color, overlay color, and transparency level.
• Product Interior Style
  The Interior Style overlays the Container Style. Choose a background image or color, then set its border, padding, and box shadow. If you choose an image, you can also edit its size, position, repetition pattern, fallback color, overlay color, and transparency level.
• Product Text
  Change the text color, font, size, line height, and alignment.
• Product Link
  Change the link color and style.

Testimonials

Use the Testimonials section to share your customers’ feedback to the world. It includes an image + caption block by default.

• Testimonials Container 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, fallback color, overlay color and transparency level.
• Testimonials Interior Style
  The Interior Style overlays the Container Style. Choose a background image or color, then set its border, padding, and box shadow. If you choose an image, you can also edit its size, position, repetition pattern, fallback color, overlay color, and transparency level.
• Testimonials Text
  Change the text color, font, size, line height, and alignment.
• Testimonials Link
  Change the link color and style.

Subscribe

The Subscribe section is located near the bottom of your website and is intended to help encourage your visitors to sign up for your emails. It includes a signup form block by default.

• Subscribe Container 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, fallback color, overlay color and transparency level.
• Subscribe Interior Style
  The Interior Style overlays the Container Style. Choose a background image or color, then set its border, padding, and box shadow. If you choose an image, you can also edit its size, position, repetition pattern, fallback color, overlay color, and transparency level.
• Subscribe Text
  Change the text color, font, size, line height, and alignment.
• Subscribe Link
  Change the link color and style.

Footer

The Footer section is located at the very bottom of your layout. Use this section to share important information about your website with your visitors, such as trademarks, legal information, and other fine print. It also includes the Mailchimp badge for users on Free plans.

• Footer Container 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, fallback color, overlay color and transparency level.
• Footer Interior Style
  The Interior Style overlays the Container Style. Choose a background image or color, then set its border, padding, and box shadow. If you choose an image, you can also edit its size, position, repetition pattern, fallback color, overlay color, and transparency level.
• Footer Text
  Change the text color, font, size, line height, and alignment.
• Footer Link
  Change the link color and style.

Mobile Text Styles

Change how your website appears on mobile devices.

• Heading 1-4
  Change the set font size and line height for headings in your mobile web site.
• Section Styles
  Set font size and line height for paragraph text on your mobile website. This includes individual controls for Boxed Text, Home Text, About Text, Contact Text, Product Text, Testimonials Text, Subscribe Text and Footer Text.

To see how your changes will look, click the Preview option in the upper right corner of the website builder, then click the Mobile tab.

Notification Bar

If activated, the Notification Bar section appears when someone visits your website 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 Facebook Pixel, or Google Analytics.

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

Mailchimp Badge

The Mailchimp Badge is located at the bottom of your website. 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 website.

• Style
  Change the look of the privacy badge.

Remove or restore a section

Remove any section from your layout at any time. If you change your mind later, you can restore the section and its content in one click.

Remove a section

To remove a section in your web page, follow these steps.

1. Click the Website drop-down and choose Website.
   

2. On the website dashboard, Click Edit Site.
   

3. In the page manager, click the page you want to edit.
   

4. In the website builder, mouse over the section you want to remove and click the Remove icon.
   

Next, we’ll go over how to add sections back into your webpage.

Restore a section

To restore a removed section, follow these steps.

1. Click the Website drop-down and choose Website.
   

2. On the website dashboard, Click Edit Site.
   

3. In the page manager, click the page you want to edit.
   

4. In the website builder, click the Sections tab.
   

5. Scroll to Removed Sections and click Restore next to the section you want to add back to your layout.
   

Great work! This will add your section and its content back to your layout.