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

Some templates share a grid/list style for their Blog Pages. This design gives you two options for displaying your blog posts:

  • Grid - A modern-looking grid of thumbnail 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. 

Supported templates

This Blog Page is available in these template families:

  • Brine
  • Tremont
  • York

All other templates have Blog Pages that are unique to their family. For more help, visit Blog features by template.

Choose a layout

To set all Blog Pages on your site to the grid or list layout:

  1. Go to your Blog Page.
  2. In the Home Menu, click Design, then Site Styles.
  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 thumbnail 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 thumbnail images with Spacing. Set it to 0px to have the thumbnail images touch horizontally.
  • Set the shape of the thumbnail tiles with Aspect Ratio.
  • Hide thumbnail images by unchecking Show Image.
  • Choose how text and thumbnails align with Alignment.

To remove all text from the page and only show thumbnail 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 thumbnail image appear as a blank space. There will be some white space between each row of thumbnail tiles, even if your Spacing is set to 0px.

brine-blog2.png

Style list landing pages

In the list layout, the post thumbnail 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 thumbnail images with the Max Image Width tweak.
  • Set the shape of the thumbnail tiles with Aspect Ratio.
  • Hide thumbnail 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 thumbnails 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, click the gear icon for the Blog Page.
  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 boxes 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 metadata elements 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 metadata element 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. In the Home Menu, click Settings, then click Blogging.
  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 which metadata elements display 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 metadata elements display 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 thumbnail 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, BasilBrinePedro.

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.
Was this article helpful?
33 out of 91 found this helpful
Standard grid/list Blog Pages