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.
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 Header: layout.
- Set the background color with Background in 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, in Header: layout. For example, choose Branding position: center to add your site title or logo to the middle header.
- 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 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 Content inset in 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.
- Set the background color with Background color in 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 Blog: list.
- If you have multiple blog pages on your site, they all follow the same style settings.
- Change the tile shape with Aspect ratio in Blog: list.
- Add image backgrounds with post thumbnail images. Images crop around their focal points.
- Add a color filter to images with Overlay in Blog: design.
- If there's no thumbnail image, the tile text displays over the Post background color in 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.
- Set the position of the text with Alignment in Blog: design.
- Choose fonts in the Blog: typography & colors section.
- Set the colors with (Overlay) tweaks in Blog: typography & colors.
- These tweaks also affect blog posts.
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.
- 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:
- 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 thumbnail images create a background image.
- Posts without thumbnail images display the Post background color from Blog: design instead.
- Use Header in 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 in Blog: item to enable or disable this feature, and set its style.
- Style profiles in the Blog: item section.
- 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 section.
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. 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 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.
Set your site's background color with Site background in Site.
- 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.
- 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.
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 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.
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 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: