Squarespace is a fabulous drag and drop tool for quickly and easily building gorgeous custom websites!
But if you don’t know the secrets to customizing your site, you might feel a bit limited at times in it’s functionality.
Adding a sidebar is one of those times.
There is no built in way to add and manage sidebar in Squarespace 7.1, and the option only exists in a handful of 7.0 templates.
But that doesn’t mean it’s not possible with a few creative workarounds!
In this tutorial, I’ll be showing you the secret to quickly and easily adding a sidebar to ANY Squarespace site, using the native features that are already built into the platform, and without having to shell out for a sidebar plugin!
Here’s the faux sidebar I created using the steps from the video.
Now, I could have just created a column on the side of the page, and stacked a bunch of individual image blocks and called it a day!
But if I ever wanted to update my content, I’d have to do it on every single page where my sidebar lives.
So I’m going to show you a hack using summary blocks and a fake blog to display your sidebar content.
That way, when you need to swap out content, you only have to do it one time over on your fake blog, and it will update anywhere you’ve used a summary block to display those items.
Here’s those steps…
The first thing we need to do is to round up any content we want to live in our sidebar.
This could be a little bio, buttons, a call to action or CTA to opt in to our freebie, a CTA to follow us on social, whatever!
For example, all the bits of my bio can be on the same graphic, because it will all link to my about page.
But the next element will need to be on its own since it will be linking to a different page.
Your summary block settings are what decide how much space is between elements on the page, but if you need extra white space before or after a specific element, you’ll want to add that in to the graphic itself.
To add our fake blog, just go to Pages > Add Page > Blog.
It doesn’t matter what layout you choose, because thankfully no one will actually ever see this blog page!
Then call it “Sidebar blog”, so we don’t confuse it with our actual blog.
Delete out all the demo posts and create a new post for every element of your sidebar, adding your graphics as the post’s thumbnail image.
Then to link your graphic to the right page, just scroll down to where it says Source URL, type in the URL you want and toggle on the Source URL button.
Hit publish, then rinse and repeat until you have a post for every individual piece of your sidebar!
Pro-tip: your summary block will automatically display the most recently published post first, so think about the order you want them to appear on the page and then work from the bottom up.
First, you’ll need use Spacer Blocks placed side-by-side to create columns on the page. One column for your main page content to live under, and one for your sidebar content to live under.
Add a Summary Block under the right column. (PS. Be sure to choose the wall format!) Then in the settings window, choose your new fake sidebar blog as the content to be displayed in that block.
Go ahead and drag your settings window out of the way of your sidebar.
At first, your sidebar is going to look a bit whack, so we will need to make a few changes to the settings to get it all to fall in line and look like our pretty example!
Head to the Layout Tab of your settings window, then follow these steps:
Set your column width to the max amount:
This makes it so that every graphic takes up the whole width of your summary block, and Squarespace will have no choice but to stack them vertically no matter what screen size your visitor is viewing your site on.
Set the gutter width to whatever you like: this controls the space above and below each element so set it as big or small as you like. Remember, any white space you included in the graphic when you were building it will be extra space on top of what you set as your default gutter width spacing.
Next, let’s head under our Display Tab and do the following:
Set the number of items displayed: this will be based on how many elements you want to appear in your block. So since I prepared 6 separate elements, I set mine to 6.
Hide all additional text & metadata: Go ahead and uncheck all but your thumbnail to be displayed. Then make sure your primary and secondary metadata are both set to none. This is what hides things like the author name, date, tags, categories etc.
There. Things are looking pretty good, right?
All that’s left is to test those links to make sure that each element goes to the correct page!
Now that you’ve done the work of setting up of your fake blog and adding your content as separate posts, you can add your sidebar to any existing page of your site, simply by adding your summary block and tweaking those settings like we did in the example.
But if you want to build a new page and include your side bar, the easiest way to make this happen is to duplicate your page that already has the sidebar set up! Click the Gear Icon beside your page to open up it’s settings, then hit Duplicate.
Then delete out all the other content on the page except for your sidebar.
Name that new page “sidebar to copy” and you now have a template to duplicate every time you go to start a new page build!
The same is true for your actual blog posts (the written content that lives in your real blog)!
If you want a sidebar to appear in every blog post you write, recreate your sidebar in a blank blog post first and leave it as a draft, then use that as a template that you duplicate each time you go to write a new post!
Since all of our sidebar content lives in our fake blog, all we have to do to update our sidebar is to swap out the thumbnail images and source URL’s each post displayed in the summary block!
Add in new posts and hit unpublish on the old ones so you can use them later if needed.
Just remember, the order you publish them in is the order they will appear, so your newest blog post will always appear at the top of your summary blocks.
Any changes you make in your fake block will be instantly updated in every single summary block that displays your sidebar content site wide!