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

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 are bold, and link to the list of all Farro tweaks to help you navigate the panel.

Tip: The Live Preview pages for Farro and Haute show real customer sites using these templates.

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 Header: Layout.

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, in Header: Layout. 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. 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 in 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.
  • Folders appear on hover

More help with headers

Keep these tips 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 Products 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 Content Inset in Main.
  • To remove the inset, set Content Inset to 0.
  • For more help, visit Content inset.

farro-content-inset.png

Footer

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

Footer Navigation displays above the blocks area.

  • Folder sub-pages display as links instead of a drop-down menu.
  • Folder 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.

fullbleed.png

Thumbnail tiles

The post title, excerpt, and up to four metadata elements display over the tile.

Page loading

Choose how pages load with Method in 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 metadata elements display at the top in the banner area. Choose how they display in these sections:

These tweaks also affect the landing page.

Banners

Posts have a banner area at the top.

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 in 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.
  • Enable or disable them with Show Author Profile.

Related posts

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

farro-related-posts.png

Navigation arrows, the post title, and one metadata element 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. 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 Enable Ajax Loading in Site: Loading.
  • Style or hide the loading bar that displays while pages load with the other tweaks in 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 Site Background in Site.

Banners

  • Blog post thumbnail images create a banner above individual blog posts.
  • The most recent blog post's thumbnail 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 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 Products 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 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 Fixed Mobile Top in Mobile: Top.
  • The bottom bar is always fixed.
  • Set the background colors in Mobile: Top and Mobile: Bottom.

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. For example, style the site title or logo in Mobile: Branding.
  • Navigation collapses to a ☰.
  • Set the navigation background color with Menu Color in Mobile: Menu.
  • Close Button tweaks in Mobile: Menu style the X that closes the navigation menu.
  • Social icons and tag lines 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 these tips in mind:

Was this article helpful?
10 out of 19 found this helpful