Design Your Website in Mailchimp

Mailchimp’s website builder helps you create beautifully designed web pages to suit your style and personality. Choose a design theme, create a custom color palette, and upload images to match your brand and help visitors immediately identify you and your content.

In this article, you’ll learn how to design your website in Mailchimp.

Before you start

• To help you get started, take a moment to learn About Your Website in Mailchimp and how to Create Your Website in Mailchimp.
• Custom HTML, iframes, and merge tags aren’t compatible with your Mailchimp website at this time.

Edit styles

When you set up your website, you can apply the same colors, fonts, and button style to every page you create. This helps you streamline your site creation process and maintain a consistent brand identity.

To define color, font, and button styles for your website, follow these steps.

1. Click the Website icon.
   
2. On the website dashboard, click Edit Site.
   
3. In the Manage Site menu, click Styles.
   

4. Click the Palette drop-down to choose the colors for your site. Click Create to design your own palette or choose from one of the predesigned color palettes.
   

   If you want to continue with a predesigned palette, skip to step 12.

5. Type in the name of your new palette.
   

6. Click a color swatch to use the color picker.
   

   You can click colors within the color picker, or enter values in the HEX or RGB fields to save a color to the palette.
   

7. After you select colors for all 5 swatches, click Save Palette.
   
8. Click Edit to change how to apply the colors to your pages.
   
9. Click Default Color Scheme.
   
10. Click each color scheme to preview how those colors will look on your web pages and select the one you like best.
11. Click Edit Palette and then Styles to go back to the Styles menu.
    

12. In the Theme section, click the arrow icons to apply different font and button styles.
    

    In the website preview, you'll see the heading and paragraph fonts change based on your selections.

13. If you want to make changes to the theme, click Edit. Here, you can choose different Font pairs, or adjust the Size and Spacing of the text.
    

Excellent! You’ve set the basic look and feel of your website. The styles you chose will apply to each new page you create.

Edit content

Use the editor to add sections, images, and text. Share your story, contact information, a product for purchase, and anything else you want your visitors to know about.

In this section, we'll show you how to edit or add content to your website.

Access the web page editor

To access the web page editor, follow these steps.

1. On your website dashboard, click Edit Site.
2. Hover over the page you want to work with and click Edit Page.
   

Add and edit sections

Sections allow you to organize and design your web page quickly. Choose the layout of text, images, and buttons, as well as other elements like signup forms, navigation bars, and your web page footer.

To add a section, follow these steps.

1. Hover your cursor over the plus (+) icon where you’d like the new section to go.
   
2. Click Add Section.
   
3. In the Add Section menu of the sections panel, choose a section type.
   
4. Choose a layout for your new section.
   

Nice work! You’ve added a new section to your page design and can now customize it with your own content.

If you need to make changes, hover over the section to access the editing toolbar. Here, you can click the icons to delete a section, move a section, choose a different layout, or make style edits.

For more information on page sections, check out Add and Edit Page Sections.

Edit header or paragraph text

To edit header or paragraph text on your website, follow these steps.

1. Click the text area you want to edit.
   
2. In the editing toolbar, click the paragraph alignment icon to align your text to the left, center, or right.
3. Click the font color icon, bold icon, italics icon, or underline icon to change some basic text attributes.
4. Click the paragraph styles icon to choose the heading or paragraph style for your text area.
   
5. If you’re working with paragraph text, you’ll also have the option to insert a link, create a bulleted or numbered list, or change the background color.
   

Edit images

Click any image in your layout to edit it. You’ll also see a toolbar with specific formatting options.

To edit an image on your page, follow these steps.

1. Click the image you want to work with.
   
2. Click Replace to choose a different image from the content studio.
   
3. To resize the image, click and drag the white circle until the desired size is achieved. Click and drag the handles on the right and bottom side of the image to crop and adjust what is shown in the image.
4. To add a link to the image, click the Link icon.
   
5. From the drop-down menu, choose External URL, Page, or Section. In the space provided, either enter the url, select a page, or section of the current page you want to link to. Click Save. To remove the link, click Remove link.
6. Click Alt to add alt text to the image.
   
7. Click the Rounded Corners icon and type in a number between 1 and 300 to adjust the shape of your image.
   

Undo and redo changes

When you’re designing your website, you might accidentally remove something you've written or made other changes you want to revert. With the undo and redo buttons, you can recover the previous versions of your page.

To undo a change, click the Undo icon.

To redo a change, click the Redo icon.

Preview and exit

Good work! Once you're done adding content to your website, click Preview to see how it looks or click Done to go back to the Manage Site page.

When you are ready, click Publish Changes to update all of your visible web pages with your new content and styles.

Next steps

Now that you’ve added your personal design touches, let's look at a few ways you can make the most of your website.

• Add more pages
  Grow your website with new content and additional web pages. When you keep your website up to date, you’ll build your audience and encourage repeat visits. To learn how to add and manage web pages, check out Manage Your Website in Mailchimp.
• Create a store
  Add an online store to sell your products. Creating a store in Mailchimp allows you to add store pages to your existing website. You can then add and sell as many products as you want. To learn more, check out Create Your Mailchimp Store.
• Set up appointments
  Add scheduling tools to grow your business. If you offer professional services, you can use Mailchimp Appointments to set up the details of your services, including pricing and availability. Customers will be able to book appointments with you on your website. To learn more, check out Use Mailchimp Appointments.
• Promote your website
  Promote and share your new website through marketing campaigns in Mailchimp. Run an ad for your website. Link to your website from a regular email campaign. You can also share your website URL on social media.
• View reports
  We’ll start to compile reporting data as people visit your site. You can see who visits your website, clicks links on your web pages, and subscribes to your emails.