Farro template family

The style and features of the Farro template family.

Last updated December 13, 2024

The Farro template family (Farro, Haute) is highly-customizable, designed for bloggers, news sites, and anyone who publishes a large volume of content. The blog landing page has multiple striking layout options, helping you highlight your content and share it with the world.

This guide covers the features and design options for the Farro family. Site styles tweaks and the section they appear under in the Site Styles panel are bold.

Supported pages

Farro supports these page types:

Header

Visitors use the header at the top to navigate your site. In Farro, the header has three areas: left, center, and right. Add elements such as the site title or logo and navigation links to these areas in the Header: layout section of site styles.

  • Set the background color with the Background tweak under Header: design.
  • You can make the header background transparent on blog pages and posts.

KB Guide Image

Add and style header elements

You can add any of the following elements to any area of the header:

Choose where they display, or hide them, with the Header: layout tweaks. For example, choose Branding position: center to add your site title or logo to the middle header.

Style them in each of their Header sections of the Site Styles panel. For example, go to Header: primary navigation to choose the font and color of the links.

  • If there are two or more elements in a header area, choose if they stack or not with the Layout tweaks under Header: layout.
  • Set their separate mobile styles to ensure they look good on mobile.
  • Navigation links break to the next line if there isn’t enough horizontal space for them.
  • Dropdowns appear on hover

More help with headers

Keep in mind:

  • For best results, place each element in a different area of the header. Elements may overlap if there isn't enough space.
  • Some tweaks won't display until the elements they affect are added to your site.
  • For more tips, visit Building a site header.

Border

Add and style a site-wide frame around the header, main content area, and footer with Site: border tweaks. Cover pages don't show the border.

farro-border.png

Intro areas

The intro area is a page-specific header area on album, events, gallery, and store pages. Hover over the area directly above the main content on these pages and click Edit to add content to the intro using blocks. This is a great way to customize the top of individual pages.

Intros don’t display on blog pages, layout pages, or individual collection items.

farro-intro-area.png

Content inset

Use the content inset to create eye-catching layouts. When arranged in a single column, some blocks, such as text and quote blocks, display narrower than others, such as image blocks.

  • This affects all areas where you can add blocks, including intro areas and the footer.
  • Set the width with the Content inset tweak under Main.
  • To remove the inset, set Content inset to 0.
  • For more help, visit Content inset.
farro-content-inset.png

Customize the site-wide footer with blocks to help visitors get the answers they need.

  • Style the footer and its links with the Footer and Footer: content color sections of site styles.
  • Set the background color with the Background color tweak under Footer.
  • The footer follows the content inset.

Footer navigation displays above the blocks area.

  • Dropdown sub-pages display as links instead of a drop-down menu.
  • Dropdown names don’t display.
footer.png

Blog pages

Farro blog pages features a customizable grid of thumbnail image tiles, each linking to a different blog post.

  • Change the appearance with Layout and Style in the Blog: list section of site styles.
  • If you have multiple blog pages on your site, they all follow the same style settings.
fullbleed.png

Thumbnail tiles

  • Change the tile shape with the Aspect ratio tweak under Blog: list.
  • Add image backgrounds with post featured images. Images crop around their focal points.
  • Add a color filter to images with the Overlay tweak under Blog: design.
  • If there's no featured image, the tile text displays over the Post background color under Blog: design.

The post title, excerpt, and up to four types of metadata displays over the tile.

  • Choose which metadata displays with the Blog: meta section of site styles.
  • Set the position of the text with Alignment under Blog: design.
  • Choose fonts in the Blog: typography & colors section of site styles.
  • Set the colors with (Overlay) tweaks under Blog: typography & colors.
  • These tweaks also affect blog posts.

Page loading

Choose how pages load with the Method tweak under Blog list: load.

  • Method: infinite scroll - New posts appear automatically as a visitor scrolls down the page.
  • Method: button - A Load more bar appears at the bottom of the blog page. On each click, 24 more posts appear. You can set the bar’s color and font style, or hide it.

Blog posts

Farro blog posts have a variety of eye-catching features, including author profiles, banners, related posts, ledes, navigation arrows, and advanced share buttons.

  • To see post-specific tweaks, open a post before opening site styles.
  • Posts follow the content inset.

Title and metadata

The post title and up to four types of metadata displays at the top in the banner area. Choose how they display in these sections of site styles:

  • Font style and size - Blog: typography.
  • Colors - Blog: colors.
  • Metadata - Blog: meta.
  • Set the colors for titles and metadata that displays over banners with (Overlay) tweaks.

These tweaks also affect the landing page.

Banners

Posts have a banner area at the top.

  • Post featured images create a background image.
  • Posts without featured images display the Post background color under Blog: design instead.
  • Use the Header tweak under Blog: item to choose the layout or hide the banner.

Ledes

If the block at the top of the page is a text block, you can give its first paragraph a distinct format, called the lede.

Use the Lede tweaks under Blog: item to enable or disable this feature, and set its style.

farro-lede.png

Author profiles

Author profiles display authors names, profile pictures, and bios below the page content. Click the author name in the metadata to view a filtered results page for that author’s posts.

  • Style profiles in the Blog: item section of site styles.
  • Enable or disable them with Show author profile.
KB Guide Image

To enable or disable related posts, open blog page settings, go to the Advanced tab, and check or uncheck Enable related items.

  • When enabled, two posts display in thumbnails at the bottom of the page, along with their titles, excerpts, and metadata.
  • Style them with the Blog Item: related posts tweaks.
farro-related-posts.png

Navigation arrows, the post title, and one type of metadata can display at the bottom. These encourage visitors to click through to next or previous posts.

