Farro and Haute share the same underlying structure and functionality. This guide applies to both templates.
The Blog Page is the landing page for your blog. Farro and Haute's sophisticated Blog Page features a customizable layout of post thumbnail tiles. Clicking on a blog post’s thumbnail opens the full post with its own URL.
This page describes the special features of the Blog Page. To learn how to style the individual blog posts, visit blog posts.
Tip: To make the most of your Blog Page, add a thumbnail image for each post in the Options section of the blog post editor.
The Blog Page features a grid of post thumbnail tiles. Use the Style Editor to adjust how these thumbnails display.
- 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.
Note: To optimize the display, layouts may look different in narrow browsers.
Margins and spacing
- 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.
Tip: You can set overlay colors for header elements displaying over Full Bleed grids.
Thumbnail tile shape
To set the shape of the thumbnail images, adjust the Aspect Ratio tweak. Image tiles crop around their focal points.
To add background images to the post tiles on the Blog Page, open each blog post editor.
- In the Pages panel, hover over the post and click Edit.
- Add the thumbnail in the Options tab.
Add a color filter to all thumbnail images with the Overlay tweaks. Select Overlay: Fade and choose an Overlay Direction to create an ombre effect on each image.
If a post doesn’t have a thumbnail image, the thumbnail text displays over a background color. Set this color with the Post Background Color tweak in the Style Editor.
The post title, excerpt text, and up to four metadata elements display over the thumbnail tile.
Set the title and excerpt in the blog post editor. Use the Blog: Meta section of the Style Editor to determine which metadata display (category, author, date, location, tags, comments, or none). Clicking on a category, name, or tag takes you to a filtered results page for that element.
Alignment determines the position of the text. Choose from nine position options (top, middle, or bottom, and left, center, or right). Metadata elements always display above and below the post title and excerpt.
You can style the post title, excerpt text, and top and bottom metadata elements independently. Use the Blog: Typography & Colors section of the Style Editor to set the fonts, and adjust the colors with the (Overlay) tweaks.
Note: Changing the color and position of post titles and metadata also affects how they display on blog posts.
Infinite scroll vs Load More button
For your Blog Page, use the Method tweak to choose to load pages with Infinite Scroll or a Load More button.
- 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.
To learn how to style individual blog posts, visit blog posts.