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

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:

  1. From the Home Menu, click Pages.
  2. Click the + icon, then click Index.
  3. 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.
  4. Hover over the page content and click Edit to add text and other content with blocks.
  5. Add a thumbnail image or video URL to create an image or video banner. Otherwise the banner will display a background color
  6. Add Description text to create a text overlay and format it with headers or buttons.
  7. To update any section after adding it, hover over the section and click Edit or Settings.

Banner height

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. 

Index URLs

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. 

Footer

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.

Examples

To see different variations of the same Index, explore the demo sites for MarqueeAdversary, Alex, Eamon, and Shift.

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.

Mobile

On mobile devices and narrow browsers, content stacks vertically.

m-index-marquee.png

Note: For general information about styling your site, visit Structure and style.

Next step

Learn about the Blog Page.

Was this article helpful?
10 out of 18 found this helpful
Marquee Index Pages (discontinued)