Style or hide them in the Blog Item: pagination section of site styles. There are two options for where arrows display:

  • Pagination: normal - Displays at the bottom of the page.
  • Pagination: floating - Displays in the middle of the page, fixed as you scroll down. On mobile devices and narrower browsers, they're on the page below the post content.

Structure and style

Use these options to change the look and feel of your site.

Ajax loading

Ajax is a special method for site loading that makes content-heavy pages, like blog pages, faster and more nimble. To create a seamless browsing experience, we recommend keeping Ajax loading enabled.

  • Enable or disable Ajax loading with the Enable Ajax loading tweak under Site: loading.
  • Style or hide the loading bar that displays while pages load with the other tweaks under Site: loading.
  • Occasionally, Ajax may conflict with custom code, anchor links, and analytics.
  • For more help, visit Ajax loading.

Background

Set your site's background color with the Site background tweak under Site.

Headers and footers have separate background colors.

Banners

  • Blog post featured images create a banner above individual blog posts.
  • The most recent blog post's featured image may display as a banner on the blog landing page, depending on your layout.

Fonts

  • Use the Main: content fonts and Main: content colors sections of site styles to choose the fonts and colors for your body text and header
  • The tweaks for each text type (such as Body text, Heading 1, and Quote) only appear when that text is on the page.
  • Text links are underlined.

Share buttons

You can add share buttons to most pages. Visitors use these buttons to share content to their social profiles.

  • Blog and store pages - Advanced share buttons
  • Album and events pages - Classic share links

Farro doesn't have sidebars. Instead, add extra content to the footer, intro area, and layout pages.

Mobile

With Squarespace's built-in responsive design, your site adjusts to look great on any device. In Farro, you can customize how your site appears in mobile devices and narrow browsers.

farro-mobile-bars.png

Mobile header elements display in top or bottom navigation bars.

  • To add a top or bottom bar, move any header element into it. For example, go to Mobile: branding in the Site Styles panel and choose Position: top left to add the top bar.
  • Choose if the top bar is fixed at the top or scrolls up with the page with the Fixed mobile top tweak under Mobile: top.
  • The bottom bar is always fixed.
  • Set the background colors with the Mobile: top and Mobile: bottom tweaks.

Header elements

Your site's header elements display in the navigation bars and have separate mobile styles.

  • Style them in each of their Mobile sections of the Site Styles panel. For example, style the site title or logo with the tweaks under Mobile: branding.
  • Navigation collapses to a ☰.
  • Set the navigation background color with Menu color tweak under Mobile: menu.
  • Close button tweaks under Mobile: menu style the X that closes the navigation menu.
  • Social icons and taglines don’t display on mobile.
  • When tapped, the search icon opens an overlay with a search bar. The overlay background follows the site background color.

Although they have separate styles, the same element displays on both computer and mobile. For example, you:

  • Can - Give your mobile site title a different color and font.
  • Can - Display your search bar on mobile but hide it on a computer.
  • Can't - Display a site title on a computer and a logo on mobile.

More help with mobile

Keep in mind:

Troubleshooting Farro

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.

A bar flashes at the top when pages load

The loading bar appears at the top of the page while pages load. To hide the bar:

  1. Open the Design panel, then click Site styles.
  2. Scroll down to Site: loading.
  3. Uncheck Show loading bar.

You can also use the Width and Color tweaks in the same section to change the bar’s style.

Create transparent headers on blog pages

The header background color can display as a transparent overlay on blog pages and posts. To set the header to transparent:

  • Blog page - Use the Style: full bleed tweak under Blog: list.
  • Blog post - Select Header: full bleed under Blog: item.

Tip

Use (Overlay) tweaks in the Header sections of site styles to set the header elements' colors.

farro-transparent-header.gif

Header overlaps blog post

If your blog page or blog posts are set to Full bleed and your Alignment tweak under Blog: design is set to Top left, Top center, or Top right, the meta and post title may overlap with the header elements.

To resolve this, try these solutions:

  • Blog page style - Under Blog: list, choose any Style tweak except Full bleed.
  • Blog post style - Under Blog: item, choose any Header tweak except Full bleed.
  • Text layout - Under Blog: design, choose any Alignment: medium or Alignment: bottom tweak.
  • Header layout - Under Header: layout, move the header elements. For example, if post titles and metadata display on the left, move your header elements to the right.

How do I move my header elements?

The header is split into three areas: left, center, and right. Each area can contain any or all of the header elements (navigation links, site title or logo, tagline, social icons, search bar, and shopping cart).

  1. Open the Design panel, then click Site styles.
  2. Scroll down to the Header: layout section.
  3. Use Position tweaks to determine where each element displays, or to hide them.
  4. Use Layout tweaks to set each of the three header areas to display horizontally or stacked.

What are the layout options for blog landing pages?

Change the appearance of your landing page with the Layout and Style tweaks under the Blog: list section of site styles.

Layout options:

  • Layout: stacked - Thumbnails stack vertically
  • Layout: grid - Thumbnails form a grid. Browser width determines the number of tiles per row.
  • Layout: split - Intersperses rows of two or three tiles.
  • Layout: packed - Displays one image on one side and one or more images on the other.
  • Layout: feature - The first post and every fourth post display at blog width.

Style options:

  • Style: normal - Grid displays within the side padding and below the header.
  • Style: full width - Grid displays at the width of the browser, below the header.
  • Style: full bleed - Grid displays behind the header and at browser width.
  • Spacing adjusts the space between between the post images. Reduce it to 0px to have the images touch.

Layouts may look different in narrow browsers.

What are the layout options for blog post banners?

Use the Header tweak under Blog: item to choose the layout:

  • Header: banner - Banner displays within the Side padding and below the header.
  • Header: full width banner - Banner displays at the width of the browser, below the header.
  • Header: full bleed - Banner displays behind the header and at browser width.
  • Header: text - No banner, text displays over the Site 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.