Why You Should Have A Squarespace Sidebar + How To Build One (Video Tutorial)


Sidebars in Squarespace are one of the most demanded design features. No seriously...if you Google “Squarespace templates with…” the top suggestion is “...sidebar”! Having a sidebar on a page of your website or your blog has tons of benefits that everyone wants, but not all of Squarespace’s templates give you the option for a sidebar. For a full list of templates that already have built-in sidebars, click here.

If they won’t give it to us on all of them, we’re going to figure out a way to create it! And we did.

We’re going to dive in to all the benefits of having a sidebar, important information to include, and how to build your own sidebar if your template doesn’t have one (believe us, it’s not hard)!

 
 
Why You Should Have A Squarespace Sidebar + How To Build One (Video Tutorial)
 
 

Before we get in to how you build a sidebar, let’s talk about the ways to use a sidebar to enhance your page or blog with one!


Draw attention

The best benefit of having a sidebar on a particular page or your blog, is that it immediately draws attention to whatever is on it. We always recommend having a picture of you or your team as on of the first items in a sidebar to give a friendly and personal feel!


Important information

Since sidebars are a great way to draw attention, it goes without saying that including important information in the sidebar is well, important. This is a great place to put links to other important pages you’d like your audience to land, your bio/brand description, how they can contact you, your social links, etc!


Call to actions

Another great way to utilize your sidebar is to put your call to actions there! Users are more likely to see the content within a sidebar and are much more likely to interact with it, so this is a great place to put a mini call to action with a button or link!


Subscriptions

If you collect emails for your blog/newsletter, putting your little subscription box and freebie (if you have one) right in the sidebar is a great way to collect them! Most websites only have their opt-in form in one area of their website, but the sidebar allows them to offer their opt-in on every blog post!


Take a look at some examples!

 

As you can see, these are screenshots from sidebars Nicole and Katelyn had on their old websites!

Neither is better than the other, and neither is incorrect. The beauty about this is that you can customize it to fit the needs of YOUR business. You can determine how much content your audience sees, where they go next, what you most want them to click on, etc!

Sidebar Example from Cole & Co Design
 
screencapture-katelynbuchwald-blog-2018-11-14-12_21_16.png
 




How do I build one for myself?

In this video tutorial, Katelyn walks you through how to build a sidebar in Squarespace using a live example. You can also follow along using the step-by-step directions below!


 
 

Step one:

We always recommend drawing out how you want your sidebar to look and what content you want displayed before you go in to Squarespace and start creating it. This will save you the time and frustration from moving element blocks around and deleting them.

Step two:

Add a spacer. Click to add a spacer, but rather than just clicking on it drag the element to the right (or left) of the page and drop the spacer when the black line fills the content of the page. It should then move all the content to the left.

Step three:

Repeat that step with your first piece of content. If you want the first thing on your sidebar to be a picture, drag the picture element and drop it when the black line is touching ONLY the spacer block, not the entire page.

Step four:

Begin adding your content. You can add your text, important links, buttons, subscriptions boxes, pictures, all the things!

Step five:

Once your content is ready, we need to adjust the size of the spacer bar in order to optimize the page so the sidebar looks right. First, drag the right side of the spacer block to the right to reduce the size of your new sidebar’s (yay!) content. Then, repeat this step by dragging the left side of the spacer block to the right, expanding the actual page or blog content.

Step six:

Press save and celebrate! No switching templates, no crazy code, just another sweet trick the spacer block allows us to do!

Have questions? Comment below and we will help you!

 


xox, katelyn & nicole

Meet the team →