How to Use Index Pages in Squarespace

How to Use Index Pages in Squarespace | Lemon and the Sea: Step-by-step guide to index pages in Squarespace including custom CSS you can use to make your website design unique.

If you've been to Lemon and the Sea before, you may have noticed that I made some changes to my website design. I updated the colors, making the brighter and more vibrant, updated my copy, organized some pages, created new awesome resources in The Vault, and redesigned quite a few of my page layouts.

While some changes are small, the thing that took the longest and has the most impact are the new layouts for the Home, About, and Services pages. In addition to changing the content on these pages, I also redesigned them using Index pages.

 

Why I Love Index Pages

I love Squarespace's Index pages because they make it so easy to create beautiful layouts with sections that are easy to customize. This is a feature you'll see on a lot of WordPress websites, with full-bleed images and colored backgrounds helping to divide up a page so it's easy to read, but it's not easy to replicate in Squarespace.

But now that Index pages have become more popular and are offered of many different templates, you can get this look without a lot of custom coding on the back-end of your website. (Just a note: Each page of an Index and the Index itself all count towards your pages, so if you're on the Personal plan, you may have to upgrade to have more pages available.)

 

Templates that Use Index Pages

Squarespace offers three types of Index pages. Templates that offer Index pages will have one of the following types, but not multiple types:

  • Grid Style - each page in the Index creates a thumbnail image on the Index page. To open the page, a visitor would click on the thumbnails. This style created a visual navigation grid. See an example.
  • Stacked Style - each page in the Index creates a section on a single scrolling page. Each stacks vertically, giving the look of one page, but with more options for customization. See an example.
  • Slideshow Style - each page in the Index displays as a full-age background image with content on top. Visitors click on the page title to open the connected page. See an example.

Many Squarespace templates offer Index pages, but some do not. If you want to use Index pages as part of your design, make sure you choose a template with the type of Index options you want.

  • Avenue - Grid with required thumbnails
  • Beford, Anya, Bryant, Hayden - Stacked
  • Brine, Basil, Clay, Feed, Foster, Greenwich, Hatch, Heights, Hunter, Hyde, Jaunt, Juke, Keene, Lincoln, Marta, Mercer, Mojave, Motto, Nueva, Rally, Rover, Sonora, Thorne - Stacked
  • Flatiron - Grid with required thumbnails
  • Forte- Slideshow with required thumbnails
  • Marquee, Adversary, Alex, Eamon, Ginger, Mint, Shift - Stacked
  • Momentum - Slideshow with required thumbnails
  • Montauk, Julia, Kent, Om - Grid with required thumbnails
  • Pacific, Bryler, Charlotte, Fulton, Horizon, Naomi - Stacked
  • Supply - Grid wtih required thumbnails
  • Tremont, Carson, Henson - Slideshow with optional thumbnails
  • York, Artesia, Harris, Lange, Jasper, Shibori, Taylor - Grid with optional thumbnails

If your current template does not offer Index pages, you can create something similar on your own.

  • Grid Style - create a grid on images with clickthrough links on a regular page. This will look very similar to a grid-style Index page, but you will have to create and align each image yourself.
  • Stacked Style - Add images and text to a regular page. This will limit you somewhat because your images will not be full-width and it is more difficult to add different backgrounds to each section.
  • Slideshow Style - Add a Cover Page with multiple images that will rotate. This will give you a similar appearance to a slideshow-style Index page, but will not have a menu bar or footer.

 

Creating an Index Page

To create an Index page, you will need to start by creating an Index. You can do this by creating a new page and selecting Index.

You can adjust the settings of an Index as you would any other page by clicking on the gear icon. Here you can add a banner image, update the Index name and URL, and add custom code.

Once you've created the Index, you will need to add pages to it. You can either add a new page into the Index by Adding a Section or by dragging an existing page under the Index.

 

Adding Pages

Once you have the Index created and some sections added, you will need to design each section. This works just like editing a regular page. In a stacked-style Index, you will see an Edit option for each section as you scroll down the page.

If you want to reorder the pages in your Index, simply drag and drop them in the order they should appear.

If you are using a grid- or slideshow-style Index, make sure you have added the thumbnail you want to display for each section.

 

Styling

Each Idex style and template will allow for different style options, which you can find in the Style Editor (Design > Style Editor).

  • For grid-style Index pages, you can change the number and shape of the thumbnails, adjust the padding, and change how the page title appears.
  • For stacked-style  Index pages, you can change the fonts, navigation elements, and how the page content appears. These options will vary by template, so be sure to check out which options are available for the template you are using in Squarespace's tutorial.
  • For slideshow-style Index pages, you can style the page names and how visitors click through to the connected page.

 

Custom CSS

If you want to add a custom background color or image to any section of the Index, you can do so with some custom code. This needs to be placed in the Advanced tab of the Index settings, not in the settings for the section itself.

Start by adding the Style designations to the Advanced tab. This will tell Squarespace that you are adding CSS code.

<style> custom css goes here </style>

Adding a Colored Background

If you want to add a colored background to an Index section, use the following code. You will need to change the "section-url" text to match the URL of the page within the index you are targeting. You can then add the custom color in rgba or hex format.

RGBA: #section-url {background: rgba(173, 222, 224, 0.3);}

Hex: #section-url {background: #59c4c0;}

Adding a background image

You can also add a background image to each index section. To do this you will need to upload the image to Squarespace and then assign it to the section you want it to appear in.

Start by resizing and making any adjustments to the image in a photo editing program such as Canva or Adobe Photoshop (this may take some trial and error, so save any files you've been working on so you can access them later).

Then, upload the image to Squarespace by going to Design > Custom CSS > Manage Custom Files. You can either drag the image into the Custom Files section or upload it by clicking on the arrow. I like to add Custom Files by opening the Custom CSS section in a window because it is easier to read.

Once your image has been added to Squarespace, you will need to find it's unique URL. Do this by going to the top or bottom of the custom CSS that is already on your website and then clicking on the image. You will then see the URL of that image appear in your code. Copy the entire code, then remove it from the code section (so you don't mess up any customizations), and save.

Once you have the image's URL, you can navigate back to the Index settings and add it to the code there using the following:

#section-url { background-image: url(your-image-url);

You will need to replace the "section-url" with the page you are targeting and "your-image-url" with the URL you just copied.

Once you save the Settings, you can refresh the page and your changes will appear.

The best types of images for Index page backgrounds are repeating patterns because you won't have to worry about parts being cut off, but you can use other images as well. I used both in my website redesign, but it did take some trial-and-error to get the image size and cropping correct.

 

And that's how you can use Index pages in your own Squarespace website design. If you're using Index pages, I'd love to see what you've done with them to customize your website.


Need help with your website design?

Get the Website Design Guide.


Lemon and the Sea is a brand and website design company located in Richmond, VA. I specialize in making the branding process personal. I work with creative women who have a heart to serve others grow their businesses so they can focus on what's most important - family.   I work closely with small businesses to help them dig into what makes them unique, share their vision, and build a business that genuinely represents who they are.