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.
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.
You can set your footer to automatically hide until visitors hover over the bottom of the browser.
The header can remain fixed at the top of the browser as you scroll down the page.
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.
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
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:
- A Regular Page with a thumbnail image
- A Gallery Page with at least two images
- An Album, Products, Blog, or Events Page with a thumbnail image.
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
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
To get started building your site, visit Flatiron structure and style.