Note: While our most popular guides have been translated into Spanish, some guides are only available in English.
Flatiron Index Pages

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

  1. From the Home Menu, click Pages.
  2. Click the + icon and then click Index.
  3. In the Index that appears, click + Add Page to add a new page, or drag an existing page into the Index.
  4. 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.

Thumbnail shape

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.

Page titles

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.

Mobile

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. 

Color filter

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.

Zoom

Check the Project Hover Zoom tweak to zoom in on a thumbnail's image and text on hover.

Panning

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.

Navigation arrows

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.

Navigation thumbnails

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

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.

URL structure

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.

Mobile

On mobile devices and narrow browsers, content stacks vertically.

m-index-flatiron.png

Note: For general information about styling your site, visit Structure and style.

Next step

Display your images and videos with the Flatiron Gallery Page.

Was this article helpful?
8 out of 10 found this helpful
Flatiron Index Pages