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

This guide explains questions and issues that may come up when using templates in the Farro family (Farro, Haute).

Tip: For general help, see the Farro template guide.

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, tag line, social icons, search bar, and shopping cart).

  1. In the Home Menu, click Design, then click Site Styles.
  2. Scroll down to the Header: Layout section.
  3. Use Position tweaks to determine where each element displays, or to hide them.
  4. Use Layout tweaks to set each of the three header areas to display horizontally or stacked.

Header overlaps blog post

If your Blog Page or blog posts are set to Full Bleed and your Blog: Design Alignment tweak 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 - In Blog: List, choose any Style tweak except Full Bleed.
  • Blog post style - In Blog: Item, choose any Header tweak except Full Bleed.
  • Text layout - In Blog: Design, choose any Alignment: Medium or Alignment: Bottom tweak.
  • Header layout - In Header: Layout, move the header elements. For example, if post titles and metadata display on the left, move your header elements to the right.

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:

  1. In the Home Menu, click Design, then click Site Styles.
  2. Scroll down to Site: Loading.
  3. 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 Style: Full Bleed in Blog: List.
  • Blog post - Select Header: Full Bleed in Blog: Item.
Tip: Use (Overlay) tweaks in the Header sections of Site Styles to set the header elements' colors.

farro-transparent-header.gif

What are the layout options for blog landing pages?

Change the appearance of your landing page with Layout and Style in the Blog: List section of Site Styles.

Layout options:

  • 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 options:

  • 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 Header in 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.
Was this article helpful?
0 out of 9 found this helpful
Farro troubleshooting and tips