Squarespace Index VS Folders: Website Information Architecture

Using The Squarespace Index VS Folders

Squarespace offers users several excellent tools for organizing information and developing a navigational structure. Two essential tools to understand when designing your Squarespace website are “Folders” and index pages. These elements control how visitors to your site view your information.

Both folders and index pages have specific functions within your design. Many Squarespace templates utilize both of these organizational features making it simple to create an easy to navigate and highly useful website. 
These are the basics:

• A folder is used to create drop-down menus in your navigation. Folders are available in all templates.

• A Squarespace Index Page creates a unique page on your site that displays images and content from various, multiple pages. Index pages are available in some templates.

To effectively use these elements it's essential to understand a few things before you begin building your website:

• You cannot place an Index Page within a folder, or a folder within an Index Page. While both can be used in your design (in some templates) each needs to stand alone.

• It is not possible to nest folders put a folder within a folder) or an Index Page within an Index Page.

• Switching templates on your website may cause folders to convert to Index Pages and Index Pages to convert to folders. 

Now that you have a basic understanding of the functions of Index Pages and folders let's compare the two and look at the best way to use them in your Squarespace website design.

A Closer Look At Squarespace Folders

Most Squarespace websites use folders for creating drop-down menus in the main navigation of a website. Folders are how related pages are grouped to give visitors quick access to relevant pages on your site. Unlike Index Pages, they are strictly an organizational tool and do not create new pages on your site.

The styles of folders vary depending on the template. Some templates allow you to customize style options to set a menu's background color, choose if it displays an icon and uses different colors for fonts for sub-pages. 

The functionality of folders also varies by the template. In most Squarespace templates, folders used in the main navigation open a drop-down menu on hover (rolling over the navigation name with your cursor). In some templates, clicking on the folders name takes you to the first page in the folder. In other templates, clicking the folder opens the drop-down menu.

Using Folders

Creating and using folders is easy. Go to the Home Menu, click “Pages” then click the + icon and then click on the “Folder”. You can now click the + icon under your new folder to add pages. You can also drag existing pages into your folder.

Adding existing pages to your folder is as simple as dragging and dropping them into the folder. To create a new page, click the + icon below the folder. You can add any page to a folder, except index pages. 

Any pages you add to your folder appear as drop-down menu items. To see how your folder appears, click the "hide" arrow for a full preview.

Each template displays folders differently. In most templates, the folder's links appear when you hover over the folder link. Clicking the folder title does not open the first page. The menu is collapsed on mobile and expands when tapped.

Note: If you delete a folder, all underlying pages are also deleted.

Enhance Your Online Presence By Choosing A Template With Style Tweaks

Folder Actions In Navigation Menus

Desktop - When viewed on a desktop computer, the Bedford, Brine, Farro, Flatiron, and Pacific template families open to the first page in a folder when clicked on.

Mobile - On all other templates, the folders open a drop-down menu when clicked on. when clicked on using a mobile device, the Momentum and Wells templates open to the first page in a folder.

Folder Icons in Navigation Menus

Desktop - The following templates and template families have icons on the desktop view that indicate a folder in the navigation of your site has a drop-down. Adirondack, Aviator, Bedford, Forte, Galapagos, Pacific, Skye, Wexley, and York.

Mobile - On mobile devices the following templates and template families have icons that indicate a folder and drop-down navigation. Adirondack, Avenue, Aviator, Bedford, Five, Flatiron, Forte, Galapagos, Ishimoto, Montauk, Pacific, Skye, Wexley, and York. On the mobile version of the Brine and Farro family of templates, there is an icon that opens the folder in an overlay. On Momentum, Native and Wells the folder is always open.

Note: Squarespace has does not provide a way to make a folder title link to a page without using custom code. This page link from the Squarespace forum may help.

Folder Colors In Navigation Menus

Several Squarespace templates present a background color behind the folder drop-down links in your navigation. In most templates, the folder color matches another element on the site. Typically this is the header background or site background. Click here to see the Style Editor tweak for the folder background color on the template you're using. Style editor tweaks may change additional elements on your website.

A Closer Look At Squarespace Index Pages

Index pages are extremely powerful elements that you can use to create unique pages on your site that will enhance your online presence. They function as “aggregators,” collecting images and content from different pages and creating a landing page where visitors can browse content from throughout your site in a single space. Clicking a link in your navigation brings the visitor to the index page itself. 
Not all templates support Index Pages, and they typically look different in each template. Depending on the template you use, the content is arranged as a grid of thumbnails, a scrolling page, or a full-screen slideshow. It may also create a drop-down menu in your site's navigation.
Index Pages are useful as project portfolio pages for architecture firms, homebuilders, landscape design or interior design websites. You can also use Index Pages to organize content in one place. Many Squarespace sites, including this one,  use an index page as the website's homepage.

Templates The Support Squarespace Index Pages

These templates all support Index Pages. The following templates are grouped by “family” and offer different options for the style of index page displayed. If a template isn't on this list, it doesn't support Index Pages.

• Avenue – displays as a grid.

• Bedford, Anya, Bryant & Hayden – displays as a stacked page.

• Brine Family - (Aria, Basil, Burke, Brine, Cacao, Clay, Ethan, Fairfield, Feed, Foster, Greenwich, Hatch, Heights, Hunter, Hyde, Jaunt, Juke, Keene, Lincoln (discontinued), Maple, Margot, Marta, Mentor, Mercer, Miller, Mojave, Moksha, Motto, Nueva, Polaris, Rally, Rover, Sofia, Sonny, Sonora, Thorne, Wav & West) – displays as a stacked page.

• Flatiron – displays as a grid.

• Forte – slideshow.

• Momentum – slideshow.

• Montauk, Julia, Kent & Om – displays as grid.

• Pacific, Charlotte, Fulton, Horizon & Naomi – displays as a stacked page

• Supply – displays as a grid

• Tremont, Camino, Carson & Henson – slideshow

• York, Artesia, Flores, Harris, Jasper, Jones, Lange & Shibori – displays as a grid

Support for different page types (album, blog, gallery, events, products) varies between templates as well. To learn more, examine and explore templates within the same family to understand the style options available. For example, while Brine and Thorne are in the same family, they offer very different index styles.

Squarespace index pages and folders are beneficial tools that can add functionality to your Squarespace website. They can improve your website's design and navigability, combine relevant content for readers, display images in an organized way and improve your website's user experience, which can reduce your sites bounce rate and improve your site's SEO ranking. The option of using folders or index pages or both is yet another reason to love the Squarespace website builder.

Additional Articles on Building a Squarespace Website

• How To Choose a Squarespace Template Design For Your New Website

• Squarespace Website Design: Setting Up Google Search Console

• Creating Squarespace 301 Redirects To Fix Broken Page Links

• How To Build A Search Engine Optimized Portfolio on Squarespace

• Marketing Your Business Using a Pop-Up on a Squarespace Website

• Search Engine Optimization: Building A Squarespace Website For SEO

About Michael Conway and Means-of-Production

My firm builds search engine optimized Squarespace websites and writes blog articles. Our services are used by architects, interior designers, design-build contractors and landscape design firms. We can help your site get found online, educate prospects, and position your firm as the go-to experts. Contact me for a free video review of your online marketing efforts.