Squarespace hack: how to design a completely custom blog page layout (7.1)
Prefer to watch?
Here’s the step-by-step video!
Rather read all about it?
Here are those steps written down...
Wondering how to get your blog page looking a little more on-brand?
If you’ve been feeling limited by Squarespace’s built-in blog page options, then stay tuned, because in this tutorial I’ll be sharing a super simple hack for designing a brand new, completely custom and on-brand blog page for your Squarespace site!
(As well as a few tips and ideas for what to include besides just your blog post preview content!)
Alright so in the first video in this little Squarespace 7.1 blog series we got our blog added to our site, and our first few blog posts prepped and ready to go.
In the second video, we talked about your options for editing your built-in blog page.
But we really haven’t touched on what else needs to live on your blog page, or the secrets to customizing it to fit better with the other pages you’ve built on your site!
First, decide if the built-in blog page works for you
Squarespace wanted to make it super simple for you to display all your content, without having to manually add a block to a page every time a new post is published.
But when it comes to your built-in blog section, you aren’t able to drag, drop, add, or remove content like you are on a normal page.
So while you can stick as many sections and blocks above and below your blog section as you want, this section is only ever going to display your blog post preview content in the order it was published.
You aren’t able to organize it into categories if you blog about more than just one thing, and there’s also a limit to how many previews will automatically display on your built in page, so if you’re like me and have hundreds of blog posts, your visitor will have to hit “older” to be able to scroll through past content.
This means visitors may never see some of your best content!
So if you only plan to blog about one thing, and only plan to have a handful of posts, or you just want Squarespace to do it’s thing and be one less thing for you to manage, then the built in blog page is for you.
But if you want more control over how your blog posts preview content is displayed and organized, and you want to be able to put as much content on the page as you please, then this hack is for you.
Creating a completely custom blog page layout in Squarespace
Step 1
Add a new blank page
For this handy little workaround, we are actually going to add in a new blank page, and title it ‘blog.’
You can rename your actual built in blog page ‘old blog layout’ if that helps you keep from getting the two mixed up.
This old blog layout is going to get dragged and dropped into your unlinked section, because we still want to be able to use all it’s content, we just don’t want it appearing as our blog page in our main navigation anymore!
Your new blog page will be what lives in your main navigation and what visitors see when they visit your blog instead!
So once you’re done building it, don’t forget to drag and drop it into the main navigation section of your pages panel!
Step 3
Add in your blog post preview content using summary blocks
The next thing we have to do is add in our blog post preview content.
We are going to do this by using summary blocks, and having those summary blocks pull content from our actual blog.
So add in your summary block. It doesn’t matter which layout you choose, because this can be edited once added.
Then, select the blog you want to display content from.
Head under the layout tab, and play around with the layouts and their spacing and text settings until you are liking the overall look of your blog summary section.
P.S you can choose to delete out the summary block header and add in your own styled section header using a regular text block instead to keep things looking more on brand.
Step 4
Styling your blog summary block and organizing posts into categories
Then, I’m going to head under the display tab.
This is where the magic happens.
So, say I want my new blog page to be organized into different categories.
So for my little pretend home & lifestyle blog, I want a carousel that shows off recent blog posts from my ‘cleaning tips’ category.
In order to be able to display those posts in the summary block, I would have already needed to add that category to the individual post, like we did in the first video in this series.
So you can play around with how many posts you want displayed, and what of your post preview text and metadata you want shown, but in order to only display certain posts, I’d have to scroll down to the bottom of the display tab and start typing in a specific category or tag, (or both, if I wanted to get really specific with what I’m displaying.)
Once you have your first section looking the way you’d like it to, rather than having to add in a new section and summary block, and go through all those steps to tweak it’s settings, just duplicate your section, and change the filters (categories and tags) for which which group of posts to display.
Then pop in your text block to create your section header, and whatever other content you want to live in that section.
So that is how you would organize your blog page into categories.
Pro-tip: If you are wondering why a post isn’t showing up in a summary block where it’s supposed to, it’s probably because that post hasn’t been properly categorized and therefore does not match the filter settings of your summary block!
It’s best practice to tag and categories your blog post as you create them, so that you aren’t having to go back and organize hundreds of posts down the road.
Organizing your content by month instead of categories
Another way to customize your blog page is to organize your post thumbnails by month.
This is similar to how the built-in blog page does things, only you can have fancy titles or headers to break up the sections, and you aren’t limited to how many can appear on one page.
To do this, you’d want to make sure that your blog posts are tagged by month and year.
Then just apply a new month’s tag to each blog summary block you add to your page.
Heads up! Unlike organizing into categories, this method does require you to pop back in for a little blog page maintenance at the start of each month.
I usually just set a task for the 1st of every month, to go in, duplicate my section, add my new month in the header and change the display settings to match that new month.
Adding additional content to your blog page
Okie dokes, now that you know how to use summary blocks to display your blog post content, there’s no end to how you can customize your blog page.
This is just like any other page on your site, so you can add in whatever content and in whatever order you please, and even use the section settings within each section to style your content.
If you need help with learning to add and style content on your site, I highly recommend you check out these tutorials:
Squarespace tutorial: a guide to using the new style editor (7.1) PT 1
Squarespace tutorial: a guide to using the new style editor (7.1) PT 2
What type of content should I include on my blog page beside blog posts?
When it comes to what else to include on your blog page besides just your blog post previews, here’s just a few ideas:
Banner image & intro
This could be the first page visitors land on when they visit your site, so if it’s their first time, you want to use this opportunity to create some brand recognition! So go ahead and introduce yourself.
Clickable categories or blog specific navigation
If you’ve chosen to organize by date published, rather than by categories, your visitors would probably still appreciate if you showed them around a bit!
To create a sort of faux navigation bar at the top of your blog page, just add in a text block, type out your category name, hit that link button to start linking that bit of text, open up the little gear icon, and head under the page tab.
Then, search for your blog page…
Add in the category you are making the link for, and voila!
When someone opens that link in your faux blog category navigation bar, they will now be taken straight to a page full of posts in that category.
Opt-ins & CTA’s
Chances are your blog is more than just a hobby, and if you’re going to put so much effort into creating all this fabulous content on the regular, then you are going to want a way to stay in touch with those people who may just be interested in your paid offerings down the road.
The best way to do this is to include clear calls-to-action (CTAs) throughout your blog page inviting them to download your freebie, register for your free training, or even an invitation to work with you or shop your online store.
Blog Sidebar
Your CTAs or blog categories can be their own sections as they scroll down the page, or even in a handy little sidebar.
It’s also a great place to include a little bio.
If you need help creating a sidebar for your blog page, or any page on your Squarespace site, without having to pay for a fancy plugin, you’ll want to check out this video next. 👇
How to add a sidebar to your site without paying for a plugin (7.1)
A featured or “trending” post
If you have one particular post that tends to do really well, and is a source of lots of email opt-in leads, you may want to consider giving it it’s own section somewhere on the page! It’s super helpful if someone if new to your business and doesn’t know where to start, and also the easiest way to get readers hooked on your content.
Coming up with creative blog design ideas for your Squarespace site
Need a little inspiration when it comes to the look and layout of your blog?
Check out this post, where I’ve rounded up the best Squarespace template inspiration and example sites just for bloggers!
You’ll Also Love...
50 example Squarespace websites built by Square Secrets course students
20 best example Squarespace websites • small business edition
20+ best example Squarespace websites • web designer edition
15 best example Squarespace websites • health & wellness edition
15 best example Squarespace websites • coaches & consultants edition
