Note: While our most popular guides have been translated into Spanish, some guides are only available in English.
Skye Blog Pages

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.

For general information about adding and managing blog posts, visit Blogging with Squarespace. To learn how to set it as your homepage, visit Setting a homepage.

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. 

Thumbnails

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. 

Thumbnail images

To add thumbnail images to the blog post tiles, open up each blog post’s settings.

  1. In the Pages panel, click the Blog Page you'd like to edit.
  2. Click the post, then click Edit.
  3. Add the thumbnail in the Options tab.

The Image Cropping tweak sets the shape of the thumbnail image.

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.

Layout

Use the Grid Alignment tweaks in the Style Editor to adjust how these thumbnails display.

  • Grid Alignment: Top - Tiles align at the top.
  • Grid Alignment: BaselineIf 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.

  • 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.

Card style

Thumbnail tile text can display over a background color, or “card.” Use the Card Background Color tweak in the Style Editor to adjust the color.

Uncheck Card Style to display the text over the site background color.

Note: These tweaks also apply to Related Posts.

Page loading

In Blog Page Settings, you can set the number of Posts Per Page (up to 20 posts).

In the Style Editor, 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.

Text

Thumbnail tiles display the post’s title and date. You can also display certain metadata and excerpt text.

In the Style Editor, 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.

Next step

Learn how to style individual blog posts.

Was this article helpful?
11 out of 16 found this helpful
Skye Blog Pages