Farro and Haute share the same underlying structure and functionality. This guide applies to both templates.
Farro and Haute blog posts offer a variety of eye-catching features. Author profiles, Related Posts, a progress indicator, and customizable Share buttons engage your readers and help your content shine.
When a visitor clicks on a thumbnail tile in the Blog Page, the full post opens with its own URL. For general information about adding and managing blog posts, visit Blogging with Squarespace.
This page describes the special features of Farro and Haute blog posts. For information about styling the Blog Page thumbnail grid, visit Blog Pages.
Tip: To see most of the Style Editor tweaks mentioned on this page, open an individual blog post, not the blog landing page.
Title and metadata
The post title displays at the top of blog posts, along with up to four metadata elements (categories, author, date, location, tags, or comments).
Adjust how they display with the Style Editor.
- Blog: Typography section - Adjust the font style and size.
- Blog: Colors section - Adjust the colors.
- Blog: Meta section - Choose which meta elements display.
Use the (Overlay) tweaks to set the colors for the post title and metadata when displaying over a banner.
Note: Changing the color and position of post titles and metadata affects how they display in the blog grid.
The post title and metadata at the top of blog posts can display within a banner. If your post has a thumbnail image, it displays as the banner’s background image. If your post doesn’t have a thumbnail image, it displays the Post Background Color instead.
Use the Style Editor to adjust the banner’s display:
- 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.
Tip: You can set overlay colors for header elements displaying over Full Bleed banners.
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 the Style Editor to enable or disable this feature, and to set its style.
In blog posts, author profiles can display each author's name, avatar image, and bio. Author profiles display below the page content.
Adjust the style with the tweaks in the Blog: Item section of the Style Editor. Use the Show Author Profile tweak to enable or disable the author profile.
Click the author name in the blog post metadata to view a filtered results page for that author’s posts.
Farro and Haute's customizable Share buttons display below the author profile. Style them with the Share Buttons section of the Style Editor. Uncheck Show Share Buttons to hide them.
Blog posts follow the content inset formatting for certain single-column blocks.
Once enabled, two posts display in thumbnails at the bottom of the page, along with their titles, excerpts, and metadata.
Use the tweaks in the Blog Item: Related Posts section of the Style Editor to adjust or hide the Related Posts label, and to choose whether the posts display at site width or browser width.
Next and Previous navigation
Use the Blog Item: Pagination section of the Style Editor to adjust the navigation arrows that encourage visitors to click through to the next or previous post. Navigation arrows display the post title and one metadata element.
- 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 display on the page below the post content.
- Pagination: Hide - No navigation arrows.
Use the Meta tweak to choose the metadata element.