Tremont, Camino, Carson, and Henson share the same underlying structure and functionality. This guide applies to all these templates.
The Index Page creates a slideshow of full-screen images, each representing a page on your site. The slideshow can have animated effects and color filters.
The Index Page supports these page types:
- Regular Pages
- Gallery Pages
- Blog Pages
- Events Pages
- Album Pages
- Products Pages
Tip: An Index makes a great homepage.
Set up the Index
- 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.
Add a thumbnail image for each page in the Index. The thumbnail becomes the background image for that page in the slideshow:
- In the left panel, hover over the title of a page within the Index.
- Click the .
- In the Media tab, add a thumbnail image.
- Click Save.
Repeat this for every page in the Index.
Note: If your page doesn't have a thumbnail image, the Index's background color displays instead.
Landing page structure
The Index Page creates a slideshow landing page. Each page in the Index becomes a full-bleed slide that displays when you hover over its menu link. The page's thumbnail image becomes a background image for the slide, showcasing your portfolio with dramatic imagery.
- Slides on the Index landing page feature a color overlay. (This is styled separately from the gallery overlay and page overlay.)
- Each page in the Index creates a navigation link.
- You can add the Index Page's description as a headline.
- You can set the background color or an image to display on page load or at all times except on hover.
- You can set your slideshow to automatically move through the slides.
When you open any Index sub-page from the Index navigation menu, or access it from its direct URL, that page's content loads.
When you scroll down to the bottom of the page, the Index landing page displays below the footer. This helps your visitors explore your content and gives your portfolio a unified feel.
- The sub-page's thumbnail displays as the background image. If there's no thumbnail, the background color displays.
- This version of the landing page doesn't support animation or scrolling effects. It does support the Index overlay color.
The Index landing page displays full-bleed, meaning it covers the width and height of the browser, minus the Outer Padding tweak.
Use the Index Slideshow Options section of the Style Editor to style the slideshow:
- Slideshow On - When checked, the pages in the Index move from one page to the next automatically.
- Slideshow On for Touch Devices - If you disable the automatic slideshow, you can enable it on touch devices, such as smartphones and tablets.
- Slideshow Delay - Set the length of time between each slide.
- Slideshow Animation - Add a subtle zoom effect to each thumbnail image.
Note: These settings don't apply to the Index landing page that displays at the bottom of sub-pages. At the bottom of sub-pages, the slideshow doesn't have animation effects or automatic scrolling options.
You can set either a background color or image for your Index.
- Background color - This displays by default. Use the Background Color tweak in the Index Overlay/Background Colors section to set the color.
- Background image - Add a thumbnail to the main Index Page in Index Page Settings. This replaces the background color. To revert back to a background color, remove the thumbnail image.
Note: The Index landing page overlay color doesn't display over the Index background image.
How the Index background displays depends on your settings:
- If Show Index Slide is checked, and Slideshow On is unchecked, the Index background will display at all times except when hovering over the Index navigation links.
- If Show Index Slide is checked, and Slideshow On is checked, the Index background will display on initial page load, before moving through the rest of the slides in your slideshow.
- If Show Index Slide is unchecked, the Index background won't appear. Visitors will see the first sub-page's slide on initial load. (The Index background color will always display for any sub-pages without thumbnail images.)
The Index landing page's Overlay Color displays over all slides with thumbnail images.
Experiment with the tweaks in the Index Overlay/Background Colors section of the Style Editor to adjust the colors.
- Overlay Opacity - Adjust the overlay's transparency. To make the color disappear, set the opacity to 0.
- You can blend two colors for both the background and overlay.
Note: Sub-pages within the Index have their own overlay settings.
The header's branding and Main Navigation links display over the slides on your Index landing page.
- The header takes the same style on the Index landing page as on the rest of your site. Unlike on other pages, it doesn't disappear on scroll.
- The header alternate colors don't ever display on the Index landing page. They'll display on sub-pages that don't have banners.
Index navigation links
Each sub-page in the Index creates a link on the Index landing page. Use the Page Title field in each sub-page's settings to set the link text.
- When you hover over a link, its background thumbnail appears.
- Click the link to go to the page within the Index structure.
Use the Menu tweaks in the Index Typography section of the Style Editor to adjust the font and color. Use the Menu Hover Color tweak to adjust the style of active links.
Use the Index Menu Options section to adjust where the links display and their spacing.
- Position - Adjust the position (Left, Bottom Left, Center, Bottom Center). This tweak also affects the position of the Index description.
- Layout - Choose Inline or Stacked to display the links horizontally or vertically.
- Use the Max Width tweaks to set the maximum widths for different browser sizes.
- Spacing - Adjust the space between links.
- Index Menu/Description Padding - Adjust the space between the menu links and the description.
- You can set the maximum and minimum font sizes for the menu links.
Tip: Adjust the slideshow options to automatically move through the pages in the Index.
The Index Page's description can appear as a headline on the Index landing page. Add this text in the Page Settings for the Index.
Style the description in the Index Description Options section of the Style Editor:
- Show Description - Uncheck to hide the description.
- Position - Adjust where it displays (top, middle). The position of the Index navigation links also affects this.
- Use the Max Width tweaks to set the maximum widths for different browser sizes.
- Menu/Desc Spacing - Adjust the spacing between the description and the Index navigation. Available when Position: Middle is selected and the Index navigation links are set to Position: Left or Center.
- Hide on Hover - When checked, the description will disappear when a visitor hovers over the Index navigation links.
Tip: We recommend keeping the description short, such as a key phrase or single sentence. Longer descriptions may dominate the screen in mobile view.
You can add a banner image or video to the top of any sub-page, except Gallery Pages.
To add a banner to a sub-page:
- Add a thumbnail in the page settings for that sub-page.
- In the Style Editor, scroll to the Page Banner Image Options section.
- Click Show Page Banner Image.
- Choose Always to display banners on all pages, or In Index to display banners on Index sub-pages only.
If you choose Never or Not In Index, visitors won't see the banner at the top of any sub-page. The page thumbnail will still display in these areas:
- When visitors scroll to the bottom of the sub-page, where the Index landing page displays below the footer.
- On the Index landing page itself.
- If you chose Not In Index, they'll see banners on pages outside the Index.
Although Index Pages use responsive design to adapt to the width of the browser, they behave much the same way on mobile as on desktop.
- If you've disabled the automatic slideshow on desktop, you can enable it on mobile with the Slideshow On for Touch Devices tweak.
- Navigation link styles and background images set to display on hover will instead display when tapped.
- The description always displays if Show Description is checked.
Note: For general information about styling your site, visit Structure and style.
Display your work with a customizable gallery.