Creating featured image navigation

Set up an enticing visual layout of images that link to different pages or content on your site.

Last updated February 23, 2023

If you want to give visitors a visual way to browse related content on your site in a central location, you can create a landing page of featured images that link to other pages.

Your options depend on your site's version.

Use built-in options

Your site may have built-in options to automatically organize featured images of items or pages in a navigation landing page.

On any version 7.1 site, use grid layouts on portfolio pages to automatically organize portfolio sub-pages into a landing page of featured images. To learn more, visit portfolio pages.

Some templates support grid index pages, which create navigation automatically from your page featured images. On any template, you can manually create a similar effect.

If your site's built-in options don't work for your needs, or your site doesn't have a built-in option, you can manually create grids of images your visitors can use to navigate different pages.

Gallery sections

With gallery sections, you can link to other pages or items instead of just portfolio sub-pages. You also have layout options not available with portfolio pages:

  1. Open the Pages panel, click +, then click Page Layouts.
  2. Click Gallery and choose the gallery layout you want. You can change this later.
  3. Click Edit on the page, then click the image icon on the gallery section.
  4. In the gallery section editor, click + to add images.
  5. Click each image and add clickthrough URLs in the Link field.

On the gallery section, click the pencil icon to style the gallery. Your options depend on the layout you choose. To ensure clickthrough URLs work, switch the Lightbox toggle off.

Auto layouts

You can create a similar effect with auto layouts. In that case, visitors will click buttons below each image instead of the images themselves.

Create a similar effect to grid index pages on any template using a layout page and a grid gallery block with clickthrough URLs:

  1. Open the Pages panel, click +, then click Blank.
  2. Click Edit on the new page, then click an Insert point to add a grid gallery block.
  3. In the Content tab of the gallery block, add images.
  4. Double-click each image to add titles and clickthrough URLs to link the images to other pages.

You can click and drag the images to rearrange them. To replace an image in your grid, delete the original, then add a new image its place. Give it the same title and clickthrough URL as the original.

Style the grid

You can style the grid in the gallery block's Design tab:

  • To make all images the same shape, check Crop images. Use the Aspect ratio menu to choose the shape.
  • To show titles below the images so visitors know where they're going, check Show title.
  • To adjust the grid's layout, use the Thumbnails per row and Padding sliders.
  • To ensure clickthrough URLs work, uncheck Lightbox.

Tip

To create customized layouts, add image blocks to a page and set up image clickthrough URLs. You can move your blocks for a custom design, and add captions below or overlaying your images.

Footer Image
  • Get help from our community

  • Get help from our community on advanced customizations.

  • Hire a Squarespace Expert

  • Stand out online with the help of an experienced designer or developer.

Creating featured image navigation