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

This guide walks you through the options for adjusting the look and feel of your Flatiron site. These options are available in the Style Editor.

This is a supplement to the guide Making style changes, which we suggest you read first if you're new to Squarespace.

Tips: In the Home Menu, click Design, then Style Editor. To access tweaks specific to a page, navigate to the Style Editor when on that specific page.

Supported pages

Add pages to your site to create your site's underlying structure. Pages can appear as links in your site's navigation.

Flatiron supports these page types with template-specific features:

  • Index - Create a grid of thumbnail images that link to pages on your site
  • Gallery - Stack your images and videos on a long scrolling page
  • Blog - The list-style Blog Page stacks posts vertically

And these standard pages:

  • Regular Page - A blank page you can customize with blocks
  • Album - Add music and cover art to your site
  • Events - Create a calendar or list of events
  • Products (Classic) - Sell goods and services with our integrated Commerce features
  • Cover Page - A unique landing page styled separately from your template

Gallery Pages and Regular Pages display differently when opened from an Index Page.

Tip: If you're new to Squarespace, we suggest you read Understanding the Pages panel and Adding pages to your navigation for an overview of how pages and content work in Squarespace.

Header

Your Main Navigation, tag line, and site title or logo display in the site header at the top of your site.

  • Use the Header/Footer Background Color tweak to set the header and footer color.
  • Use the Header Position tweak to choose whether the header is fixed at the top of the browser, or scrolls up with the page.

Note: Google Translate Code may expand the header and disrupt page layouts in Flatiron.

Site title, logo, and tag line

Use the Site Title & Logo panel to adjust the site title, replace it with a logo, or add a tag line.

The tweaks in the the Site Header section of the Style Editor adjust the style and size of the site title and tag line, or the height of the logo. Subtitle tweaks affect the tag line.

Use the Site Title/Logo Position tweak to adjust whether the branding elements display in the right side of the header, or to the left of the navigation. The tag line always displays below the site title or logo.

Main Navigation

The Main Navigation displays on the left side of the header. If the Site Title/Logo Position: Left tweak is selected, the site title or logo displays before the navigation links.

Use the links in the Navigation section of the Style Editor to adjust the link colors and font style. For general help, visit Styling navigation.

Folder menus drop down on hover. Clicking the folder title opens the first page in the folder, except on mobile.

Main content area

Use the Background Color tweak to adjust the color of your site's background. Set it to the same color as the Header/Footer Background Color for a unified look. 

Use the Site Alignment tweak to set your content to left-align or center-align. 

Footer

Flatiron supports a site-wide footer. This means the same content displays on every page.

  • On desktop, the footer is split. The left side is a left-aligned content area. The right has right-aligned social icons.
  • On mobile, the footer is centered, with the social icons above the content area.

Add content directly to the footer using blocks. When viewing the page, hover over the footer and click Edit to open the editor. To learn more, visit Editing footers

Use the Header/Footer Background Color tweak to set the footer and header color. 

When the Autohide Footer tweak is checked, the footer will only appear when visitors hover over the bottom of the browser.

Note: The link color for the footer can't be changed. All other fonts take the same style as the rest of the site.

Uncheck Autohide Footer to permanently display the footer at the bottom of the browser. This creates a fixed footer. As you scroll down, your page content will appear to scroll up from under it.

On mobile, the footer is always static at the bottom of the page.

Social icons display in the right side of the footer, and link to your connected accounts. Use the Social Icon tweaks to adjust their size, color, and style (normal, round, square).

Fonts

Use the Main Content section of the Style Editor to adjust the text font, size, and color for your site. Flatiron has Quote Block styling options. 

Mobile

Because Squarespace templates are built with responsive design, your site will adjust on mobile devices to better fit the format of that device. You can use Device View to see how your site will look on different devices.

On a smartphone, the navigation displays as a menu link above the site title or logo and tag line.

  • When tapped, the navigation appears as an overlay.
  • Folders expand when tapped. 
  • The background color follows the site Background Color tweak.

Note: You can disable mobile styles in the Advanced panel. 

Shares and Likes

Use the Share/Like Background Color tweak to change the color of the Share link  that appears on Album Pages, Gallery Pages, product items, and blog posts. This also affects the Simple Like button that appears on blog posts.

Events Pages aren't affected.

Note: The Like button color won't change while you're logged in. Log out or view your site in an incognito window to see the change.

Shopping cart

If your site has a Products Page, a black, pill-shaped shopping cart button appears below the header on all pages once 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. 

shopping-cart.jpg

Sidebar

Flatiron doesn't support a sidebar on any page. For a list of templates with sidebars, visit Editing sidebars.

Next Step

Create a grid of thumbnails with Index Pages.

Was this article helpful?
3 out of 9 found this helpful
Flatiron structure and style