Standard grid/list blog pages in version 7.0

Select a layout for your blog landing page and posts.

Last updated March 7, 2023

In version 7.0, the Brine, Tremont, and York template families share the same blog page. This design gives you two options for displaying your blog posts:

  • Grid - A modern-looking grid of featured images linking to blog posts
  • List - A classic stacked list of posts, starting with the most recent post

Use this guide to explore the unique features of the standard grid/list blog page.

Accessing this feature

This guide is for version 7.0 templates. To learn about blog pages in version 7.1, visit Collection page sections. For any other template in version 7.0, visit your template's guide.

Choose a layout

To set all blog pages on your site to the grid or list layout:

  1. Go to your blog page.
  2. Open the Site Styles panel.
  3. Scroll down to the Blog: List section.
  4. Select Style: Grid for the grid layout or Style: Stacked for the list layout.

Style grid landing pages

In the grid layout, post featured images create image tiles. Post titles and metadata display below.

In the Blog: List section of site styles:

  • Set the number of posts with Posts Per Row (Max).
  • Change the space between featured images with Spacing. Set it to 0px to have the featured images touch horizontally.
  • Set the shape of the featured image tiles with Aspect Ratio.
  • Hide featured images by unchecking Show Image.
  • Choose how text and featured images align with Alignment.

To remove all text from the page and only show featured images:

  1. Select Primary: None and Secondary: None in the Blog: Metadata section.
  2. Uncheck Show Title in the Blog: List section.
  3. If you've enabled excerpts or full posts, uncheck Show Excerpt or Show Post Body.

Tiles with no featured image appear as a blank space. There will be some white space between each row of featured image tiles, even if your Spacing is set to 0px.

brine-blog2.png

Style list landing pages

In the list layout, the post featured image displays above the post title. The post title and metadata display below.

In the Blog: List section of site styles:

  • Set the size of the featured images with the Max Image Width tweak.
  • Set the shape of the featured image tiles with Aspect Ratio.
  • Hide featured images by unchecking Show Image.
  • Style or hide the line between posts with the Separator tweaks.
  • Hide post titles by unchecking Show Title.
  • Choose where metadata displays with Metadata.
  • Choose how text and featured images align with Alignment.

Add excerpts or full posts to landing pages

Depending on how much content you want to have on the blog landing page, you can also include excerpts or the full posts.

Enable either option in blog settings:

  1. In the Pages panel, hover over the blog page and click the gear icon.
  2. In the Advanced tab, select either Excerpt or Full.
  3. Click Save.
  4. New tweaks appear in the Blog: List section of site styles. With these tweaks, you can show or hide the full post or excerpt text, or add a Read More link to excerpts.
  5. Add post content or excerpt text to blog posts.

Note

Even when hidden here, excerpts may still display in summary blocks, search engine results, and social media posts.

Style blog posts

Use the tweaks in the Blog: Item section of site styles to style your blog posts.

To style the layout:

  • Set the alignment of metadata, post titles, Share buttons, and comment fields with Alignment.
  • Choose if share and comment buttons display above or below post content with Share Icons.
  • Choose where metadata displays with Metadata. Blog posts display the same two types of metadata as the landing page.

To style the navigation elements:

  • Display arrows, Next and Previous labels, and blog post titles with the Show Pagination tweaks.
  • Add one type of metadata with Pagination Meta.
  • To hide the navigation elements, uncheck the Show Pagination tweaks and select Pagination Meta: Hide.

Enable comments

Comments are disabled by default in these templates. To enable them:

  1. Open the Blog preferences panel.
  2. Click Comments Settings.
  3. Check Enable Comments Globally. More comment settings will appear.

To learn more, visit Managing comments and Simple Likes.

Note

You must enable comments globally before enabling comments on individual posts.

Metadata

For the blog page and individual blog posts, choose what metadata displays in the Blog: Metadata section of site styles using the Primary and Secondary tweaks. You can choose any two of the following:

  • Category
  • Author
  • Date Posted
  • Location
  • Tags
  • Comments

Choose where they display with the Metadata tweaks in the Blog: List and Blog: Item sections.

To ensure all metadata displays on one row, change the Meta Font size or the elements' length (for example, reduce the number of tags per post).

Landing page pagination

Style the navigation arrows or text at the bottom of blog landing pages with the Show Pagination Label and Show Pagination Arrows tweaks in the Blog: List section.

Set how many posts display per page in blog settings.

Tips and examples

The best way to figure out what works for you is to experiment with the options above. Here are a few suggestions to get you started:

  • Focus on images - Remove some or all text from the grid layout to put the emphasis on the featured images. This can be useful if you have a photo blog.
  • Focus on videos - Display full posts in list format to create a blog list of video blocks.
  • Style multiple blogs - Enable excerpts or full posts on different blog pages to give each one its own feel.

Visit these demo sites to see the page styled in different ways: Aria, Basil, Brine, Pedro.

More help

  • You can change the font and colors of the text in the Blog: Typography & Colors section of Site Styles.
  • Blog posts feature customizable Share buttons.
  • In either layout, blog pages and blog posts display in stacked view on smartphones.
  • Each template has more style settings that affect how the blog page looks. For example, Brine has page headers and banners. For more information, see your template's guide.
  • For general help adding blog pages and posts, visit Blogging with Squarespace.
Footer Image
  • Get help from our community

  • Get help from our community on advanced customizations.

  • Hire a Squarespace Expert

  • Stand out online with the help of an experienced designer or developer.

Standard grid/list blog pages in version 7.0