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 in Bedford, Anya, Bryant, and Hayden creates a vertical layout of multiple pages on a single page. The result is a unified page that presents a variety of content.
The Index Page only supports Regular Pages.
Tip: The Index Page makes a great homepage.
Set up the Index Page
- From the Home Menu, click Pages.
- Click the + icon and then click Page to create a Regular Page.
- Hover over the page content and click Edit to add content to the page with blocks.
- Add a page banner or a slideshow banner.
- 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 Regular Pages you just created into the Index.
For detailed steps, visit Using the Index Page.
Each page stacks vertically within the Index. Banners display above the page content for each page.
You can remove the page content to only display the banner, or remove the banner to only display page content.
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.
You can add a page banner (a single image or video) or a slideshow banner above the page content for each Regular Page you add to the Index. Visit Special banners to learn how to add and format these banners and their overlay text.
The height of Index banners is determined by the amount of content in the page description.
To stack banner images with no white space between them, create Regular 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 the Style Editor.
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.