How to change the background color for sections of Squarespace pages

 

It's extremely common and on trend currently for websites to have backgrounds in light, but noticeably different colors. This strategy helps to define areas on the page, contains a related group of content together, and visually delineates clear sections or ideas.

How to go about creating this is a frequent question I see in Facebook groups of Squarespace users, so I thought I'd explain how this is done, with and without code. Want to see an example of what I mean? 

The template that is best for making this happen is any template in the Brine family. (That is Brine, Clay, Feed, Foster, Greenwich, Heights, Hunter, Hyde, Jaunt, Juke, Keene, Marta, Mercer, Mojave, Motto, Rally, Rover, Sonora & Thorne.) (The example above is from the studio's website, and it currently uses the Rally template.) These templates, though the example templates are styled differently, all have the same underlying structure, and have the same capabilities.

The reason this specific template family works so well is because of it's ability to have index pages with banners that can then have any block placed on top of those banners.

To get the background color, we will add a new page to the index, add a banner image (which is just an image of a color), then place our blocks in the banner area, as we would when building out any other page.

I'll give you some other template options to capture the same look, with code, below.

For now, let's get to the code-less option with a template in the Brine family. Here's the steps:

How to change the background color for sections of Squarespace pages - without code

(First, you'll need some photos of colors. I created mine in Illustrator, though Canva also works perfectly for this. Just create a rectangle with one plain color then save it as an image to your desktop.)

  • Add a new page to an index
  • Click the gear icon of the page you'd like to add a background color to
  • Click over to the media tab in the top of the pop up window
  • In the banner area upload a photo of a plain color
  • Click save
 

Β 

  • Click onto the page you just added your color banner to
  • Hover over the colored banner area & click 'edit'
  • Add blocks onto the banner as you would with any other regular page
  • Click save
squarespace change background color in Brine template family.png
 

Β 

Ta Da! SO easy, right?!

One word of caution for this strategy. For each new color section you want, you'll need to add a new page to your index. If you're trying to stick to the Squarespace personal plan which includes up to 20 pages, this can get tricky if you want a lot of color sections. You'll just need to strategize your color sections and pages on your site so you don't go over 20. If you're on the Business plan however, no worries at all!

The other option for background color sections works for any template with Index pages, but involves some code. (See all the templates with Index pages in this Squarespace template comparison chart).

This post walks you through how to use code to customize all templates with index pages.

Β 

Related: