Adding Color Backgrounds to Squarespace Index Pages

Squarespace Index pages are the superstar MVP when it comes to creating beautiful, immersive page layouts. They can help visitors quickly skim through content to get the main ideas but also invite users to slow down and read when needed. Using color blocking to add different colored backgrounds to certain pages within an index is one of the ways you can highlight content that needs to be picked up by the reader whether they’re spending a lot of time on page or not.

TBH, if you’re setting up your pages as index pages as you’re NOT using one of these methods to highlight or feature different sections, you’re definitely not getting the most out of the setup. Luckily it’s super easy to add backgrounds of different colors and there are two great options for you to pick from, depending on your site’s color palette and what other design elements you’re using. 

Option 1: Use Code

Pros: 

  • Pages may load slightly faster

  • You can target multiple sections at once without needing to upload multiple background images

  • Banner/image overlays won’t affect the appearance 

Cons: 

  • If you’re changing to a color that has a low contrast to your text, you’ll need to also use some code to change the text color so it stands out

  • Only works for solid color backgrounds (Technically you can also do gradients using code but that is another tutorial altogether! ) 

The Code: 

#url-slug {
background: #000000; /*change to match your hex value, can also be RGB or HSL)*/
}

Option 2: Use An Image

Pros: 

  • No code needed

  • Squarespace will recognize that you’ve added an image as a background (in most templates including everyone’s favorite, Brine) you’ll get a bonus set of fonts for use on pages that have a background without the need to add extra code

  • This is obviously the best/only option if you’re looking to use a pattern or actual photo as the index page background

Cons: 

  • Unless you make sure to keep your background image sizes as small as possible, could affect page load time

  • If you have banner overlays enabled, they will affect the appearance of your backgrounds as well 

The Steps: 

  1. Using your favorite software like Photoshop or Canva, make a square image with the background color you want your background to be. TIP: make the image super small (i.e. 40px x 40px in Canva). Because solid colors can’t pixelate when made larger, you’re just trying to make the file as small in size as possible to keep load time down. 

  2. Upload your file as the media file for the page you want the background on in Squarespace

  3. THAT’S IT! (Easy, right?!)

Now you can create fun page layouts with different background colors on any page that is set up as an Index page!