You can add a thumbnail image navigation to create a landing page of images that link to other pages. This gives visitors a visual way to browse content on your site from one location.
Some templates support Grid Index Pages, which create navigation automatically from your page thumbnail images. On any template, you can create a similar effect using a Layout Page and a Grid Gallery Block with clickthrough URLs.
Here's how that looks in Avenue, which we'll manually recreate using the steps below:
This guide is for version 7.0.
Step 1 - Add a page
- In the Home Menu, click Pages.
- Click the + icon and choose Page.
For detailed steps, visit Building a page.
Step 2 - Add a Gallery Block
- In the page that opens, click an Insert Point and choose the Grid Gallery Block.
- After adding the Gallery Block, you can hover over the placeholder Text Block and click the trash can icon to delete it.
Step 3 - Add images
In the Grid Gallery Block editor, add the images that will become the thumbnails in your navigation.
- In the Content tab, add an image.
- Double click the image you just added.
- In the image title field, enter the title of the page the image will link to. (Description text in the field below won't show on the page.)
- Click Clickthrough URL, then click Content.
- Scroll down to choose the page you want this image to link to. This creates a clickthrough URL.
- Click Save to return to the Gallery Block editor.
Repeat this process for every thumbnail you want to add to the grid. Click and drag the images to rearrange them.
Tip: To replace an image, delete the original image, then add the new image. Give it the same title and clickthrough URL.
Step 4 - Style the grid
Style the grid in the 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, check Show Title.
- Use the Thumbnails Per Row and Padding sliders to adjust the grid's layout.
- Ensure Lightbox isn't selected.
When you've finished, click Save.
When you choose Show Title in the Design tab, the image titles you added in Step 3 display below each image. This helps visitors know where they're going.
- Image titles have the same color and font as your site's body text.
- There isn't a way to adjust the size or justify the text.
Uncheck Show Title to hide them.
Tip: After following these steps, you might want to set the new page as your homepage.
More ways to create thumbnail navigation
Layout page with Image Blocks
You can create a similar effect using Image Blocks on a Layout Page.
To create a grid, we recommend using the Team 4 starter layout. After choosing the layout, add your own images, captions, and clickthrough URLs to the pages you want to link to. If you add more Image Blocks to the page, you may need to crop the new images so they all have the same height.
If you use Image Blocks rather than the Gallery Block, the captions display differently:
- Text justifies left.
- Depending on your Image Block settings, the captions can display below the image, over the image, or as an overlay on hover.
- You can add links to the captions.
- In most templates, the Image Block caption text is styled the same way as the body font. As with the Gallery Block, there isn't a way to change the caption size or justify the text.
- Each Image Block can display its caption differently:
Blog grid navigation
Some templates include landing pages of blog posts in a grid format. For a list of these templates, visit Blog special features.