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

The Brine family has multiple templates, which 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 are a good option for displaying text, buttons, and other blocks. If the section has a thumbnail, it creates a background image for the section, which can feature parallax scrolling.
  • Gallery sections showcase multiple images in a grid or slideshow format. These sections don't feature parallax scrolling, so they appear to slide over sections that do. The thumbnail doesn't create a background image.
Tip: An Index makes a great homepage

index-sections-scroll.gif

Set up the Index Page

The Index Page supports Gallery and Regular Pages. 

  • Each page creates its own section.
  • Gallery Pages create galley sections; Regular Pages create content sections.
  • These sections stack vertically, in the order 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. For content sections, add a thumbnail to create a background image, and add blocks to create text and other content.
  5. For gallery sections, add images. You can also add image titles and descriptions.
  6. Style content and gallery sections in the Style Editor.

For more information, visit Using the Index Page.

Tip: See our tips on adding other types of content.

Content sections: Add content

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

To add content, create a content section and then either:

Tips:

  • You can add a thumbnail to create a background image or video.
  • 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.

Content sections: Set the background

Content sections can display an image, video, or color behind their content.

  • 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. This affects your whole site.

Content sections: Set the height

For any section, you can add line breaks (press Return or Enter) to the page content to make the section longer.

In the Style Editor, you can also 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, depending 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 sections: Add images

Gallery sections are made from Gallery Pages. After you add a gallery section, you can add images and videos

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

For all layouts:

Tips:

  • 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.
  • 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 sections: Set the background

  • The images in a gallery section display over the main content background color. Set this with the Color tweak in the Main section of the Style Editor. This affects your whole site.
  • To control how much of the background color shows around the images, uncheck Apply Spacing and use the Spacing tweaks to adjust the spacing or create full-bleed effects.

Gallery sections don't support a background image. To create the effect of a background image, set your gallery sections to the slideshow layout, then use the Spacing tweak to make the image full-bleed.

Gallery sections: Set the 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.
Tip: Padding and Spacing tweaks also affect the height.

Slideshow galleries

When Layout: Slideshow is selected, use the tweaks in the Index: Slideshow Gallery section of the Style Editor 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 until 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, the Aspect Ratio slider adjusts the image shape. 

Edit sections

To edit an existing section, ensure you're not in the Style Editor, then hover over the page and click the annotations.

Note: If one of your sections is blank, 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.

edit-sections.png

Adding content from other pages

Album, Blog, Products, and Events Pages can't be added to the Index Page as sections. Instead, you can:

  • Link to them in your navigation.
  • Pull their content into a content section with a Summary Block. For example, you could create a grid of images that automatically updates to show your latest blog posts.

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.

Gallery sections don't feature parallax scrolling.

Overlay text

In both gallery and content sections, you can add text that appears as an overlay on top of the image. 

You may want to add an overlay color to the images to help make the text visible.

Content sections

If you add a thumbnail to a content section, it creates a background image or video. The page content displays as an overlay.

To add that page content, add a content section and then either:

Gallery sections

After you've added a gallery section, image titles and descriptions appear over its 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.

Overlay color

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

  • Use the Overlay Color tweak in the Main: Overlay section of the Style Editor for Regular Page sections. This also affects page banners.
  • 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 Page content. Use the tweaks in the Index: Scroll Indicator section to add and style this indicator.

Tip: Currently the scroll indicator only displays on Regular Page sections.

scroll-indicator.png

Index navigation

Index Page 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

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

Navigation link behavior

When an Index Page 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.

Mobile

For Index Pages viewed from mobile devices and narrow browsers:

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

Full-page background image

You can use an Index Page to create the effect of a single page with a background image:

  1. Create an Index Page.
  2. Add a content section.
  3. Add a thumbnail image to the content section. This creates the background image.
  4. Add your page content to the content section. It will overlay the thumbnail image.
  5. To extend the height, add extra spaces in a Text Block at the bottom.

page-background-brine.png

Examples

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.

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.

FAQs

You may find these troubleshooting tips helpful:

Was this article helpful?
20 out of 31 found this helpful