Coloring Page Sections in Squarespace

A useful technique in web design is the application of distinctive background colors to provide visual separation between sections in a page. Figure 1 shows an example of the technique in the Bedford template on the Squarespace platform. You can implement such a page with just a few lines of CSS. 

Figure 1. Bedford page divided into sections by different background colors

I use the Bedford template for my example in this post. Bedford makes it particularly easy to colorize different sections a page. It's easy to omit the hero images that are the page headers, and Bedford's ability to "stack" many pages and present them as one makes the technique in Figure 1 easily achievable to Squarespace customers choosing to use that template.. 

Creating the Sections

Begin by creating an index page. Then create a sub-page within the index for each section of your planned final page as you want it to appear to your site's visitors. Figure 2 shows the structure for my example page -- named Rainbow -- as it appears in my site configuration. 

Figure 2. Sub-pages corresponding to the sections in Figure 1

Figures 3, 4 , and 5 show the design views of the sub-pages. Each page corresponds to a colored section. Lay out each page as you want its corresponding section to appear in the final result. 

Figure 3. First colored secton

Figure 4. Second colored section

Figure 5. Third colored section

The function of an index page in the Bedford template is to "stack" all the sub-pages and present the result to the viewer as one, often long page. What you see in Figure 1 is a result of this concatenating of sub-pages into a single index page.

Coloring the Sections

Stacking the pages won't give color to the backgrounds. All three pages will be on white, or on whatever other color you may have specified for the page background using the Style Editor. Here is were CSS comes to play. Bedford's designer has made it as simple and easy as I've ever seen to target the individual sections on the combined page.

Write three rules like those in Listing 1. Wrap them in a <style>...</style> tag sequence. Then go to Settings for your index page, to the Advanced tab, and place the code into the Page Header Code Injection field as shown in Figure 6.

Listing 1. Colorization rules

<style>
  #first-page {background-color: #FAFAD2;}
  #second-page {background-color: #F5DEB3;}
  #third-page {background-color: #87CEEB;}
</style>

Figure 6. Style rules in their place 

The style rules target <div> elements corresponding to the page sections. The naming convention is easy: Just take each sub-page's name and write it in lowercase with hyphens between the words. Put a number-sign at the front to denote an HTML identifier. First Page becomes #first-page, Second Page becomes #second-page, and so on. The pattern is easy. 

Listing 2 shows the three <div> elements for my example page. You can see how the ID attribute values correspond to the names given in my CSS rules. 

Listing 2. Section ID attributes corresponding to sub-page names

<div id="first-page" class="index-section"...>
  ...
<div id="second-page" class="index-section"...>
  ...
<div id="third-page" class="index-section"...>
  ...

You can verify your page identifiers by viewing your index page and then invoking your browser's View Source function. See my post CSS and Squarespace: Getting Started for help on doing that. 

Figure 7 shows the same <div> elements as seen through a browser's Developer Tools pane. Typically you can arrive at that view by right-clicking in a section and selecting Inspect Element. 

Figure 7. The three section divs as seen from a browser's HTML inspector

Be sure to apply the rules to the index page, and not by mistake to any of your sub-pages. Select the index page in your site configuration. Then click the Settings button and move to the Advanced tab. It is the settings for the index page that matter when the combined page is built and displayed.

Note: It is possible and sometimes useful to design a site so that a given sub-page is viewed as part of an index page, and also as a stand-alone page. I do this with my page promoting my book. That sub-page appears as a section lower down on my home page, but I also give out the stand-alone URL to promote my book. In such a case you may want separate style rules in the Page Header Code Injection field for each sub-page that you also want viewed stand-alone. 

Removing the Top Menu

Here's an optional modification to consider: You can inhibit the redisplay of the site menu when a viewer scrolls down your index page. Compare Figure 8 and Figure 9. 

Figure 8. Bedford's default menu behavior

Figure 9. A simple-to-achieve, optional look

Figure 8 shows Bedford's normal behavior, which is to redisplay the site menu when a viewer scrolls the first sub-page off the top of the screen. Figure 9 shows a different result that you can obtain by adding just one, simple line to your <style> element for the index page:

  .show {display: none;}

Place this line inside the <style>...</style> tag sequence, along with the other rules. 

The show rule works because there is JavaScript running in the Bedford template to add a class named show to the HTML tag enclosing the site menu when the page is scrolled. The show class is designed to make visible the page element to which it is added. The above one-liner rule reverses the effect, and now the show class makes its target element invisible. The effect is to provide a clean scroll of the page without the reappearance of the site menu.

Caution: Think carefully about preventing the reappearance of the site menu. Index pages can become rather long, and it's quite convenient for viewers to see the site menu again in case they want to go elsewhere on your site. Balance your desire for an artistic look and feel against your visitor's need for a convenient and pleasant navigation experience while visiting your site.

Done!

You can see how easily Bedford lets you achieve the multi-colored sections look in Figure 1. Sections on an index page can be visually separated by color, and with just a few lines of CSS.

You can apply fundamentally the same technique to other templates supporting the use of index pages. My book Learn CSS for Squarespace shows at least one example targeting sections in a Marquee index page. My book also helps you learn to investigate page structure and create solutions in CSS on your own.

Tip: Do you want a header image at the top of the combined page? Just add a thumbnail image to your first sub-page in the index, in my case to the page named First Page.

Learn CSS for Squarespace 7
9.99

Learn CSS for Squarespace 7 is a seven-chapter introduction to working with CSS on the Squarespace platform. The book is delivered as a PDF file that is readable from any Windows or Mac – or even Linux! -- computer. A complimentary sample chapter is available. Try before you buy.

View the complete description for more details.

Add To Cart