Note: While our most popular guides have been translated into Spanish, some guides are only available in English.

Creating thumbnail image navigation

With thumbnail image navigation, you can create a landing page of images that link to other pages. This gives visitors a visual way to browse related content on your site from one location.

Your options depend on your site's version.

Use built-in options

Your site may have built-in options to automatically organize items or pages in a thumbnail image 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 thumbnail images. To learn more, visit portfolio pages.

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

Manually create thumbnail image navigation

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 for thumbnail image navigation.

You can manually create a similar effect to portfolio pages using a layout page with a gallery section:

  1. In the Home menu, click Pages, 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.

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, but note that it's not possible to add text to images in the gallery section.

Style the gallery

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.

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

  1. In the Home menu, click Pages, 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.
Was this article helpful?
32 out of 92 found this helpful
Creating thumbnail image navigation