Flatiron template

Last updated January 9, 2025

The style and features of the 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 and the section they appear under in the Site Styles panel are bold.

Supported pages

Flatiron supports these page types:

Header

Your main navigation, tagline, and site title or logo display in the header at the top of your site.

  • Set the background color with the Header/footer background color tweak under General.
  • Choose if the header is fixed at the top or scrolls with the page with the Header position tweak under Site header.
  • Choose if the branding is on the right or left with Site title/logo position under Site header.
  • Style the branding and tagline with the Site header tweaks. Subtitle tweaks affect the tagline.
  • Style the navigation in Navigation.
  • The tagline always displays below the branding.
  • Dropdowns 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 with the General tweaks:

  • 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 the Share/like background color tweak under 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 the Autohide footer tweak under 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 the Header/footer background color tweak under 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.

On the landing page:

  • Promoted image, video, and gallery blocks display below the post title for posts with excerpts.
  • Excerpts have "Read more" links.
  • The full content of individual posts displays under the title for posts without excerpts.
  • Dates, author names, shares, and likes display to the left of the individual post. Other metadata displays below.

On individual posts:

  • Navigation for newer and older posts displays above the comments on posts.
  • Dates, author names, shares, and likes display to the left of the individual post. Other metadata displays below.

Style blog pages

  • The shares and likes color is customizable.
  • Hide author names by unchecking the Show author tweak under Blog styles.
  • Change the space between posts with Blog post spacing under Blog styles.
  • Add border lines above the date and content with Blog borders under Blog styles.
    • The border also displays around the Newer/Older pagination labels on posts.
    • Change the color with the Border color tweak under General.
flatiron-blog.png

Flatiron gallery pages stack images and videos vertically. Set the image size with the Project detail width tweak under Gallery styles.

flatiron-gallery.jpg

Text

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

  • Change the width with the Project meta width tweak under 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.

KB Guide Image

Supported pages

You can add the following pages to an index:

  • Album pages
  • Blog pages
  • Event pages
  • Gallery pages
  • Store pages
  • Layout pages

Thumbnails

The grid displays page featured images. Style them with the Gallery styles tweaks:

  • 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 the Gallery styles section of site 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 the Project pagination and Project pagination Background tweaks under 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.

Background colors

Use the following site styles tweaks to set the background colors for your site:

  • Main content area - Background color under General
  • Header and footer - Header/footer background color under General

Fonts

Choose the text fonts, sizes, and colors in the Main content section of site styles.

  • Flatiron has quote block styling options.
  • Text links are underlined on hover.

Shopping cart

For sites with store 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 changing the style of the shopping cart button.

flatiron-shopping-cart.jpg

Mobile

With Squarespace's built-in responsive design, your site shifts to look great on any device.

  • The navigation displays as a Menu link in the top center. 
  • To change the color of the Menu link and mobile navigation links, open the Site styles panel and use the Link color tweak in the Main content section. 
  • The background color follows the site background (Background color under General).
  • Dropdowns expand when tapped.
  • Footers are centered. Social icon order may change.
  • You can disable mobile styles, but we don't recommend it.
flatiron-mobile.jpg

Troubleshooting Flatiron

Here are some common issues with this template. Some of these are bugs or known issues. Although we still support Squarespace version 7.0, fixing bugs or issues is a lower priority for us while we focus on our current platform, version 7.1. You can move your version 7.0 site to version 7.1 using our update tool.

If the page title and description content is shorter than the browser window when the pages loads, it stays fixed in place as visitors scroll. If it's taller than the browser, it scrolls up with the page.

To reduce the chances of the description scrolling, you can expand the width of the description text:

  1. Open the Site styles panel.
  2. Scroll down to Gallery styles.
  3. Change its width with the Project meta width tweak.

You can also reduce the length of your description:

  1. Open the Pages panel.
  2. Hover over the page and click the gear icon.
  3. Shorten the text in the Description field, then click Save.

Header overlaps project thumbnails

This sometimes happens when your site has a tall logo or the announcement bar is enabled. To resolve it, refresh the page, consider resizing your logo, or close the announcement bar.

Index images are out of order

Usually, index page thumbnails display in the same order as they do in the Pages panel. However, if thumbnails are set to their original aspect ratio they may appear in a different order to better fit the page.

To make the aspect ratio the same for all thumbnails:

  1. Open the Site styles panel.
  2. Scroll down to Gallery styles.
  3. Check Project squares.

Mobile menu doesn't appear

If your link color is the same as your background color, the mobile menu link won't be visible. To fix this:

  1. Open the Site styles panel.
  2. In the General section, review what's set as the Background color.
  3. In the Main content section, ensure the Link color is a different color than the background color.
Footer Image
  • Get help from our community

  • Get help from our community on advanced customizations.

  • Hire a Squarespace Expert

  • Stand out online with the help of an experienced designer or developer.