Flatiron empowers artists and other creatives to share their work with the world. Its flexible grid Index Page presents an overview of your projects, enticing visitors to explore individual pieces in greater depth.
Tip: Flatiron's Live Preview page shows real customer sites using this template.
Flatiron supports these page types:
- Album Pages
- Blog Pages - List
- Cover Pages
- Events Pages
- Gallery Pages - Stacked
- Index Pages - Grid
- Layout Pages
- Products Pages - Classic
Your Main Navigation, tag line, and site title or logo display in the header at the top of your site.
- Set the background color with Header/Footer Background Color in General.
- Choose if the header is fixed at the top or scrolls with the page with Header Position in Site Header.
- Choose if the branding is on the right or left with Site Title/Logo Position in Site Header.
- Style the branding and tag line in Site Header. Subtitle tweaks affect the tag line.
- Style the navigation in Navigation.
- The tag line always displays below the branding.
- Folders open on hover. Clicking the title opens the first sub-page, except on mobile.
Main content area
Style the content area between the header and footer in General:
- Set the background color with Background Color.
- Align your content to the left or center it with Site Alignment. (This doesn't appear on Index Pages.)
Click a Share link to display Share buttons. In Flatiron, Share links appear on:
- Album Pages
- Events Pages
- Gallery Pages
- Layout pages opened from an Index
- Product items
- Blog posts
Change the color of the Share link with Share/Like Background Color in Main Content.
- This also affects the Simple Like button that appears on blog posts.
- This doesn't affect Events Pages.
- The color won't change while you're logged in. Log out or view your site in a private browser to see it.
Customize the site-wide footer with blocks.
- On computers, the footer is split. The left side is a left-aligned content area. The right has right-aligned built-in social icons, displayed in reverse order from how they appear in the Social Links panel.
- On mobile the footer is centered, with social icons above the content area.
- The social icons can't be hidden.
Choose if the footer is fixed or autohides with Autohide Footer in Site Footer.
- If Autohide Footer is checked - The footer appears when visitors hover over the bottom of the browser.
- If Autohide Footer is unchecked - The footer is fixed. As visitors scroll, the page content appears to scroll up from under it.
To style the footer:
- Change the background color with Header/Footer Background Color in General.
- Style the social icons with the Social Icon tweaks in Site Footer.
- The color of links can't be changed. All other fonts take the same styles as the rest of the site.
- On mobile, the footer is always static at the bottom of the page.
Flatiron Blog Pages display as a list of vertically-stacked posts.
- Dates, author names, shares, and likes display to the left. The other metadata display below.
- The shares and likes color is customizable.
- Hide author names by unchecking Show Author in Blog Styles.
- Thumbnail images don't display.
- Change the space between posts with Blog Post Spacing in Blog Styles.
- Navigation for newer and older posts displays above the comments on posts.
- Excerpts display Read More links and Promoted Image, Gallery, or Video Blocks.
Add border lines above the date and content with Blog Borders in Blog Styles.
- The border also displays around the Newer/Older pagination labels on posts.
- Change the color with Border Color in General.
- Adjust the width with Project Meta Width in Gallery Styles.
- If the text is shorter than the browser window, it stays fixed as visitors scroll. If it's taller than the browser, it scrolls with the page.
- To use different text for search results, add an SEO title and description.
- On mobile, images stack beneath the title and description text.
Image titles and descriptions don't display in Flatiron. We still recommend adding them, as they create alt text.
More help with galleries
- Use clickthrough URLs to turn images into links.
- Galleries don't support deeplink URLs or a lightbox.
- Galleries display differently when opened from an Index.
- To create a different layout, use a Layout Page with a Gallery Block.
Flatiron Index Pages create thumbnail grids that visitors can use to explore your content. Each thumbnail links to a different page.
You can add the following pages to an Index:
- Album Pages
- Blog Pages
- Event Pages
- Gallery Pages
- Products Pages
- Layout Pages
- Change the thumbnail shape with Project Squares and Project Width
- Add a color filter to the image on hover with Grid Background Color. The transparency slider doesn't affect this color.
- Zoom in on a thumbnail's image and text on hover with Project Hover Zoom.
- Check Project Hover Panning to have thumbnail images change focal points as you move your mouse. This effect only occurs with Project Squares.
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.
In Gallery Styles:
- Change the title font and color with Grid Headings tweaks.
- Change the "View" font and color with Grid Subheadings tweaks.
- On mobile, titles display at the bottom of thumbnails. Hide them with Hide Project Title.
Gallery and Layout Pages in Indexes
Gallery and Layout Pages opened from an Index have special formatting:
- Navigation arrows appear in the top-right corner. Use them to go through the Index's Gallery and Layout Pages.
- Change the navigation arrow color with Project Pagination and Project Pagination Background in Gallery Styles.
- Clickable thumbnails for the Index's sub-pages display below the page. These thumbnails have the same style as your Index Page thumbnails.
- The URL includes a hashtag (#). The special formatting doesn't display if the URL doesn't include the #.
- Adjust the text width with the Project Meta Width tweak.
- To use different text for search results, add SEO titles and descriptions.
Structure and style
Page titles and descriptions
Tip: To use different text for search results, add an SEO title and description.
Choose the text fonts, sizes, and colors in Main Content.
- Flatiron has Quote Block styling options.
- Text links are underlined on hover.
For sites with Products Pages, a black, pill-shaped shopping cart button appears below the header on all pages after a visitor adds a product to their cart. The shopping cart stays fixed in the same position, even if your header is set to Header Position: Normal.
There aren't style tweaks for adjusting the style of the shopping cart button.
With Squarespace's built-in responsive design, your site adjusts to look great on any device.
- The navigation displays as a Menu link in the top center.
- Folders expand when tapped.
- The background color follows the site background (Background Color in in General).
- Footers are centered. Social icon order may change.
- You can disable mobile styles, but we don't recommend it.