Skye, Foundry, Indigo, Ready, and Tudor share the same underlying structure and functionality. This guide applies to all these templates.
The Blog Page is the landing page for your blog. The sophisticated Blog Page in Skye, Foundry, Indigo, Ready, and Tudor 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 give each thumbnail tile an image, 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. If a post has a thumbnail image, that image displays above the thumbnail tile text.
With thumbnail images
To add thumbnail images to the blog post tiles, open up each blog post’s settings.
- In the Pages panel, click the Blog Page you'd like to edit.
- Click the post, then click Edit.
- Add the thumbnail in the Options tab.
The Image Cropping tweak sets the shape of the all thumbnail images. There are four options:
- Horizontal - An aspect ratio of 4:3
- Vertical - An aspect ratio of 3:4
- None - Each thumbnail keeps its original aspect ratio
Use the Overlay Color tweak to add a color filter and adjust its opacity. Use the Reverse Overlay tweak to determine if the color shows only on hover, or at all times except on hover.
Check Grayscale Images to display all thumbnail images in black and white. Your Overlay Color displays over the black and white thumbnail. In Internet Explorer and Edge 20, thumbnail images always display in color.
Use the Inset Images tweak to add white space around the thumbnail image.
Without thumbnail images
If a post doesn’t have a thumbnail image, only the text displays. Remove all thumbnail images to create a text-focused aesthetic.
Tip: Use the List Title Size No Image tweaks to adjust the title size for tiles without thumbnail images.
Use the Grid Alignment tweaks in Site Styles to adjust how these thumbnails display.
- Grid Alignment: Top - Tiles align at the top.
- Grid Alignment: Baseline - If there are thumbnail images, tiles align at the bottom of the thumbnail image.
- Grid Alignment: Masonry - Positions items in the best layout based on the available space while reducing any gaps, giving it the look of a mosaic. Thumbnail images can’t be set to the same size with this tweak. Thumbnails may appear out of chronological order to ensure the best fit.
- Use the Container Max Width to set the width of the container the post tiles display within.
- Minimum Column Width sets the minimum width of each column, which helps determine how many post tiles display per row.
- Maximum Number of Columns sets the maximum number of columns that can display on the page. In narrower browsers, fewer columns may appear. This tweak affects the size of the post thumbnails.
Thumbnail tile text can display over a background color, or “card.” Use the Card Background Color tweak in Site Styles to adjust the color.
Uncheck Card Style to display the text over the site background color.
Note: These tweaks also apply to Related Posts.
In Blog Page settings, you can set the number of Posts Per Page (up to 20 posts).
In Site Styles, use the Infinite Scroll tweak to choose whether to load pages with Infinite Scroll or a Load More button.
- If Infinite Scroll is checked, additional posts load every time a visitor reaches the bottom of the page.
- If Infinite Scroll is unchecked, the posts will appear in the grid with a Load More link below. Each time a visitor clicks Load More, the same number of posts will be added to the grid. The Load More link remains at the bottom until all posts have loaded. It inherits the List Title font styles and Body Link Color.
Thumbnail tiles display the post’s title and date. You can also display certain metadata and excerpt text.
In Site Styles, use the Text Alignment, Promoted Meta (author name or categories), and Date Style tweaks to determine what text displays, and where. You can select hide the divider line, and choose a style and color for the date.
Note: These tweaks also apply to individual blog posts.
If you choose Date Style: Callout or Callout Circle, the text auto-adjusts to either black or white, depending on the color of the callout.
Adjust the post title size with the following tweaks. Min tweaks set the minimum size for headers and titles, to control how they display with responsive design.
- List Title
- List Title Min
No Image tweaks affect tiles without thumbnail images:
- List Title Size No Image
- List Title Size No Image Min
Add extra text to your blog post tiles by enabling excerpts. Check the Show Excerpt on Blog List tweak. Adjust the text with the Excerpt tweak. To learn how to add excerpt text to any blog post, visit Using blog excerpts.
Learn how to style individual blog posts.