The single-page style Index Page stacks the content from multiple pages vertically, allowing you to highlight images and information in one location. Parallax scrolling gives the page a sophisticated, interactive feel.

Content sections display the content from Regular Pages. This makes them a good option for displaying text, buttons, and other blocks. If the section has a thumbnail, it displays as a background image for the section, and can feature parallax scrolling.

Gallery sections display images from a Gallery Page in a grid or slideshow. They're a good way to showcase multiple images in one place. Gallery sections don't feature parallax scrolling, so they appear to slide over sections that do.

Set up the Index Page

The Index supports Gallery and Regular Pages. Each page appears as its own section. These sections stack vertically in the order in which they’re arranged within the Index.

To set up an Index Page:

From the Home Menu, click Pages.

Click the + icon, then click Index.

In the Index that appears, click + Add Section, then click Content to add a Regular Page, or click Gallery to add a Gallery Page. You can also drag an existing page into the Index.

Hover over the page content and click Edit to add content to each section.

For content sections, add a thumbnail to create a background image, and add blocks to create text and other content. Otherwise, the content displays over the Background color set in the Main section of the Style Editor.

You can set the minimum height for sections that have a background image or video.

Note: If you have a blank page within an Index, its Edit page annotation may not appear. To edit the page, move it out of the Index, add content, then move it back to the Index.

Content section height

Use the Apply Minimum Height tweak in the Index: Page section to set some or all Regular Page sections to display at a fixed height. You can choose from the following options:

None

First Page Only

Pages with Backgrounds Only

All Pages

After choosing which sections will have a set height, use the Minimum Height tweak to set the height.

Sections will never be shorter than the page content, including padding. If the page content is longer than the minimum height, the section will stretch to fit the content.

This tweak uses a percentage of the viewport height, which is the part of a browser where your site displays. For example, if you choose 100vh, the height of the section will take up 100% of the viewport height. The actual height in pixels will vary, based on the height of a visitor's browser or device.

Spacing tweaks adjust how much of the background color shows around the images. Set the background color with the Color tweak in the Main section. Uncheck the Apply Spacing tweaks to create full-bleed effects.

Indicators tweaks affect the dots or lines that show how many images are in the gallery. Choose Indicators: None to hide them. Clicking an indicator dot or lines takes you to that image in the gallery. If the slideshow is set to Autoplay, indicator lines will fill in to show how long till the next slide.

Transition tweaks set how the gallery moves from one image to the next.

Tip: You can also use arrow keys to navigate through the slideshow.

Grid galleries

There are three grid options:

Layout: Packed

Layout: Split

Layout: Grid

The Layout: Packed andLayout: Split tweaks set their layouts automatically based on the number and size of the images in the gallery, and their padding. Experiment with these two options to see how they look on your site.

The Layout: Grid tweak gives you more fine-tuned control over the grid layout.

Parallax scrolling

Content sections with thumbnail images can feature parallax scrolling. When this is enabled, the background images move more slowly than the content in the foreground, creating an illusion of depth and immersion.

Scroll indicator

Add a directional arrow, line, or text at the bottom of the first section to encourage visitors to view all the Index content. Use the tweaks in the Index: Scroll Indicator section to add and style this indicator.

Note: Currently the scroll indicator only displays on Regular Page sections.

Index navigation

Index navigation provides a quick reference point for which section in the Index you're viewing. Clicking a circle or line in the navigation takes you to that section.

Mirror the border

You can add a line of spacing beneath the first section that matches the width of your site's border. This sets the first section apart from the rest of the Index. The border only appears if the second section is a content section with no background image.

To set this up:

Add a content or gallery section at the top of your Index.

Ensure the second section is a content section, and that it doesn't have a thumbnail.

In the Site: Border section, check Show Border.

Use the Width and Color tweaks to style the border.

If the first section is a content section, check Mirror Border Below First Page in the Index: Page section. If the first section is a gallery section, check Mirror Border Below First Gallery in the Index: Gallery section.

Use the Color tweak in the Main section to set the color of the mirrored border. For best results, match this color to the border color.

Footer link behavior

When an Index is in the Main or Secondary Navigation, it displays the Index Page title as a single link. Clicking it takes you to the Index Page.

When an Index is in the footer, it breaks out as multiple links. How the links appear depends on your footer's layout. Clicking any link takes you to the direct URL for that section's page, rather than the main Index.

To create a link in the footer that leads to the main Index, place your Index Page in the Not Linked section, and use a content link in the footer to link to it.

Formatting the Index Page for your content

There are many uses for the Index Page, and you can have more than one on your site. The best way to figure out what works for you is to experiment with the different options, but here are a few suggestions to get you started: