How to Create Colored Background Sections in Squarespace

Have you ever wondered how to break up your webpage with different colored backgrounds, stacked on top of each other, but not sure where to begin? Have no fear! It's super easy, and it all comes down to index pages. 

 
Blog_IndexPgs_600x900.png
 

What the heck are index pages?

Squarespace offers three different types of index pages, but for this purpose, we are going to focus on Stacked index pages.

With stacked index pages, each page in the Index creates a section of a single scrolling page. (Think of it like an an accordion-folded pamphlet that you can open up and see all the pages at once.)

The sections stack vertically, so that visitors can easily scroll through a lot of information. By using different colored backgrounds for your index pages, you can break up the information and organize it in a visually cohesive and easy-to-read manner.

See below for an example of how I used index pages on my homepage, or click here to see it in action.

 
screencapture-helloginger-2018-03-28-16_59_42.png
 

How to Create Stacked Index Pages

First (and more important!), make sure that you are using a Squarespace template in the Bedford, Brine, or Pacific family. These are the only templates that currently support stacked index pages.

Does your template support stacked index pages? Let's proceed!

  1. From the Home Menu, click Pages.
  2. Click the + icon, then click Index.
  3. Give your Index a title (i.e. Home, About, Services, etc), then press Enter.
 
add-index.png
 

Next, add pages to your index:

  • Within the Pages panel, click + Add Page below your Index Page.
  • Note: Each "section" that you want to have a different colored background needs to be its own page within the index page. 
 
add-page.png
 
  • You can drag and drop pages to rearrange them within your index page.
  • Once you have set all of your index pages up, click on the setting gear next to your index page.
index-page-settings.png

Next, click on the "Advanced" tab in Settings.

 
Screen Shot 2018-03-28 at 5.20.30 PM.png
 

Then, scroll down to Page Header Code Injection.

Type your code in as pictured below.

For Bedford + Brine: For the #pagename, use the URL slug for that page. (Example: #about-1 is helloginger.com/about-1)  

For Pacific: For the #pagename, use the URL slug for that page, and add (-section) to the end. (Example: you would use #about-1-section for helloginger.com/about-1-section.) 

 
SquarespaceIndexPageColoredBackgrounds
 

How to find your URL slug:

Click the Settings gear next to the page you need the URL slug for.

 
Screen Shot 2018-03-28 at 5.28.30 PM.png
 

Scroll down to URL slug, and copy it. Then go back to your Index Page Settings, Advanced tab, and paste the URL slug into your coding with a hashtag (#) in front of it.

Important! For the Pacific template, you will add "-section" to the end of your URL slug. So if your page is /services, you would use #services-section instead of #services. 

 
Screen Shot 2018-03-28 at 5.28.03 PM.png
 

Find the hex code for the color you want to use as that page's background, then paste it into your code, as pictured above.

For the pages that you want to keep a white background, use #ffffff. I suggest listing all pages (even those without colored backgrounds), so that you have everything neatly organized, and so that you can easily add a colored background to a page in the future.

And that's it!

How easy was that?? Let me know in the comments below if you have any questions!

P.S. Stay tuned for a future post, and I'll tell you how to use an image or a graphic for a page section background instead of a color! (Pattern background, anyone??)