How to Set Up Featured Image Navigation in Squarespace

Last Edited Time

Jun 25, 2025 09:35 PM

Do not index

Suggested Tag

squarespace

visual navigation

featured images

Tags Synced

AI summary

Create engaging visual navigation on Squarespace using grid layouts or gallery sections, ensuring consistent image sizes and disabling Lightbox for effective linking. Test links on mobile for optimal user experience.

Last edited by

Platform

Squarespace

Setting Up on Squarespace 7.1

Using Grid Layouts (The Easy Way)

Squarespace 7.1 makes this simple with grid layouts on portfolio pages. These automatically arrange your sub-page images into a clean navigation grid.

Create a new portfolio page

Add your sub-pages with featured images

The grid layout displays these images automatically

Visitors click the images to visit each sub-page

This works brilliantly if you want to showcase projects, services, or different sections of your site.

Manual Setup with Gallery Sections

For more control over what links where:

Go to Pages and click the '+' button

Select 'Gallery' from the page layouts

Click the image icon in your gallery section

Upload your images

In each image's settings, add the URL you want it to link to in the 'Link' field

Click the pencil icon to style your gallery

Turn off the Lightbox so your links work properly

Setting Up on Squarespace 7.0

Version 7.0 handles this differently. Some templates have grid index pages that work automatically, but most need manual setup.

Using Gallery Pages

Add a new page and choose a gallery layout

Enter edit mode and click the gallery section

Upload your navigation images

Add clickthrough URLs to each image

Style the gallery using the design panel

Make sure Lightbox is disabled

Using Image Blocks for Full Control

Want complete design freedom? Add individual image blocks to a regular page:

Create a blank page

Add image blocks where you want them

Upload images and set their links

Position them exactly how you want

This takes longer but gives you pixel-perfect control over spacing and layout.

Styling Your Image Grid

Make It Look Professional

Keep images consistent:

Use the same aspect ratio for all images

Crop them to identical dimensions

Choose images with similar lighting and style

Grid settings to adjust:

Thumbnails per row (usually 2-4 works best)

Padding between images

Whether to show titles below images

Pro tip: If your images look messy, go to the gallery settings and enable 'Crop images' with a consistent aspect ratio like 1:1 (square) or 16:9 (landscape).

Common Mistakes to Avoid

Leaving the Lightbox enabled (this breaks your links)

Using images of different sizes without cropping

Adding too many images to one grid (6-8 maximum works best)

Forgetting to test your links on mobile

When to Use Each Method

Grid layouts (7.1): Perfect for portfolios, case studies, or service pages where the content structure matches your navigation.

Gallery sections: Best for linking to diverse content like blog categories, different site sections, or external pages.

Individual image blocks: Use this for unique layouts or when you need text alongside specific images.

Quick Setup Checklist

Choose your images (same size/style)

Upload and crop consistently

Add clickthrough URLs

Disable Lightbox

Test links on desktop and mobile

Check loading speed

Featured image navigation works well because people process images faster than text. Set it up properly and you'll create a more engaging way for visitors to explore your site.

Quick definitions:

Grid layout: Content arranged in rows and columns

Clickthrough URL: The web address an image links to when clicked

Lightbox: Pop-up window that displays images (disable this for navigation)

Aspect ratio: The width-to-height proportion of your images

How to Set Up Featured Image Navigation in Squarespace