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:
- Regular 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 and 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 Regular Pages have special formatting when you open them through an Index. See the next section for more information.
When you click an Index thumbnail for a Regular Page or Gallery Page, it opens within the structure of the Index:
- 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.
- Gallery Pages have a stacked layout.
Gallery Pages and Regular Pages don't display this special formatting in some circumstances:
- If a visitor goes to the direct URL for the sub-page, rather than opening it through the Index Page.
- If the sub-page has a password.
- If the visitor opens the sub-page by right-clicking and opening in a new tab or window.
Note: If your page content doesn't display when you open it through an Index, check whether the content is in the per-page header.
For example, here's what a Gallery Page looks like when you open it from an Index:
Here's what a Gallery Page looks like outside an Index or when viewed from its direct URL:
Gallery sub-page layout
When you click an Index thumbnail for a Gallery Page, it has a different layout than it would outside the Index:
- Images stack vertically.
- The page title and description displays.
- Image titles and descriptions display below gallery images.
- The page has sub-page formatting: Navigation thumbnails and links display at the bottom, and page headers and footers don't display.
To adjust the style, open the Gallery Page from the Index, then navigate to the Site Styles panel. In the Index Styles section of Site Styles:
- Index Item Layout tweak sets whether the page title and description displays to the right, to the left, or centered above the images. Choose Auto to follow the site layout (set with the Layout Style tweak in the Options section).
- Index Item Detail Width sets the width of the description text on the page.
Tip: To display a slideshow gallery within the Index, use a Gallery Block on a Regular Page.
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 Regular 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, including:
- 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 Regular 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 Regular 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