Flatiron's Index Page organizes page thumbnails into a grid to create visual navigation. Clicking any thumbnail in the grid takes you to that page, allowing visitors to dig deeper into your content.
The Flatiron Index Page supports these page types:
- Album Pages
- Blog Pages
- Event Pages
- Gallery Pages
- Products Pages
- Regular Pages
Tip: An Index makes a great homepage.
Set up the Index Page
- From the Home Menu, click Pages.
- Click the + icon and then click Index.
- In the Index that appears, click + Add Page to add a new page, or drag an existing page into the Index.
- Ensure each page has a page thumbnail.
Each page you add to the Index will create its own thumbnail tile on the Index Page. Rearrange the page order in the Pages panel to rearrange the thumbnail order.
For detailed steps, visit Using the Index Page.
Check the Project Squares tweak to display all thumbnails in the grid as squares. Uncheck Project Squares to display all thumbnails at their original aspect ratio.
Use the Project Width tweak to adjust the width of the thumbnails.
The page title displays as text on hover for each thumbnail. The word View appears below it to encourage visitors to click through to your content.
- Use the Grid Headings tweaks to adjust the page title font and color.
- Use the Grid Subheadings tweaks to adjust the font and color of the "View" call to action.
On mobile, thumbnails stack vertically.
Page titles display over the bottom of thumbnail images. Use the Hide Project Title tweak to hide the page titles on mobile.
Use the Grid Background Color tweak to adjust the color that displays behind the page title text on hover.
Note: The transparency slider doesn't affect this color.
Check the Project Hover Zoom tweak to zoom in on a thumbnail's image and text on hover.
When you check the Project Hover Panning tweak, the thumbnail images change focal points as you move your mouse over them. This affect only occurs when the Project Squares tweak is selected.
Gallery and Regular Pages
Gallery Pages and Regular Pages display differently when a visitor opens them by clicking its thumbnail in an Index Page.
- Navigation arrows appear in the top-right corner.
- Thumbnails for the other pages in the Index display below the page content.
- Regular Pages display the page title, description, and a Share link.
Note: Gallery Pages always display a page title, description, and Share link.
Use the arrows to navigate through consecutive Gallery Pages or Regular Pages within the Index. Use the Project Pagination and Project Pagination Background tweaks to adjust their color.
The arrows don't appear on Album, Events, Products, or Blog Pages.
Thumbnail images from the pages in your Index display below the page content to help your visitors explore the rest of your content.
The navigation thumbnails take the same style as your Index Page thumbnails.
Regular Pages display differently when accessed through an Index Page:
- The Page title, description, and a Share link display on the left. Adjust the width with the Project Meta Width tweak.
- The page content displays in the middle. Adjust the width using the Project Detail Width tweak.
Flatiron Index Pages have a unique URL structure that includes a #, which stops search engines from seeing duplicated content. To learn more, visit Index Page SEO and social sharing.
On mobile devices and narrow browsers, content stacks vertically.
Note: For general information about styling your site, visit Structure and style.
Display your images and videos with the Flatiron Gallery Page.