Avenue's Index Page organizes page thumbnails into a grid to create visual navigation. Many people use it as a homepage.
The Avenue Index Page supports these page types:
- Layout Pages
- Gallery Pages
- Blog Pages
- Event Pages
- Products Pages
- Album Pages
Set up the Index Page
- From the Home Menu, click Pages.
- Click the + icon, then click Index.
- In the Index that appears, click + Add Page to add a new sub-page, or drag an existing page into the Index.
- Hover over the page you just added and click the to open Page Settings.
- In the Media tab, add a thumbnail image. This will become the thumbnail tile for this page in your Index.
- In the Basic tab, the Navigation Title field is the title that will display below the thumbnail tile.
For detailed steps, visit Using the Index Page.
Add a thumbnail image to each page you add to the Index. Each page creates a new thumbnail tile and title on the Index Page. Rearrange the page order in the Pages panel to rearrange the thumbnail order.
Here's an example of adding a thumbnail image to a page in an Index:
And here's how it displays on the Index Page:
Index Page navigation
Click any thumbnail in the Index to go to that page.
- Blog Pages, Event Pages, and Products Pages open to their own pages.
- Gallery Pages and Layout Pages have special formatting when you open them through an Index. See the next section for more information.
Gallery and Layout Pages
Gallery and Layout Pages opened from an Index have special formatting:
- Clickable thumbnails for the pages in the Index display at the bottom of the page, along with prev/next and Back to Index navigation links.
- Per-page headers and footers don't display.
- The URL includes a hashtag (#). The special formatting doesn't display if the page URL doesn't include the #. To learn more, visit Using the Index Page.
For Gallery Pages:
- Images stack vertically.
- Page titles and descriptions display. Use the Index Item Layout and Index Item Detail Width tweaks in the Index Styles section of Site Styles to set the layout. (To use different text for search results, add SEO titles and descriptions.)
- Image titles and descriptions display below the images.
- To display a slideshow gallery within the Index, use a Gallery Block on a Layout Page.
Note: If your page content doesn't display when opened from an Index, check if the content is in the per-page header.
Here's an example of a Gallery Page opened from an Index:
Here it is when viewed at its direct URL:
Headers and footers
The Avenue Index Page supports a per-page header and footer. To edit this area, hover over the top of the page. When the Header Content annotation appears, click Edit. Then customize the area with blocks.
This content only displays on your Index Page, not on the pages within your Index. However, if you add Audio Blocks or Video Blocks to the header on an Index Page, the audio will continue to play when you navigate through the pages in the Index.
Note: The per-page headers and footers for Gallery Pages and Layout Pages don't display when opened from the Index.
Style the Index Page
Use the tweaks in the Index Styles section of Site Styles to adjust the look and feel of your Index Page:
- Reduce the Thumbnail Padding to 0% to have the thumbnails touch.
- Check Full Width Index to display your Index at the width of the site (full bleed). You can adjust the site width further with the Site Width and Canvas Padding tweaks in the Sizes & Values section of Site Styles. For Canvas Padding, type 0px in the field to remove the side padding altogether.
- Change Index Thumb Title Position to Overlay to display the navigation titles over the thumbnails on hover, instead of beneath the thumbnails.
- Choose Index Thumb Layout: Autocolumns to create a mosaic effect based on the thumbnails' original aspect ratios.
For a full list of available style tweaks, visit Avenue Site Styles tweaks.
On mobile, Index Pages always display two thumbnails per row.
Creating an Index Page with blocks
If you want Layout Page or Gallery Page thumbnails within the Avenue Index Page to open with regular formatting, or if you want to recreate the look of the Avenue Index Page in another template, you can create a similar effect using a Grid Gallery Block on a Layout Page. For more information, visit Creating thumbnail image navigation.
Note: For general information about styling your site, visit Structure and style.
See Avenue troubleshooting for more help, including:
- The Gallery Page in my Index isn't stacking vertically
- When I click an Index thumbnail, the page opens but no content displays
- I hear my Index Page's audio or video clip when I'm on a different page
- My Index Page thumbnails aren't loading