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

Farro and Haute share the same underlying structure and functionality. This guide applies to both templates.

This guide walks you through the options for adjusting the look and feel of your Farro or Haute 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.

Tips: 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.

Supported pages

Add pages to your site to create your site's underlying structure. Pages can appear as links in your site's navigation.

Farro and Haute support these page types with template-specific features:

  • Blog - A sophisticated Blog Page with a customizable grid of thumbnail tiles

And these standard pages:

  • Regular Page - A blank page you can customize with blocks
  • Album - Add music and cover art to your site
  • Events - Create a calendar or list of events
  • Gallery - Style the gallery as a slideshow or grid
  • Products (Advanced) - Sell goods and services with our integrated commerce features
  • Cover Page - A unique landing page styled separately from your template
Tip: If you're new to Squarespace, we suggest you read Understanding the Pages panel and Adding pages to your navigation for an overview of how pages and content work in Squarespace.

Header

Your site header contains three areas: left, center, and right.

The following elements can all display in any area of your header:

Use the Header: Layout section of the Style Editor to choose whether each element displays in the Right, Center, or Left area of the header, or to Hide it.

Use the Left Layout, Center Layout, and Right Layout tweaks to choose whether the elements display horizontally or stacked. These tweaks appear when there are two or more elements in a header area. Navigation links break to the next line if there isn’t enough horizontal space for them.

Use the tweaks in the Header: Design section of the Style Editor to adjust the element spacing and the header Background color.

Navigation links

Main Navigation and Secondary Navigation support creating drop-down menus using folders. Folders appear on hover. To learn how to adjust what pages display in the navigation menu, visit Adding pages to your navigation.

Note: Header elements can display as a transparent overlay on Blog Pages and blog posts.

Styling the header elements

Each header element has its own section in the Style Editor.

  • Header: Branding - Set the font and color of the site title, or the logo width.
  • Header: Tag Line - Set the tag line’s font and color.
  • Header: Primary Navigation - Set the style, font, and color of the Main Navigation.
  • Header: Secondary Navigation - Set the style, font, and color, of the Secondary Navigation, or check Inherit Primary Navigation.
  • Header: Search - Choose the search bar’s font, and its icon, border, and text color. Use the Style tweak to choose whether the bar displays as a rectangle or an underline.
  • Header: Social - Set the size, style, and color of the social icons. Check Standard Color Buttons to display the default brand colors.
  • Header: Cart - Set the shopping cart's font and color, and choose the style (text, cart, bag).

The header can display over the page content on Blog Pages and blog posts. Use the (Overlay) tweaks to set the colors for each of these elements when displaying over page content.

Note: Many of these elements have separate mobile styles and overlay colors. 

Use the Icons section to set the line weight of the search and shopping cart icons.

Overlay header colors

The header can display as a transparent overlay on Blog Pages and blog posts:

  • Blog Page - Select Style: Full Bleed
  • Blog post - Select Header: Full Bleed 

Once enabled, new (Overlay) tweaks appear in the Header sections of the Style Editor. These allow you to customize the colors of the header elements displaying over blog post thumbnails. 

Border

Check Show Border to add a border around your site. Tweaks appear to set its Width and Color. On shorter pages, the border color displays below the footer content to the bottom of the browser.

Intro areas

Some pages support a page-specific header area called the "intro." This is a great way to customize individual pages and introduce the page content to your customers.

This is supported on these page types:

  • Album
  • Events
  • Gallery
  • Products

Hover over the area directly above the main content on any of these pages and click Edit to add content to the intro using blocks.

Intros don’t display on Blog Pages, Regular Pages, or individual collection items.

Main content area

Style the main content area of your site with these tweaks in the Style Editor:

  • Set the Site Background color and Side Padding.
  • Use the Margin tweaks in the Main section to adjust the margin between the main content area and the header or footer.
  • Use the Main: Content Fonts and Main: Content Color sections to choose the fonts and colors for your body text and headers. 
Tip: The tweaks for each text type (such as Body Text, Heading 1, and Quote) won’t appear in the Style Editor unless they’re on the page you’re viewing.

