Note: While our most popular guides have been translated into Spanish, some guides are only available in English.
Changing background colors

You can change your site's background colors to help set a tone, make certain areas pop, or reinforce your brand.

Tip: Some templates also support background images.
These steps are for version 7.0. If your site's on version 7.1, visit Version 7.1 style and design options for help.

Before you begin

Background areas

Background color options vary by template:

  • All templates - You can set the color of the main content area.
  • Some templates - You can set separate colors for the header, footer, and space around your content.

For example, in the Brine template, you can set a few background areas:

In the Avenue template, the main content area is called the canvas, which includes the header and footer. Everything outside the canvas has a separate color: the site background.

Tip: In some templates, the canvas area is called the page or content area.

Change the background color

When setting your background color, the best place to start is the main content area. In general, you can follow these steps:

  1. In the Home Menu, click Design, then Site Styles.
  2. Look for tweaks called BackgroundPage Background, Site, Page Color, Content Background Color, or similar titles. Every color tweak has a circle next to its label. This circle shows the current color for that element.
  3. Experiment with the color tweak. If it only changes one part of the background, you can change other background areas with different tweaks. Try clicking on each background area to see related tweaks.

For more help, visit Changing colors or the Site Styles tweaks guide for your template.

Background colors by template

These template families have customizable background areas:

Template family Background areas
Adirondack
  • Site
  • Canvas
  • Navigation bars
  • Header 
Avenue
  • Site
  • Canvas

Aviator

  • Site
  • Canvas

Bedford

  • Site
  • Header
  • Prefooter
  • Footer

Brine

  • Site
  • Canvas
  • Border
  • Top header
  • Footer
  • Mobile bars

Farro

  • Site
  • Border
  • Header
  • Footer
  • Mobile bar
Five
  • Site
  • Canvas
  • Canvas border
  • Header
Flatiron
  • Site
  • Header/footer
Forte
  • Site
Galapagos
  • Site
  • Header
Ishimoto
  • Site
  • Page border
Momentum
  • Site
  • Canvas
  • Footer navigation

Montauk

  • Site
  • Canvas
Native
  • Site

Pacific

  • Site
  • Header
  • Index alternating sections
  • Prefooter
  • Footer

Skye

  • Site
Supply
  • Site
  • Header/sidebar navigation

Tremont

  • Site
  • Navigation overlay
  • Index 
Wells
  • Site
Wexley
  • Site
  • Mobile nav

York

  • Site
  • Banner

Next steps

Was this article helpful?
16 out of 126 found this helpful