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

The Flatiron template empowers artists and other creatives to share their work with the world. With a flexible grid Index Page, Flatiron presents an overview of your projects, enticing visitors to explore individual pieces in greater depth.

See the left navigation sidebar for information on building and customizing specific parts of your site. If you haven't yet picked a template, you can get help with initial installation at Getting started with Squarespace. You can also visit our general tips on building a portfolio site or photographer site.

Note: Visit the Flatiron Live Preview page for examples of real customer sites using this template. If you've already created a site, you can switch your template at any time.

Special features

Dynamic Index Page

The Index Page creates a grid of thumbnail images that each link to a separate page. This gives people a snapshot of your work while encouraging them to dig deeper.

Special formatting for pages in an Index

Gallery and Regular Pages have special layout elements when opened via an Index.

Pop-up footer

You can set your footer to automatically hide until visitors hover over the bottom of the browser.

Fixed header

The header can remain fixed at the top of the browser as you scroll down the page.

Quick start

Certain tweaks and settings can make a big impact on how your site looks and behaves. Play with the following options until you settle on a design you love.

To open any panel, press the ? key and search for its name. 

Site

Open the Style Editor panel. These are some key tweaks that affect the whole site:

  • General > Background Color
  • General > Header/Footer Background Color
  • Site Header > Site Title/Logo Position
  • Header Position
  • Site Footer > Autohide Footer

Index

Open your Pages panel and add an Index Page to your Main Navigation. Click Add Section to add pages. To get a feel for how your Index works, we suggest you add these pages:

Click on your Index Page title in the navigation. To style your Index Page grid, try these key tweaks:

  • Gallery Styles > Project Squares
  • Gallery Styles > Project Width

The following tweaks affect on-hover effects. Exit the Style Editor to see the changes take effect. 

  • Gallery Styles > Grid Background Color
  • Gallery Styles > Grid Headings Color and Grid Subheadings Color
  • Gallery Styles > Project Hover Zoom and Project Hover Panning

Exit the Style Editor and click on the Regular Page's thumbnail. Then open the Style Editor and try these key tweaks: 

  • Gallery Styles > Project Detail Width and Project Meta Width
  • Gallery Styles > Project Pagination and Project Pagination Background 
  • Main Content > Share/Like Background Color

Blog Page

Open your Pages panel and add a Blog Page with at least two posts. Then open the Style Editor and try these key tweaks:

  • Blog Styles > Blog Borders
  • General > Border Color
  • Blog Styles > Show Author

Next step

To get started building your site, visit Flatiron structure and style.

Was this article helpful?
4 out of 15 found this helpful
Using the Flatiron template