Creating a thumbnail image navigation

With a thumbnail image navigation, you can 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.

Tip: The steps in this guide illustrate the manual process of setting up a thumbnail navigation on Squarespace 5. On Squarespace 7, this is a built-in feature. To learn more about switching to our current platform, visit Squarespace 5 vs. newer versions.

Step 1 - Add an HTML page

While in Structure mode:

1. Click Add Page, which appears to the left of your navigation.
2. Select the HTML page type.
3. Click Select & Configure.
4. 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: 

1. Place your cursor where you want to add the image and click the Insert Image icon.
2. Click Upload An Image.
3. Click Choose File (or Browse in Firefox) to upload the image from your computer.
4. Click Upload File.

Tip: 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:

1. Click Resize.
2. 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.

1. Click Link / Caption.
2. Add the page’s URL in the Link Location (URL) field to turn the image into a clickthrough link.
3. Add the text you want to display below the image, such as the page title.

Step 5 - Final steps

1. Click Save & Close.
2. Repeat Steps 1 through 5 to add new images to the page, setting the same size for each image. 
3. 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.
4. When you're finished setting up your thumbnail navigation, click Save & Close.
5. 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:

1. While in Structure mode, scroll to the bottom and click Insert New Section below the sidebar.
2. Click Text/HTML.
3. Click Select and Configure, then Create Widget.
4. In Content mode, click Edit Widget HTML.
5. Click the insert image icon and choose an image. You may also want to resize the image.
6. Click Link/Caption.
7. In the Link Location field, add a link to the page.
8. Click Save & Close.
9. 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

Our newest platform, Squarespace 7.1, uses Portfolio Pages as a built-in option for thumbnail navigation. 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

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 about moving to Squarespace 7, visit Squarespace 5 vs. newer versions. When you're ready to switch, visit Moving from Squarespace 5 to Squarespace 7.