Pacific, Bryler, Charlotte, Fulton, Horizon, and Naomi 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. The result is a unified page that presents a variety of content.
- 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.
- Gallery sections display images from a Gallery Page in a grid. They're a good way to showcase multiple images in one place.
- Album sections display content and tracks from an Album Page in a grid. If the section has a thumbnail, it displays as a background image for the section.
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.
- Click + and then click Index.
- Drag in existing pages, or click + Add Section to add a new section.
- Hover over the page content and click Edit to add content to each section. For Content sections, add blocks to create text and other content. For Gallery sections, add images or videos, and give them titles and descriptions. For Album sections, add music.
- For Content and Album sections, add a thumbnail to create a background image. Otherwise, the content displays over the site's background color.
- To update any section after adding it, hover over the section and click Edit or Settings.
- Style content, album, and gallery sections in the Style Editor.
For more information, visit Using the Index Page.
Tip: 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.
Gallery Page sections 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.
- Gallery Page videos open in a lightbox on mobile.
- Gallery Page videos can play automatically in desktop view.
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.
Content and Album sections
Content sections are made from Regular Pages. Album sections are made from Album Pages. These sections display with their content overlaying a banner image or video or background color. The page title doesn't show.
- Set a thumbnail image or video URL to create a background image or video.
- 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.
Navigation links for each section
If you've set an Index Page as your homepage, its Album and Regular Page sections can display as site-wide navigation links. When you click one of these links, the page scrolls down to that section on the Index Page.
To set this up:
- Ensure your Index is set as the homepage.
- While on the Index, from the Home Menu, click Design, then Style Editor.
- In the Site Navigation section, use the Expand Homepage Index Links tweak to hide or reveal the links.
Gallery Pages in your Index don't display in the navigation, but you can add a blank Regular Page to your Index right before the Gallery Page to create a navigation link for it.
Tip: For Indexes that aren't your homepage, you can create anchor links manually.
Gallery Page as banner image
Page banners in any 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.