A thumbnail image navigation lets you organize content from multiple pages in a single location. This allows visitors to quickly browse content on your site from one landing page with images that link to different pages.
Note: The steps in the guide illustrate the manual process of setting up a thumbnail navigation on Squarespace 5. On Squarespace 7, this is a built-in feature called the Index Page. To learn more about switching to Squarespace 7, visit Moving from Squarespace 5 to Squarespace 7.
Step 1 - Add an HTML page
While in Structure mode:
- Click Add Page, which appears to the left of your navigation.
- Select the HTML page type.
- Click Select & Configure.
- Enter a page title in the New Page Configuration window. Click Create Page.
Step 2 - Add thumbnail image
On the HTML page, open Content Mode and click Edit to open the WYSIWYG editor.
Add an image to represent the page you want to link to:
- Place your cursor where you want to add the image and click the Insert Image icon.
- Click Upload An Image.
- Click Choose File (or Browse in Firefox) to upload the image from your computer.
- Click Upload File.
Note: You can also use images already saved to your site. To learn more, visit Adding an Image.
Step 3 - Set the image size
To create a uniform look, set each image to the same size:
- Click Resize.
- Enter an image width in the New Image Width field.
Tip: Since this only modifies the width, we recommend uploading images with the same height to keep them uniform.
Step 4 - Link image and add captions
Next, connect the image to a different page on your site and add caption text.
- Click Link / Caption.
- Add the page’s URL in the Link Location (URL) field to turn the image into a clickthrough link.
- Add the text you want to display below the image, such as the page title.
Step 5 - Final steps
- Click Save & Close.
- Repeat Steps 1 through 5 to add new images to the page, setting the same size for each image.
- Within the WYSIWYG, arrange and reorder images by clicking on any image and using the Left, Inline, Block, and Right options. For example, you could arrange square thumbnail images to create a grid, or stack wide thumbnail images vertically to create a stacked banner effect.
- When you're finished setting up your thumbnail navigation, click Save & Close.
- Hover over the page link in the navigation and click Enable to publish the page.
Sidebar image navigation
To add images to your sidebar that link to pages on your site:
- While in Structure mode, scroll to the bottom and click Insert New Section below the sidebar.
- Click Text/HTML.
- Click Select and Configure, then Create Widget.
- In Content mode, click Edit Widget HTML.
- Click the insert image icon and choose an image. You may also want to resize the image.
- Click Link/Caption.
- In the Link Location field, add a link to the page.
- Click Save & Close.
- You may want to center the images.
Tip: To hide your top navigation, change your site layout. The top navigation can't include images.
The final result might look like this:
Thumbnail navigation in Squarespace 7
Squarespace 7, our current platform, features an integrated thumbnail navigation called an Index Page.
Index Pages organize content from multiple pages into a single location. Some features include:
- Drag and drop functionality, rather than building a layout manually.
- Responsive design and mobile styles.
- Built-in style options that affect all thumbnails on a page simultaneously.
Here's a layout of page thumbnails created with the Avenue template's Grid Index Page:
Squarespace 7 also supports Summary Blocks, which create a layout of thumbnail images linking to your latest blog posts or other content.
To learn more, visit Moving from Squarespace 5 to Squarespace 7.