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

Brine, Clay, Feed, Foster, Greenwich, Hatch, Heights, Hunter, Hyde, Jaunt, Juke, Keene, Lincoln, Marta, Mercer, Mojave, Motto, Nueva, Rally, Rover, Sonora, and Thorne share the same underlying structure and functionality. This guide applies to all these templates.

 

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

This guide describes the special features of the Brine, Clay, Feed, Foster, Greenwich, Hatch, Heights, Hunter, Hyde, Jaunt, Juke, Keene, Lincoln, Marta, Mercer, Mojave, Motto, Nueva, Rally, Rover, Sonora, and Thorne Index Page

Tip: The Index Page makes a great homepage

Structure

The Index Page is made up of Regular Pages and Gallery Pages, stacked vertically. To set up your Index Page:

  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.

For detailed steps, visit Using the Index Page.

Each page you add to the Index will create a section on the page. Rearrange the page order in the Pages panel to rearrange the section order.

  • Regular Pages display the page content. If the Regular Page has a page banner, it displays behind the page content. The page banner image or video can feature parallax scrolling.  
  • Gallery Pages display as a grid. Galleries don't feature parallax scrolling.

Header

If the top section in your Index is a Regular Page, the bottom section of the header overlays it. (If the top section is a Gallery Page, the bottom of the header overlays the main content background color.)

Tip: Hide the top header by moving all header elements into the bottom header, as seen in Nueva.

No intro areas

Index Pages don't have an intro blocks area at the top. The intro areas of individual pages within an Index won’t display on the Index Page.

Regular Page banners

The page content of Regular Pages displays in a banner on Index Pages. The page title and description doesn’t show.

  • Setting a thumbnail image or video URL for the Regular Page creates a background image or video for the banner.
  • If the page section has no banner, the page content displays over the main content background color. To adjust this, use the Color tweak in the Main section of the Style Editor.
Note: Regular Pages feature a content inset that indents text and certain other blocks on either side.

In the Index: Page section of the Style Editor:

  • Padding (Overlay Pages) adjusts the padding on sections with thumbnail images.
  • Padding adjusts the sections without thumbnail images.

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.

Full-screen sections

Use the Fullscreen Pages tweak in the Index: Page section to set some or all Regular Page sections to display at the height of the browser. You can choose from the following options:

  • None
  • First Page Only
  • Pages with Backgrounds Only
  • All Pages
Note: Padding affects the section height.

Parallax scrolling

Regular Page sections with banners 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.

Enable or disable parallax scrolling in the Main: Overlay section of the Style Editor with the Enable Parallax tweak.

Note: Parallax scrolling for these templates isn't currently supported by the Chrome browser on iOS devices. Banners display as static background images. 

Gallery Page grids

Gallery Pages display images in a grid. The Layout tweak in the Index: Gallery section of the Style Editor adjusts how the grid displays (packed or split). The number of images in the gallery further adjusts its grid layout.

The Spacing tweak adjusts how much of the background color shows around the images. Set the background color with the Color tweak in the Main section. If you set the Spacing to 0, the gallery images touch.

Gallery images don’t feature parallax scrolling. If you’ve enabled parallax scrolling on your site, Gallery Page grids move with the page content and appear to scroll over Regular Page sections.

Image titles and descriptions appear over the image. In the Index: Gallery section: 

  • Content Position and Content Padding adjust where they display.
  • The Title and Body tweaks adjust the text’s font and color.
  • Content Text Alignment adjusts the alignment (left, center, or right).
  • Content Background adds a background color behind the text.
Tip: If you don't have a background color for the text, you may want to add an overlay color to the images to help make the text visible.

Overlay color

Add a filter effect to your Index sections with a color overlay.  

  • Use the Overlay Color tweak in the Main: Overlay section of the Style Editor for Regular Page sections.
  • Use the Image Overlay tweak in the Index: Gallery section for images in Gallery Page sections.
Tip: You may need to adjust the transparency for the overlay color.

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:

Vary the types of content

Mix up banner images, videos, text, and galleries to heighten the parallax scrolling effect.

Stacked banners

Stack Regular Pages to create a page of parallax scrolling banners.

Gallery grid with clickthrough navigation

By adding image clickthrough URLs, you can use the images in a gallery grid to take visitors to other parts of your website.

Button banner

Use a Button Block to add a call to action to any Regular Page section.

Index Anchor links

Add anchor links to help visitors navigate to different parts of your Index Page. To learn how to do this without code, visit Adding Index Page anchor links.

In this example we've used buttons as the anchor links, but you can use any links including text, headers, and clickthrough images.

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.

scroll-indicator.png

Mobile

  • Gallery images stack in mobile. Parallax scrolling displays on Regular Page banners.
  • Video banners don't display in mobile. Set a mobile fallback image to display in its place.
  • Visit Advanced mobile styles to learn more about your site's customizable mobile options.

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

Next step

Review our troubleshooting FAQ or see a list of all Style Editor tweaks.

Was this article helpful?
3 out of 5 found this helpful
Brine Index Pages