What are Squarespace index pages?

 
 
 

So how do you get a page on your Squarespace 7.0 site, that enables you to create stacked sections? A Squarespace Index Page is your answer. Think of the Index Page as one long page with different sections. 


The advantage of having an index page is that you can create sections which help you separate out the page with different types of content. When your ideal client is browsing your page, it's a good idea to have sections which differ in colour, images (including those awesome banner images) and layouts.

Note: Index pages are only applicable to Squarespace 7.0! Squarespace 7.1 websites consist of page sections now, and we’ll release a separate blog post on that soon!

 
 

How to Add an Index Page

Click the plus sign under your primary navigation or not linked, this will give you the option to open an Index Page under the Collections category (like the image below).

 

Once you do this, you will see a new index page pop up under whichever section you opened it in.

 

How to Create an Index Page

Once the index page is created, you will see an option to ‘Add Section’. That is when you’re presented with the option to add from one of the ‘Layouts’ or ‘Gallery’.

Next, we will run through some of the various options you have for sections of the index page.  

Index pages are great for a minimalist website design because it enables clean design, and you can have plenty of Calls to Actions (CTAs) throughout the various sections of your index page.

 


 

Squarespace Index Page Sections

The Various Options

 
 

Blank Page


A blank page is a great option, because it literally is a blank canvas for you to do anything with. Personally we prefer the blank page over the others, simply because it avoids your page looking identical to another brand’s website.

 
 

There are so many options on a blank page. You can pretty much create what you need on it.

 

You have the option of all the basic blocks:

  • Text

  • Image

  • Video 

  • Spacer

  • Lines 

  • Buttons

Gallery blocks - great to present your portfolio and other images that you want laid out neatly and when you need the images to be of equal size:

  • Slideshow

  • Carousel

  • Grid 

  • Stack

Summary block - your option to summarize things like recent blog posts and client testimonials. You can use the following layouts:

  • Wall

  • Carousel

  • Grid

  • List


Now, there are so many options for blocks, that it may be better for us to do a video tutorial on this soon! (Watch this space). But, you do have the option to do this on any of the index page options.

 
 

Banner Image

You can add a banner image once you have opened a new section. Hover over the section and you will see the option for ‘Banner’. You can add a banner to all section types.

(More on banner images shortly).

 

About Page

This is pretty self explanatory!

When you select this page, you’ll get a few options for the layout. You can add an image vertically, horizontally and in banner form. 

Features Page

This is a good option if you want to show off your Services, business processes, etc. Once again, you get the options for a number of layouts.

Team Page

You get the option for 1, 2, 3 or 4 columns depending on the size of your team, and how many images you have to show.

 
 
 
 

Image Page

This page gives you the option to lay out your photographs/images in a few different interesting ways. 

 

How to Create Banner Images

 

You have a couple of options to create a banner image on a section of your index page.

Most often when you see coloured backgrounds, this is created on sites like Canva*. Instead of using a code, more often than not it is actually just a coloured image created using a rectangular shape, then uploaded as a banner image. This is a great and simple option!


Canva* is a good place to create your banner images (but check out our blog post on Squarespace Image Sizes for tips on banner image sizing). 


 

On Squarespace 7.0, you have the option to enable Parallax scrolling. Go into your ‘Design’ panel and select a banner image on your site. You will have the option to ‘Enable Parallax’ Main: Overlay. (Tip: this will enable parallax on all of your banner images).


You can also change the focal point on your banner image. By moving around the little white circle, this will determine where the central focus area of the image goes.

 

Managing Sections on an Index Page


If you aren’t happy with the way your sections are arranged, you have the option of moving them around to your heart’s content. You’re able to rearrange the sections of your index page by hovering over the top left of the index page, and clicking ‘Manage Sections’.

 
 

Free Workbook 

The whole idea behind a minimalist concept is to build a site that will need less maintenance over time, and to create a more effective online tool for your business. 

If you’re keen on reading more about what it takes to build a minimalist website, hit the download button below to get the free 10-page workbook.

 


 
Previous
Previous

Squarespace image animation & hover effect

Next
Next

Site styles basics on Squarespace 7.0 & 7.1