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 in Marquee, Adversary, Alex, Eamon, Ginger, Mint, and Shift creates a vertical layout of multiple pages on a single page. The result is a unified page that presents a variety of content.
The Index Page only supports Regular Pages.
Tip: The Index Page makes a great homepage.
Set up the Index Page
The Index Page is made up of multiple Regular Pages, stacked vertically.
Step 1 - Create an Index
- From the Home Menu, click Pages.
- Click + and then click Index.
Step 2 - Add a page
- In the Index, click + Add Page. Then click Page to create a Regular Page.
- Hover over the page content and click Edit to add content to the page with blocks.
- Click Save.
Tip: You can also create pages outside the Index and drag them into it in the Pages panel.
Step 3 - Set the page banner
- In the Pages panel, hover over the page title and click the to open Page Settings.
- Add text in the Description field to add a text overlay. Format the description to add headers and buttons.
- In the Media tab, add a thumbnail image or video URL to add a background image or video to the page banner. Otherwise the banner will display a background color.
- Save your changes.
Continue adding pages to the Index until it looks the way you want it to. Move pages within the Index to rearrange the order.
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.
Note: 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 # to help search engines and social media sites recognize that a page is part of an index and not duplicated content. To learn more, 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.
Note: Index Pages support Index anchor links. When visitors click these links, they'll jump to a specific section of your Index Page.
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.
Note: You'll still see placeholder white space while logged into your site.
On mobile devices and narrow browsers, content stacks vertically.
Note: For general information about styling your site, visit Structure and style.
Learn about the Blog Page.