How to Customize Your Blog Design in Squarespace
BY BIG CAT CREATIVE
So, you’re website is all set up and you love it, but you’re not so much loving the design of your blog page. I totally understand! Depending on which template you’ve chosen, the Blog design can be pretty limited, and the last thing you want to do is start all over again with another template.
Don’t worry, there’s an easy way around it, and there’s no coding involved, bonus!
You may have noticed on my website, my main “Blog” page, is divided into categories - this is not the standard Blog page that my template comes with. I’m using the Brine template. Brine actually has quite a good range of Blog page design features (make sure you check your Style Editor when you’re editing your Blog page to see the different tweaks that your template can offer) but it doesn’t have any way to divide them into categories, and is lacking a few other customization features that’d I like, so I’m using this technique.
To completely customize your Blog on Squarespace, beyond what your Style Editor can do, we can use the Summary Block.
The Summary Block pulls the content of your choice—in this case we’re using blog posts—and presents them in different layouts of your choice.
There are 4 Summary Block layouts that you can choose from, and from there you can edit the design of these blocks even further!
You can add the Summary Block anywhere on your website like any regular block. On my website, I have created a completely new standard page for my Blog (not a blog page) and added 4 separate Summary Blocks for the 4 different categories of my blog. This is what it looks like:
I have dragged the original “Blog" page into my "Not Linked" section, and have created this new page, named it ‘Blog’ and put it in my main navigation. You will still create all of your Blog posts on the original “Blog” page (that is now not linked) but your Summary Blocks will pull from this page and display the Blog posts on the new 'Blog' page.
New 'Blog' (standard) page that we will use the Summary blocks on:
Original "Blog" page, now moved to "Not Linked":
Psst, hey you!
Want goodies like this straight to your inbox? Click the link below to sign up and receive updates, discounts and exclusive access to a library full of 100% free design resources!Let's do it!
So, on your new standard page, go ahead and add a Summary Block wherever you like. Under the Summary Block settings: first choose 'Blog' under ‘Content’, edit the design however you like under ‘Layout’ and then under ‘Display’ you can add your Category Filter. Here’s an example of my category filter on my Blog page.
TIP: You can also manually enter multiple categories separated by commas. Don't include a space after the comma: category1,category2,category3.
Another bonus about using the Summary Block is that you can ‘fake’ a sidebar. Create a sidebar with regular blocks and position to one side of the Summary Block. Here’s an example of a website I just completed for PositivelyLost, this is just made out of Summary Blocks (the blog content) and text, image and form blocks for the sidebar!
Ok, so now you know how to use the Summary Block and how useful it can be. But, you may have noticed that the maximum posts you can display is only 30. 30 is OK for some people, but for many of us regular bloggers, 30 just isn’t going to cut it!
It’s OK, I have a way around this too, no coding involved!
Remember how we talked about the Category Filter? Here’s an example of how I use categories to work around the 30 post limit:
When I reach 30 posts for my category ‘Design Tips’, I will create a new category called ‘Design Tips 2’ and categorize my next section of blog posts (31-60). Then I'll head back to my new Blog page and create a new summary block above the original one, and tell it to pull from category ‘Design Tips 2’. Then you use that Category Filter for the next 30 posts, and do it every time you hit 30 posts for that particular category. Easy, right!?
The Summary Blocks display posts in order newest - oldest, so if you put the new ‘Design Tips 2’ Summary Block above the older ‘Design Tips’ Summary Block, then they will be in correct order!
If you want to pull all blogs into your Summary Block and not just specific categories:
You can also do this same technique with tags. This is useful if you’d like to have all of your posts from all categories in a Summary Block, not just separated into categories like mine.
If you want to do this you’ll want to use the same technique but with tags. Tag all of your blog posts from 1-30 as “section 1”, then all of your blog posts from 31-60 as “section 2”, and so on.
Then in your Summary Block that is going to display all of your blog posts, use the Tag Filter. For your first Summary Block (1-30) you would use the “Section 1” tag, then the next Summary Block (31-60) will be the “section 2” tag etc. Leave the category filter blank as this will tell it to pull from all categories.
TIP: You could use both tags and categories to be prepared for any changes on your website. Currently I’m using the category technique, because that’s how I prefer them to be displayed on my blog page. But, I have been tagging my (first 30) blog posts with “Section 1” incase I ever need to display all of my blog posts in a Summary Block (better to do it as you go, rather than have to go back and tag them all at one later!)
I hope you found this useful! If you have any questions feel free to leave them in the comments below, I’d love to hear from you!