Note: While our most popular guides have been translated into Spanish, some guides are only available in English.
Tremont Index Pages

Tremont, 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: The Index makes a great homepage.

Set up the Index

  1. From the Home Menu, click Pages.
  2. Click the + icon and then click Index.
  3. 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:

  1. In the left panel, hover over the title of a page within the Index.
  2. Click the gear-icon.
  3. In the Media tab, add a thumbnail image.
  4. 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.

Index structure

Landing page

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.

Sub-pages

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.

Tip: Use overlay colors to help certain pages stand out. The Index's landing page overlay is styled separately from the Gallery overlay and page overlay. In the Style Editor, you can choose whether or not Index sub-pages display overlays and page banners.

Slideshow options

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.

Index background

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.) 

Overlay colors

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.

Header

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.

Description

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.

Banners

You can add a banner to any sub-page, except Gallery Pages. To help certain pages stand out, you can choose whether banners display only in the Index or only outside the Index.

For example, you could hide banners on Index sub-pages by selecting Show Page Banner Image: Not In Index. When visitors open a page in the Index, they won't see the slide's thumbnail at the top of the page, as a banner. They will see it at the bottom, where the Index landing page displays. They'll still see banners at the top of every page outside the Index.

Mobile

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.

Next step

Display your work with a customizable gallery.

Was this article helpful?
0 out of 0 found this helpful
Tremont Index Pages