How to Change the Background Color of Different Sections

 
Changing the background color of individual sections Squarespace
 

Hey, there! So, I'm guessing you may be here because you've been feeling really frustrated wondering just how to change the color of one section of your Squarespace site without change the background color of the entire page. I feel your frustrations, love! 

You're in luck because this simple Squarespace hack will allow you to change the color of one section of your web page without changing the entire page's background color! And the best part? No coding required! 

Okay, let's get into this easy little fix!

1. Just a little background into WHY it's not working when you try to change one section is because you're working with an INDEX page in Squarespace (this means that you can add as many sections as you'd like and be able to scroll infinitely. This is ideal for some Home pages of websites, or especially Sales pages for businesses. 

So we have an index page and we want to change just one section's background color. But when you go into the Style Editor and try to change the background color it changes the entire site. Not ideal.

First step: locate your section that needs a color change. For the example, I'll use a sample site I created, called Zola. 

 
change color of section in Squarespace
 
 
change color of one section in Squarespace
 

2. Decide on your color. 

For this section's new background color, I'll change it to the color of the site border I have. I can find the exact color by going into the Style Editor and looking up the color of the Site Border.

 
Screen Shot 2018-04-04 at 10.50.30 AM.png
 
Changing background Color of one section Squarespace
 
Screen Shot 2018-04-04 at 10.51.08 AM.png
 
Screen Shot 2018-04-04 at 10.51.17 AM.png

3. For this example, I'll copy the color descriptor of the color I want my background of this section to be. Keep in mind that if you already have a color you want to use, all you'll need to know is the HEX code (or HSL or RGB-number of the color). 

Using Google, paste the color code into the search box and hit Enter.

Changing background color of section in Squarespace
Changing background color of one section in Squarespace

4. Usually the first couple of websites will take you to a screen with the actual color on it. Take a screenshot (on Mac: press 'Control + Shift + 4 and click and drag your cursor to select your screenshot area) of the color after you've located it on one of these sites. 

Note: the screenshot I've taken is illustrated by the black rectangle on the image below.

Changing the background color of one section of Squarespace website
Changing background color of one section in Squarespace website

5. Head back to your Squarespace window. Select 'Banner' in the section you want to change the color of  and upload the screenshot by dragging it from your desktop to the image upload box.

Click Save.

 
Changing background color of one section of Squarespace website
 
Changing background color of one section of Squarespace website
Changing background color of one section of Squarespace website
 

6. Optional: If your background color is dark and you want your font to be readable - head to the Style Editor and select the font of your section to locate its settings in the Editor. (For this example, I've clicked on 'This is a section of my Home Index Page' to bring up my Heading 1 settings on the left - this will be different for everyone though).

From here, select the option 'Font Color for Overlay' (this means the font color when the writing is placed over images such as the color background we've uploaded).

I've then changed the Font Color for Overlay to white. Typically, you'll want to make the font color darker if you have a light background color and lighter if you have a dark background color. 

Changing background color of one section in squarespace website
Change the background color of one section of Squarespace website
 
Change background color of one section in Squarespace website
 
 
Change the background color of one section of Squarespace website
 

Finished! There you have it - easy, easy, and no coding involved! 

I hope this little tutorial for how to change the background color of one section of your Squarespace website helped you out and eased a bit of the previous frustrations! 

Stay cool, stay creative - 

 
Alex Font.png
 

Related Reading: