Brine Template: How to add a background color to a section or a page on Squarespace

 Brine Template: How to add a background color to a section or a page on Squarespace

*If you want to follow along in a video, scroll to the bottom of the post :)*

I. Add a background color to a section of an index page on your Squarespace website 

You have created an index page that has multiple sections and you want to add a different background color to a specific section. 
First, you will have to get that section's url slug. Here is where you can find it:

 Brine Template: How to add a background color to a section or a page on Squarespace

Once you copied that, go to Design > Custom CSS, add a # sign in front of the URL slug like this #my-services. Then you will add the styling to that section, which will look like the code below.

#my-services {
    background-color: #ffe3d7;
}
 Brine Template: How to add a background color to a section or a page on Squarespace

The #ffe3d7 is a hex-color code which designates a specific color. 
You can always change the background-color itself by either looking up the hex-color code you want.

Don't forget to save the code and that's it :) You should see a new background color in the section you wanted to customize.

II. Add a background color to a single page on your Squarespace website

You have created a page but you want to it to have a different background color form the other pages. 

This time you would have to go Inspect elements on your page. 

maia hariton Squarespace authorized trainer and designer.gif

You will see the code saying section and Main-content.
Now in CSS you declare a class with a dot in front of it, so the code you use will look like that: 

<style>
section.Main-content {
    background-color: #ffe3d7;
}
</style>

Once you have that code ready, click on the gear icon on the right side of the name of your page, click on the Advanced tab and paste your code in the PAGE HEADER CODE INJECTION area. 

Don't forget to save your changes. And that's it! You have a customized background color on one of your website's pages.

 
 

Related Posts