York, Artesia, Flores, Harris, Jasper, Jones, Lange, Shibori, and Taylor share the same underlying structure and functionality. This guide applies to all these templates.
York, Artesia, Flores, Harris, Jasper, Jones, Lange, Shibori, and Taylor's single-page style Index Page makes an elegant portfolio landing page. Many people choose to set it as their homepage.
Each page added to an Index creates a thumbnail, which can display as a banner or in a grid. Clicking the thumbnail takes you to that page. The Index supports all collection pages, as well as Regular 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 page, or drag an existing page into the Index.
For detailed steps, visit Using the Index Page.
Each page you add to the Index creates its own navigation thumbnail on the page. Rearrange the page order in the Pages panel to rearrange the thumbnail order. You can style the thumbnails as banners or a grid, add thumbnail images or colors, and add overlay text.
Note: You can also add a banner and/or text to the top of the page.
Index navigation thumbnails can display as banners or in a grid. Use the Index: Layout section of the Style Editor to set the style.
To display the thumbnails as banners, use the Item Width tweak and choose either Full or Half to display one or two banners per row. Use the Item Height tweak to set the height of the banners.
If your banners have images:
- Alternate Widths - Alternates between rows that display one banner and two banners. This tweak appears when banners are is set to Image Alignment: Center and Index Width is set to Full or Half.
- Alternate Sides - Alternates the side that the image displays on. This tweak appears when banners are set to Image Alignment: Right or Left and Index Width is set to Full.
To display the thumbnails in a grid, select Item Width: Grid. Use these tweaks to style the grid:
- Columns - Choose the number of thumbnails that display per row. Use the Tablet: Columns and Mobile: Columns tweaks to set the mobile display.
- Thumbnail Ratio - Adjust the height to width ratio of the thumbnails.
For banners and thumbnail grid layouts, use these tweaks to further set the style:
- Item Spacing - Adjust the space between banners or thumbnail tiles.
- Full Bleed Index - When checked, thumbnails extend to the browser’s edge. When unchecked, thumbnails follow the site padding. This also affects the page header banner.
Note: Index Pages don't follow the Site Max Width.
- For video thumbnails, ensure you add a mobile fallback image for mobile display.
Use the Index: Item Image section of the Style Editor to set the style:
- Image Alignment - Align the image within the thumbnail (top, right, bottom, left, center).
- Crop Image - Available with the right, left, and center alignment. Crops the image to fill the right half, left half, or entire thumbnail.
- Image Opacity - Adjust how much of the background color shows through the image.
- Image Hover Opacity - Determines how much the image fades when visitors hover over it.
Tip: To fill the whole thumbnail, choose Image Alignment: Center and check Crop Image.
Certain alignment and item width settings have additional options for thumbnails displaying as banners:
- When alignment is set to left or right, and Item Width: Full or Half is selected, check the Alternate Sides tweak to alternate the side the image displays on.
- When alignment is set to center, and Item Width: Full is selected, check Alternate Widths to alternate between rows that display one banner and two banners.
Thumbnail background color
The thumbnail background color displays:
- As the background for navigation thumbnails that don't have thumbnail images.
- Behind thumbnail images that don’t fill the whole thumbnail.
- Showing through thumbnail images if you've adjusted their opacity.
There are two ways to choose the background color in the Index: Item Image section of the Style Editor:
- Auto Color Background - When checked, each thumbnail with a thumbnail image automatically pulls a background color from the thumbnail image itself.
- Background Color - Displays as a solid background color for thumbnails that don’t have thumbnail images, or when Auto Color Background is unchecked.
Tip: Auto Color Background is especially useful for illustrations and images that have one dominant background color, as the image will appear to extend out to the edges of the thumbnail tile or banner.
Index thumbnails can display the following text:
- Title - The navigation title for each page.
- Categories - Categories you’ve added to images within Gallery and Project Pages.
Use the Index: Item Text section of the Style Editor to change the font, color, and size of the text.
- Use Title Display to choose how the titles display (always on, hidden, on hover, on scroll).
- Uncheck Show Categories to hide the category text.
- Check Use Title Background and Use Category Background to add customizable background colors behind the text.
- Use the Text Alignment tweak to adjust where the text displays (top, middle, or bottom and left, middle, or right).
Tip: The navigation title appears on Index thumbnails, but the page title appears at the top of individual pages. This means you can set different text to appear in these two locations. To learn more, visit Renaming a page.
Navigation displays at the bottom of all pages within an Index. To hide it, uncheck the Show Index Navigation tweak.
Use Index: Navigation section of the Style Editor to style the navigation:
- Link Style: List - Displays all the pages within the Index as navigation links.
- Link Style: Next - Displays a Next label. Uncheck Show Label Only to show the name of the next page after the Next label.
For either style, you can choose to display the text as Inline or Stacked, and adjust the text’s color, font, and scaling.
Use the other tweaks in that section to set the link style, including spacing, font, and how the links are separated (slash, bullet, none).
The content on pages within an Index appears to slide up on initial load. Uncheck the Page Transition Animation tweak to remove the effect.
Page header and footer
Experiment with the options in the Style Editor to find the perfect arrangement for your Index Page. We've included a few examples below to inspire you.
This Index Page is set to Item Width: Half, Image Alignment: Center, and Alternate Widths.
This Index Page is set to Item Width: Full, Image Alignment: Right, Alternate Sides, and has the Background Color set to white.
This Index Page is set to Item Width: Full, Text Alignment: Bottom, Full Bleed Index, Image Alignment: Top, and Auto Color Background.
On mobile devices and narrow browsers, content stacks vertically.
- For video thumbnails, ensure you add a mobile fallback image.
Note: For general information about styling your site, visit Structure and style.