The style and features of the 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 and the section they appear under in the Site Styles panel are bold.
Farro supports these page types:
- Album pages
- Blog pages - Grid
- Cover pages
- Events pages
- Gallery pages - Standard
- Layout pages
- Store pages - Advanced
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.
Add and style header elements
You can add any of the following elements to any area of the header:
- Site title or logo (“branding”)
- Navigation links
- Built-in social icons
- Search bar
- Shopping cart
- Sign in / My account link
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.
- Folders 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.
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.
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.
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.
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.
- Folder sub-pages display as links instead of a drop-down menu.
- Folder names don’t display.
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.
- 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.
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.
- 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.
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.
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.
- Style profiles in the Blog: item section of site styles.
- Enable or disable them with Show author profile.
- 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.
Next and previous navigation
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 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.
Set your site's background color with the Site background tweak under Site.
- 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.
- 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.
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
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.
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.
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:
- Store pages have mobile style options.
- Unlike some templates, you can’t disable mobile styles.
- See our general tips for how sites behave on mobile devices.
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.
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:
- Open the Design panel, then click Site styles.
- Scroll down to Site: loading.
- 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.
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).
- Open the Design panel, then click Site styles.
- Scroll down to the Header: layout section.
- Use Position tweaks to determine where each element displays, or to hide them.
- 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: 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: 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.