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

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.

This guide covers the features and design options for the Flatiron template. Site Styles tweaks are bold, and link to the list of all Flatiron tweaks to help you navigate the panel.

Tip: Flatiron's Live Preview page shows real customer sites using this template.

Supported pages

Flatiron supports these page types:

Header

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.

flatiron-header.png

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.)

Share buttons

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.

Footer

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-footer.png

Blog Pages

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.

flatiron-blog.png

Gallery Pages

Flatiron Gallery Pages stack images and videos vertically. Set the image size with Project Detail Width in Gallery Styles.

flatiron-gallery.jpg

Text

Page titles and descriptions display on the left above customizable Share links.

  • 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

Index Pages

Flatiron Index Pages create thumbnail grids that visitors can use to explore your content. Each thumbnail links to a different page.

Supported pages

You can add the following pages to an Index:

  • Album Pages
  • Blog Pages
  • Event Pages
  • Gallery Pages
  • Products Pages
  • Layout Pages

Thumbnails

The grid displays page thumbnail images. Style them in Gallery Styles:

  • 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.

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.

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 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 #.

For Layout Pages, Share links and page titles and descriptions display. (Gallery Pages always display these.)

flatiron-layout-page-Index.jpg

Structure and style

Page titles and descriptions

Page titles and descriptions display on Gallery Pages and Layout Pages opened from an Index.

Tip: To use different text for search results, add an SEO title and description.

Fonts

Choose the text fonts, sizes, and colors in Main Content.

  • Flatiron has Quote Block styling options.
  • Text links are underlined on hover.

Shopping cart

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.

flatiron-shopping-cart.jpg

Mobile

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 (not recommended).

flatiron-mobile.jpg

 

Was this article helpful?
12 out of 37 found this helpful