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.
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.
Your site header contains three areas: left, center, and right.
The following elements can all display in any area of your header:
- Site title or logo (“branding”)
- Tag line
- Main Navigation
- Secondary Navigation
- Search bar
- Social icons
- Shopping cart
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.
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.
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.
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:
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.
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
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.
The other page types don't support banners, but you can create a banner effect on a Regular Page.
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.
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.
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.
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.
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.
- Blog posts stack vertically.
- Product items display in a grid.
- For more information, visit How will my site appear on a mobile device?
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.
These templates don't support a sidebar on any page. For a list of templates with sidebars, visit Editing sidebars.
Learn how to customize your blog landing page.