Pacific, Bryler, Charlotte, Fulton, Horizon, and Naomi share the same underlying structure and functionality. This guide applies to all these templates.
Pacific, Bryler, Charlotte, Fulton, Horizon, and Naomi support a single-page style Index Page, which creates a layout of multiple pages stacked vertically. The result is a unified page that presents a variety of content.
Tip: The Index Page makes a great homepage.
Set up the Index Page
The Index supports Gallery, Album, 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:
- From the Home Menu, click Pages.
- Drag in existing pages, or click + Add Section to add a Regular, Gallery, or Album Page.
- Gallery Pages can display as grids or full-bleed slideshows.
- The content of Regular and Album Pages can display over a background image, video, or color.
- Pages within the Index can't be set as homepage, nor can you drag a page set as a homepage into an Index.
- Blog Pages, Products Pages, 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 Regular Page section with a Summary Block.
Gallery Page sections
Gallery Pages can display their images and videos as a full-bleed slideshow or as a grid. Use the Design tweak in the Style Editor to choose the format.
If you choose Design: Slideshow:
- The image title and description display centered over the image. Due to space limitations, image descriptions don't display on mobile devices.
- Choose whether the gallery will Autoplay and set the Slideshow Transition to Fade or Scroll.
- Use the Gallery Controls tweak to set navigation elements: arrows, circles, both, or none.
- Check Gallery Overlay Toggle to add an eye-icon that visitors can use to enable or disable the title, description, and color overlay.
- Adjust the height with the Slideshow Aspect Ratio tweak.
If you choose Design: Grid:
- Image titles display on hover. Image descriptions don't display.
- The site title and navigation won't display in an overlay above a grid gallery.
- Use the Grid Max Columns tweak to determine how many images display horizontally in each gallery grid.
- Adjust the height with the Grid Aspect Ratio and Grid Max Columns tweaks.
- On mobile, Grid galleries display a two images per row. If you have an odd number of images, there will be a blank space next to the final image.
Add a color filter with the Gallery Overlay Color tweak:
- Design: Slideshow - The color filter displays on images that have an image title or description. Visitors can click the eye icon to disable the overlay color.
- Design: Grid - The color filter displays on hover for images that have an image title or description. It also displays fully opaque in any empty space in the grid.
Use the opacity slider to adjust transparency.
- Gallery Page videos open in a lightbox on mobile.
- Gallery Page videos can play automatically in desktop view.
Regular Page and Album Page sections
- To create a background image, add a page thumbnail or video URL.
- If there isn't a thumbnail image or video, the content displays over the site's background color instead.
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.
Index Overlay tweaks
To adjust the color of Button, Form, and Quote Blocks that display over a banner images on Index Pages, use the tweaks in the Index Overlay section of the Style Editor.
Add a color filter to the banner images with the Color tweak.
Padding and height
To change the height of the Regular and Album Page banners, adjust the padding. How you adjust the Regular Page and Album sections depends on whether the section has a banner image:
- For sections with banner images, use the Page Padding tweak in the Index Overlay section.
- For sections without banner images, use the Page Padding tweak in the Index section.
For Regular Page sections, you can also add height by adding Spacer Blocks or extra line breaks to the page content.
Adjusting the text
Adjust any section's font and typography with the tweaks in the Main Content section of the Style Editor.
How you adjust the color and size of the heading and text depends on whether there's a banner image or not:
- For sections with banner images, use the tweaks in the Index Overlay section.
- For sections without banner images, use the tweaks in the Main Content section.
Note: The Share button always displays on Album Pages in an Index.
Sections without banner images
Regular Page and Album Page sections that don't have banner images display the site's background color. This color is controlled by the Background Color tweak in the Main Content section of the Style Editor.
Use the Section Separator tweak to choose what happens when there are two consecutive pages in an Index without background images:
- Section Separator: Alternating Background - Select this and then use the Alternating Color tweak to choose the background color for alternating sections.
- Section Separator: Border - Adds a border between sections. Set its color with the Border Color tweak.
If two sections without thumbnail images have a Gallery Page between them, the alternate background color or border won't appear.
On an Index Page set as the homepage, the Main Navigation can be locked to appear at the top of the browser window when you scroll down the page. The site title won’t display in this fixed navigation.
In the the Style Editor, select Index Scroll Nav: Show On Scroll. The Background Color tweak in the Site Header section sets the background color of the fixed navigation.
On all other pages, including Index Pages that aren’t set as the homepage, the Main Navigation won’t display when you scroll.
- The page sections in an Index that's set as a homepage can also display as links in the Main Navigation.
- These templates support Index anchor links. When visitors click these links, they'll jump to a specific section of your Index Page. Note that unlike other templates, you must add -section to the end of each anchor link.
Gallery Page as banner image
Banners on every template will always experience some cropping, especially on mobile devices.
With the Index Page in the Pacific, Bryler, Charlotte, Fulton, Horizon, and Naomi templates, you can create the look of a header banner that doesn't crop:
- Add an Index Page.
- Add a Gallery Page to the Index.
- Add your preferred banner image to the Gallery Page. Don't add more than one image, as this will affect the cropping.
- Add text to the Image Title and Description fields. This text will display over the image.
- In the Style Editor, scroll down to Index Gallery and select Design: Slideshow and Slideshow Aspect Ratio: Auto.
- Add any page content you want to display below the banner as a second page within the Index.
Use these Style Editor tweaks to further adjust how the Gallery Page image displays:
- Transparent on Banner Images - Display the site header over the image.
- Gallery Overlay Color - Adjust the color filter over the image.
- Gallery Title and Gallery Description - Adjust the font and color of the gallery image text.
Here's an example of how the page might look:
On mobile devices and narrow browsers, content stacks vertically.
Note: For general information about styling your site, visit Structure and style.
Learn how to add banner images to the top of pages.