Marquee, Adversary, Alex, Eamon, Ginger, Mint, and Shift share the same underlying structure and functionality. This guide applies to all these templates.
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.
Note: The Marquee family is discontinued. Although we still support these templates, fixing bugs or issues is a lower priority for us while we focus on our current templates. For a more modern template, we recommend switching to Brine.
- The Index Page supports Content sections. These display the content from Regular Pages, such as text, buttons, and other blocks.
- If the section has a thumbnail, it displays above the content as a banner, with the page title and description as an overlay. The banner can feature parallax scrolling.
Tip: The Index Page makes a great homepage.
Set up the Index Page
The Index supports Regular Pages. Each page appears as its own section. These sections stack vertically in the order in which they’re arranged within the Index. Banners display above the page content for each section.
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. You can also drag an existing page into the Index.
- Hover over the page content and click Edit to add text and other content with blocks.
- Add a thumbnail image or video URL to create an image or video banner. Otherwise the banner will display a background color.
- Add Description text to create a text overlay and format it with headers or buttons.
- To update any section after adding it, hover over the section and click Edit or Settings.
Index Pages have special banner style options in the Parallax Images section of the Style Editor.
Use the Index Image Height tweak to adjust the height of the banner image or video:
- Half displays only half of the banner image or video.
- Two Thirds displays two-thirds of the banner image or video.
- Fullscreen displays the full banner image or video.
The first banner in the Index can be displayed larger than the others. Check First Index Image Fullscreen to display the first index banner at its full height. This tweak doesn't appear when all banners are set to Fullscreen.
Tip: If the banner has a background color, rather than an image or video, these tweaks don't apply. For these sections, open Page Settings and add extra line breaks to the page description.
The Index Page uses a unique URL structure that includes a hashtag (#) to help search engines and social media sites recognize that a page is part of an Index and not duplicated content.
- As you scroll through the sections of the Index, the URL slug changes to the page on display.
- To share a link to a section of your page, open your site in Incognito mode. Go to the Index and scroll down to the section. Then copy the full URL from the browser and share it.
- For general information, visit Index Page SEO and social sharing.
Banner navigation elements
Choose whether the Index's top banner displays behind the site title and navigation with the Transparent On Banner Images tweak.
When the first banner in an Index is set to the Fullscreen height, a directional arrow appears at the bottom to encourage visitors to view all the Index content. Scroll Down appears on hover. Clicking the arrow takes visitors to the second section on the page.
Navigation circles and text also appear on Index banners. Check Hide Index Nav to hide them.
- The arrow and navigation circles are automatically set to black or white depending on the background image and can't be changed.
- The color auto-detection adjusts the color of these elements based on the overall darkness or brightness of the image, not the lightness or darkness of the area around the elements. For example, if the area around the navigation circles is dark but your image is mostly light, the circles will be black.
Tip: Index Pages support Index anchor links, but also have this functionality built-into the URL structure.
A Top link appears at the bottom of the page above the footer on Index Pages. Hide this with the Hide Back to Top Link tweak. Adjust the color with the Text Color tweak in the Main Content section of the Style Editor.
Mixing up types of content heightens the effect of the parallax scrolling on banners. The Alex demo uses Text Blocks and Gallery Blocks to break up the page, and ends with two stacked banner images for a final flourish:
To stack banner images with no white space between them, as shown in the Shift demo below, create sections that have thumbnail images but no page content. Only the banner images and text will display for each page. If you create a new page, delete its default Text Block; otherwise, it adds a blank space between each banner.
Tip: You'll still see placeholder white space while logged into your site.
On mobile devices and narrow browsers, content stacks vertically.
Tip: For general information about styling your site, visit Structure and style.
Learn about the Blog Page.