Content inset

Farro and Haute support a content inset feature to help your content stand out.

This affects all editable blocks areas, including:

  • Regular Pages
  • Blog posts
  • Intro areas
  • Footer

The content inset adds white space margins on the sides of certain single-column blocks, such as Text Blocks. Mix site-wide blocks, such as Image Blocks, with indented blocks to add visual interest to your layouts. Blocks arranged into multiple columns always display at site width.

For a list of all affected blocks, visit Content inset.

Adjust the column width with the Content Inset tweak. You can further adjust how the inset appears with the Content Width tweak.

The content inset particularly emphasizes any floated blocks on the page.

Banners

Banners appear above individual blog posts.

Share buttons

Share buttons allow visitors to share content to their social profiles in one click. To learn how to choose which buttons display or to hide them all, visit Adding Share buttons.

Farro and Haute have special customizable Share buttons for blog posts and product item pages:

  • Use the Share Buttons section of the Style Editor to adjust their size, spacing, color, and style. Depending on which style you choose, more tweaks will appear to add labels and adjust the button options.
  • Product item share buttons display with the product details, which you can adjust in the Products: Details section. Hide the icons for product items by unchecking Show Share Buttons.
  • Share buttons always display below blog posts.

A Share link with popup Share buttons also appears on the Album Page and Events Page. These Share buttons don’t take on the customized styles.  

Tip: The Pinterest Share button only displays on pages that have thumbnail images

Footer

Customize the footer with any content using blocks. The footer is site-wide, meaning the same footer content displays on all pages. To learn more, visit Editing footers.

Use the Footer and Footer: Content Color sections of the Style Editor to set the footer’s background color, margins, navigation style, line color, and text colors. The footer blocks area follows the content inset.

Footer Navigation displays above the footer blocks area. In the Footer Navigation, folders display as page links instead of a drop-down menu. The folder names don’t display. 

Ajax loading

Ajax (asynchronous JavaScript and XML) is a special method for site loading, which retrieves server data for specific elements without reloading the whole page. This makes content-heavy pages like your Blog Page much faster and more nimble.

To create a seamless browsing experience, we recommend keeping Ajax loading enabled. Occasionally, Ajax may conflict with embedded custom code. If you’re troubleshooting issues with embedded custom code, you can disable Ajax by unchecking Enable Ajax Loading.  

Use the Site: Loading section of the Style Editor to enable Ajax loading and adjust or hide the loading bar that displays while pages load.

Mobile

Because Squarespace templates are built with responsive design, your site adjusts on mobile devices to better fit the format of that device. These templates have mobile-specific tweaks for an extra layer of customization.

Navigation bars

Use the tweaks in the Mobile sections of the Style Editor to style how your header elements (branding, navigation menu, shopping cart, and search icon) display when viewed on a mobile device.

Mobile header elements display in customizable top or bottom navigation bars.

  • You can set the color for each navigation bar and adjust their opacity
  • Choose whether the top bar is fixed at the top or scrolls up with the page with the Fixed Mobile Top tweak. The bottom bar is always fixed.

To add any element to either navigation bar, scroll down to its Mobile section in the Style Editor (for example, Mobile: Branding) and use the Position tweak to adjust where it displays (left, center, right), or to hide it.

  • Each element can have a unique mobile style.
  • You must choose either a site title or logo to display on both desktop and mobile.
  • Social icons and tag lines don’t display on mobile.
  • When tapped, the mobile search icon opens an overlay with a search bar. The search overlay displays over the site background color.
  • The navigation displays in an overlay. The overlay background color is set with the Menu Color tweak in the Mobile Menu: General section.  

Page layout

Note: Unlike some other Squarespace templates, you can’t disable mobile styles for Farro and Haute. This ensures your site always follows best practices and stays mobile-friendly.

Sidebar

These templates don't support a sidebar on any page. For a list of templates with sidebars, visit Editing sidebars.

Next step

Learn how to customize your blog landing page.

Was this article helpful?
1 out of 3 found this helpful
Farro structure and style