Use Featured Images to Improve Site Navigation
TL;DR:
- Set up a central landing page with featured images that link to related content
- Use Squarespace's built-in grid layouts (available in both 7.1 and 7.0) for quick setup
- Create custom navigation with gallery sections or grid gallery blocks for more control
- Add clickthrough URLs to images so visitors can navigate directly to pages or content
Squarespace gives you several ways to create landing pages that use featured images as navigation links. Here's how to set them up, whether you want to use the built-in options or create something custom.
Built-in Options by Version
Squarespace 7.1
Portfolio pages in 7.1 can automatically turn into visual landing pages. Turn on grid layouts for your portfolio pages and your sub-pages will display as clickable thumbnails in an organized grid.
Squarespace 7.0
Many 7.0 templates include grid index pages that automatically compile your featured images into an organized view with working links. If your template doesn't have this feature, you can still create the same effect manually.
Manual Setup Options
When the automatic options don't fit your needs, you can build featured image navigation from scratch.
Gallery Sections
Gallery sections work well because they can link to any page or product, not just portfolio items.
- Go to Pages and click the "+" button
- Choose Page Layouts and pick a gallery layout
- Click 'Edit' then the image icon to add your images
- Set clickthrough URLs for each image to create your navigation links
- Adjust the gallery style to match your brand
Grid Gallery Blocks
For more hands-on control:
- Create a new blank page
- Add a grid gallery block at your chosen insert point
- Upload your images and assign clickthrough URLs to each one
- Customize the block design, including image cropping and thumbnails per row
Important: Turn off the Lightbox feature on any gallery where you're using clickthrough URLs. Otherwise, the lightbox will open instead of following your links.
FAQs
Can I use featured image navigation on any Squarespace template?
Most templates support this either directly or through customization. Check your specific template's features to see what's available.
What customization options do I have?
You can adjust image shapes and sizes, control how many images appear per row, and modify spacing between images.
How do I make sure my image links actually work?
Always disable the Lightbox on galleries and blocks where you've added clickthrough URLs. This ensures visitors navigate to your chosen pages instead of opening the lightbox.
Jargon Buster
- Grid Layouts: Content organized in evenly spaced rows and columns
- Gallery Sections: Website areas dedicated to displaying grouped images with various styling options
- Clickthrough URLs: Direct links placed on images that take users to another page when clicked
Wrap-up
Featured image navigation does more than look good – it makes your site easier to explore and can boost visitor engagement. The steps above will help you create a visual navigation system that works smoothly for your visitors, whether you prefer the quick built-in options or want to build something custom.
Ready to improve your Squarespace skills? Join Pixelhaze Academy for in-depth tutorials and expert guidance.