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.
Tip: 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.
The Flatiron template supports these page types:
- Grid 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.
- Regular Page - A blank page you can customize with blocks.
- Album - Create a page with playable music tracks and cover art.
- 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.
Tip: Gallery Pages and Regular Pages display differently when opened from an Index Page.
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
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.
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.
Tip: The Site Alignment tweak doesn't appear when you're on an Index Page.
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).
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.
The footer is centered, with the social icons above the content area. The social icons' order may change when centered.
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.
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.
Flatiron doesn't support a sidebar on any page. For a list of templates with sidebars, visit Editing sidebars.
Create a grid of thumbnails with Index Pages.