Bedford, Anya, Bryant, and Hayden 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.
- The Index Page supports Content sections. These display the content from Layout Pages, such as text, buttons, and other blocks.
- If the section has a thumbnail, it displays above the content as a banner, with the page description as an overlay.
Tip: An Index makes a great homepage.
Set up the Index Page
The Index supports Layout Pages. Each page appears as its own section. These sections stack vertically in the order in which they’re arranged within the Index. Banners display above the page content for each section.
- In the Home Menu, click Pages.
- Click the + icon and then click Page to create a Layout Page.
- Hover over the page content and click Edit to add text and other content with blocks.
- Add a page banner or a slideshow banner. You can remove the page content to only display the banner, or remove the banner to only display page content.
- Add Description text to create a text overlay and format it with headers or buttons.
- Save your changes.
Repeat this step for every page you want to add to the Index. Then:
- In the Pages panel, click the + icon and click Index.
- Drag the Layout Pages you just created into the Index.
For detailed steps, visit Using the Index Page.
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.
- Visit Special banners to learn how to add and format these banners and their overlay text.
- The height of the banner is determined by the amount of content in the page description.
To stack banner images with no white space between them, create Layout Pages that have thumbnail images but no page content. Only the banner images and overlay text will display for each page. If you create a new page, open its page editor and delete its default Text Block. Otherwise, this Text Block adds a blank space between each banner.
Note: On mobile, slideshow banners have a set height of 300 pixels. If text on a slideshow banner is too long to fit within the 300 pixel height, the description text will be hidden in mobile view.
The site title and Main Navigation appear in a locked or fixed position after you scroll past the first page.
Use the Header Background Color tweak to adjust the fixed header's background color.
When you go to the direct URL for a page that's part of an Index, all the pages within that Index will display on the page in a sidebar navigation. Adjust the styling of this navigation using the tweaks in the Sidebar section of Site Styles.
Note: The navigation won’t show on the Index Page itself, only on the pages within the Index.
Styling the Index
The Index Page uses the same tweaks every other page uses for colors and fonts. There aren't tweaks for specifically for the Index Page.
Index Pages support Index anchor links. When visitors click these links, they'll jump to a specific section of your Index Page.
To see this in action, test out the "View Our Work" button in Hayden's demo content.
Note: For general information about styling your site, visit Structure and style.
Learn about Bedford Blog Pages.