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

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

  1. Grid - A modern-looking grid of thumbnail images linking to blog posts
  2. Stacked - A classic stacked list of posts, starting with the most recent post

This Blog Page style is available in the following templates:

  • Brine, Clay, Feed, Foster, Greenwich, Hatch, Heights, Hunter, Hyde, Jaunt, Juke, Keene, Marta, Mercer, Mojave, Motto, Nueva, Rally, Rover, Sonora, Thorne
  • Tremont, Carson, Henson
  • York, Artesia, Harris, Lange, Jasper, Shibori

Use this guide to explore the unique features of the grid/stacked Blog Page.

Note: The grid/stacked Blog Page is only available in the templates above. For information about blogging with other templates, see your template's guide.

Before you begin

  • For general information about creating and editing blog posts, visit Blogging with Squarespace.
  • In either grid or stacked format, clicking a post opens the individual post at its own URL.
  • Each template has more style settings that affect how the Blog Page looks. For example, Brine supports a page banner and page header. For more information, see the guide for your template.

Choose a layout

You can set your Blog Page to grid or stacked and switch between the styles any time. This setting applies to all Blog Pages on your site. This means if you have multiple Blog Pages, it isn't possible to use some grid and some stacked. To set all Blog Pages on your site to the grid or stacked layout:

  1. Go to your Blog Page.
  2. From the Home Menu, click Design, then Style Editor.
  3. Scroll down to the Blog: List section.
  4. Select Style: Grid or Style: Stacked.
Tip: To help differentiate multiple blogs, you can choose whether each one displays excerpt text or the full post.

Grid layout

The blog grid is a visually rich landing page that helps visitors browse through your blog posts. In the grid layout, the post's thumbnail image becomes an image tile. The post title and metadata display below. You can display teaser excerpt text or the full post. Clicking the thumbnail tile or post title takes you to the full post.

For best results, we recommend adding thumbnail images to every blog post in the Options section of the Blog Post Editor. If you don’t add a thumbnail image, the post title displays in place of the thumbnail tile.

In the Blog: List section of the Style Editor:

  • Use the Posts Per Row (Max) to set how many posts display in each row.
  • Use the Spacing tweak to adjust space between thumbnail images. Set to 0px to have the thumbnail images touch horizontally.
  • Select an Aspect Ratio to set the shape of the thumbnail tiles. Uncheck Show Image to hide the thumbnail images.
  • Alignment sets the text alignment (left, center, or right).
  • You can choose to add an excerpt or full post text below. 

brine-blog1.png

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

  1. Select Primary: None and Secondary: None in the Blog: Metadata section of the Style Editor.
  2. Uncheck Show Title in the Blog: List section.
  3. If you've enabled excerpts or full posts in the Blog Settings Editor, 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

Stacked layout

The stacked layout offers a more traditional blog design that places emphasis on each blog post's text or content. In the stacked layout, the post thumbnail image displays above the post title. The post title and metadata display below. You can also display teaser excerpt text or the full post content.

brine-blog3.gif

In the Blog: List section of the Style Editor:

  • Set the size of the thumbnail images with the Max Image Width tweak.
  • Select an Aspect Ratio to set the shape of the thumbnail tiles.
  • To hide the thumbnail images and show only the post title and metadata, uncheck Show Image.
  • Add, adjust, or hide the line between posts with the Separator tweaks.
  • The post title displays above the post content. Uncheck Show Title to hide it.
  • Use the Metadata tweak to choose where the metadata displays (above title, below title, or below content).
  • Alignment sets the alignment (left, center, or right) of text and thumbnail images.

Excerpts vs. full posts

Depending on how much content you want to reveal on the main Blog Page, you can also choose to show excerpt text or the full posts.

To display either of these, enable the feature in Blog Settings:

  1. Navigate to the Pages panel
  2. Click the for the Blog Page.
  3. In the Features tab, select either Excerpt or Full.
  4. Click Save.

blog2.png

  1. Once enabled, new tweaks appear in the Blog: List section of the Style Editor. With these tweaks, you can show or hide the full post or excerpt text, or add a Read More link to excerpts. 
  2. Add post content or excerpt text to blog posts.
Note: Even when disabled or hidden, excerpts will still display in Summary Blocks. They may appear in web search results and when posting to social media.

brine-blog5.png

Comments

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

  1. In the Home Menu, click Settings.
  2. Click Blogging.
  3. Click Comments Settings.
  4. Check Enable Comments Globally. More comment settings will appear.

To learn more, visit Managing comments.

Note: You must enable comments globally before enabling comments on an individual blog post.

Metadata

For the Blog Page and individual blog posts, you can display any two of the following metadata:

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

Select which metadata display in the Blog: Metadata section of the Style Editor using the Primary and Secondary tweaks.

  • For the Blog Page, choose where the metadata displays (above title, below title, or below content) with the Metadata tweak in the Blog: List section.
  • For blog posts, choose where the metadata displays (above title or below title) with the Metadata tweak in the Blog: Item section.

brine-blog7.png

Pagination

In the Blog: List section of the Style Editor, use the Show Pagination Label and Show Pagination Arrows tweaks to display navigation arrows and text at the bottom of the Blog Page. When visitors click the navigation, it takes them to the next page of blog posts.

Set how many posts display per page in Blog Settings

brine-blog8.png

Tips: Adapting the blog style to your content

The customizable layout options for this Blog Page makes it a great option for many types of content. 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 Blog Page to put the emphasis on the thumbnail images. This can be useful if you have a photo blog. Learn how in the Grid layout section of this guide. 

brine-blog9.png

Focus on videos

Display full posts in stacked format to create a blog list of Video Blocks.

brine-blog10.gif

Style multiple blogs

Style changes apply to all Blog Pages on your site. However, you can enable excerpts or full posts on different Blog Pages to give each one its own feel.

brine-blog11.gif

Font styles

The tweaks in the Blog: Typography & Colors section of the Style Editor adjust the font and font colors for both the Blog Page and individual blog posts.

  • List Title Font
  • Item Title Font
  • Title Color
  • Meta Font
  • Meta Color
  • Excerpt Font
  • Excerpt Color
  • Read More Link Font
  • Read More Link Color
  • Pagination Label Font
  • Pagination Label Color
  • Pagination Arrow Color  

Styling blog posts

When a visitor clicks on a post within the Blog Page, the individual post opens at its own URL. Use the tweaks in the Blog: Item section of the Style Editor to style your blog posts.

These tweaks affect the layout:

  • Alignment adjusts the alignment (left, center, or right) of the metadata, post title, Share buttons, and comment box.
  • Share Icons adjusts whether the Share buttons and comments button display above or below the post content.
  • Metadata adjusts whether the metadata displays above the title, below the title, or below the post content. Blog posts display the same two metadata options as the Blog Page.

These tweaks affect the navigation elements:

  • Use the Show Pagination tweaks to display arrows, Next and Previous labels, and blog post titles in the navigation.
  • Use the Pagination Meta tweak to add one metadata element for the next and previous posts (category, author, date, location, tags, or comments).
  • Uncheck the Show Pagination tweaks and select Pagination Meta: Hide to remove the navigation elements from blog pages.

Share buttons

Blog posts feature customizable Share buttons.

sharebuttons.png

Mobile

In either layout, Blog Pages and blog posts display in stacked view on smartphones.

brine-blog12.gif

Was this article helpful?
1 out of 2 found this helpful
Grid/stacked Blog Pages