How to change your Squarespace blog layout & design

 

Hate your Squarespace templates blog layout? No worries! We’re able to completely change the blog layout and design, no code involved. This takes a few minutes to set up in the beginning, and then in the future involved 5 seconds per post to keep it working.

We’ll be using the Squarespace summary block along with blog post tags to completely restyle the blog layout to your preferences.

Here’s two examples of a couple layouts you can master.

 

The Grid layout

The List layout

 

The exact size of the images, text, and arrangement of information may all be adjusted to your preferences.

First I’ll explain how this works so you truly understand what you’re doing, and then take you through the steps to set it up.

 

A Squarespace summary block pulls content from a blog page, events page, gallery page, etc. You can insert a summary block anywhere on your website and tell the summary block to pull all of the content from your blog. 

The summary block has many more styling and layout options than the traditional blog layout that is set to your template.

The one issue Squarespace users run into however is that a summary block can only contain 30 items. So what do you do after you’ve written more than 30 posts?

No worries, I have your solution!

You can also tell a summary block not to pull all of your blog content, but a specific section of content. Tags and categories are a way of dividing up your content into specific themes or sections. 

We’re going to use a summary block in combination with tags together to display ALL of our blog content.

We’ll name all our content into sections, each section will have 30 posts (the max the summary block will accept). Then, when we pass 30 posts, from post 31 - 60, we’ll tag them into our second section.

Here’s the steps.

  • Write your blog posts as normal.
  • In the lower left hand corner click the plus button beside the tags. This tag can be whatever you want, but for the purpose of our example we’ll tag this post ‘first section’. You’ll continue to tag the next 29 posts with ’first section’.
  • When you get to post 31, you’ll name it ‘second section,’ etc. This process just repeats itself.

Next we'll style the summary block/new blog page.

  • We’ll drag our blog page (with the little 'a' icon) into the not linked section. We’ll still continue to write posts here, but it will remain in the not linked section as we’re not in love with the layout of the page. No visitors will ever see this page.
  • Next, we’ll add a new page. Name it whatever you want, I named mine in the example New Blog.
  • In your 'New Blog' page, hover over the content area, click ‘edit’.
  • Hover your mouse over the left hand side of the page and click one of the grey insert points that appear.
  • Select a summary block. (You may choose any summary block layout you prefer.)
  • In the summary block editor, select your ‘blog,’ as this is where we want to pull the content from.

 

  • Then in the design tab set your layout preferences. No idea what to set? Play with all of the options and watch the page layout update live as you do.
  • In the tags area, type in the ‘first section’ tag.

All of your posts tagged with ‘first section’ will appear.

Click save.

As you write new posts and tag them with ‘first section’ they will automatically appear in the summary block on the 'New Blog' page.

Once you’ve written 30 posts, we need to add another summary block. Again, click an insert point on the 'New Blog' page, select a summary block and set the layout options to be the same as the previous one.

In this tag area type in ‘second section’. Now as you tag posts 31- 60 with ‘section section’ they will appear here.

It’s as easy as that! Continue tagging posts by sections of 30, and inserting summary blocks, styled all the same way to your fake blog page. 

Related posts: