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

Brine, Aria, Basil, Blend, Burke, Cacao, Clay, Ethan, Fairfield, Feed, Foster, Greenwich, Hatch, Heights, Hunter, Hyde, Impact, Jaunt, Juke, Keene, Kin, Lincoln, Maple, Margot, Marta, Mentor, Mercer, Miller, Mojave, Moksha, Motto, Nueva, Pedro, Polaris, Pursuit, Rally, Rover, Royce, Sofia, Sonny, Sonora, Stella, Thorne, Vow, Wav, and West 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.

  • 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.

This guide describes the special features of the Index Page.

Tip: The Index Page makes a great homepage

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:

  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, or click Gallery to add a Gallery Page. You can also drag an existing page into the Index.
  4. Hover over the page content and click Edit to add content to each section.
  5. 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.
  6. For gallery sections, add images. You can also add titles and descriptions.
  7. To update any section after adding it, hover over the section and click Edit or Settings.
  8. Style content and gallery sections in the Style Editor.

For more information, visit Using the Index Page.

Tip: Album, Blog, Products, and Events Pages can't be added to the Index Page. Instead, you can link to them in your navigation, or pull their content into a content section with a Summary Block.

Content section display

Content sections are made from Regular Pages. The page's content displays in each section. The page title and description doesn’t show.

  • Set a thumbnail image or video URL to create a background image or video.
  • If the section has no background image or video, the page content displays over the main content background color. Adjust this with the Color tweak in the Main section of the Style Editor.
  • An optional content inset indents text and certain other blocks on either side.
  • Content sections can feature parallax scrolling.
  • 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.

Use these tweaks to further adjust the height of these sections:

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

Gallery section display

Gallery sections are made from Gallery Pages.

Gallery sections can display as a slideshow or grid. Use the Layout tweak in the Index: Gallery section to choose the layout. This tweak affects all Index gallery sections.

For all layouts:

  • The Image Overlay tweak adjusts the color overlay.
  • 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.
  • Hover Style sets what happens when you hover over an image.
  • Use the tweaks in the Index: Gallery Content section to set how images and titles display.

Lightbox functionality is disabled within the Index.

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

Tip: The layout and style settings you choose apply to all Index gallery sections on your site. To create a different effect, add a content section with a Gallery Block.

Gallery section height

For gallery sections:

  • Layout: Slideshow - Check Use Fixed Height to manually set the height.
  • Layout: Packed, Split, or Grid - The height is set automatically by the number and size of the gallery's images.
Note: Padding and Spacing tweaks also affect the height.

Slideshow galleries

When Layout: Slideshow is selected, use the tweaks in the Index: Slideshow Gallery section to style the slideshow

  • Use the Autoplay tweak to choose whether the slideshow moves through the images automatically.
  • Controls tweaks affect the navigation arrows that display over the gallery. Choose Next/Previous Controls: None to hide them.
  • 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 and Layout: 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.

  • Use the Max Items Per Row to set the number of images.
  • Use the Min Item Width to set their size. 

For all grid layouts:

  • Aspect Ratio adjusts the image shape. 

Header

How the header displays depends on the first section:

  • If the top section is a Regular Page, the bottom header overlays it.
  • If the top section is a Gallery Page, use the Overlay Header on First Index Gallery tweak to choose whether the bottom header overlays the section or the main content background color.

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.

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

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.

Enable or disable parallax scrolling with the Enable Parallax tweak.

Overlay text

Content sections

The text you add to the page content appears in that section.

If you add a thumbnail, it creates a background image or video; the page content displays as an overlay.

Gallery sections

Image titles and descriptions appear over gallery images. In the Index: Gallery Content section of the Style Editor:

  • 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: 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.

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

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.

Use the Style tweak in the Index: Navigation section to choose the style (Radio, Filled Dots, Faded Dots, Horizontal Lines, Vertical Lines, Expanding Horizontal Lines). Choose Style: None to hide the navigation.

Use the other tweaks to style the navigation, including choosing its size, color, whether titles appear on hover, and whether the navigation displays on the left or right.

The navigation disappears on mobile. To set the browser width at which it disappears, use the Breakpoint tweak.

navigation-icons.jpg

Background color

The background color displays:

  • Behind content sections without background images
  • In the spacing and padding around images in gallery sections

Set this color with the Color tweak in the Main section.

Tip: You can add a background image to content sections by adding a thumbnail image.

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:

  1. Add a content or gallery section at the top of your Index.
  2. Ensure the second section is a content section, and that it doesn't have a thumbnail
  3. In the Site: Border section, check Show Border.
  4. Use the Width and Color tweaks to style the border.
  5. 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.
  6. 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.

mirror-site-border.jpg

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:

Vary the types of content

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

Stacked banners

Stack content sections with thumbnails to create a page of parallax scrolling banners.

Slideshow banner

You can use an Index Page to create the effect of a slideshow page banner:

  1. Create an Index Page.
  2. Add a gallery section with multiple images as the first section.
  3. In the Index: Gallery section of the Style Editor, choose Layout: Slideshow. (This tweak affects all gallery sections on your site.)
  4. In the Index: Slideshow Gallery section, ensure Gallery Autoplay is checked.
  5. Add a content section below the gallery section, and add your page content to it.

 brine-slideshow-banner.gif

Gallery section with clickthrough navigation

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

Button banner

Use a Button Block to add a call to action to any content 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.

Mobile

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

Next steps

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

Was this article helpful?
11 out of 17 found this helpful
Brine Index Pages