Everything You Need to Know About the Squarespace Sidebar Plugin
Without a doubt, the Brine template family is the best foundation on which to build your Squarespace site. It’s by far the most flexible and is preferred by most Squarespace designers (myself included).
The problem is that Brine doesn’t have a blog sidebar. The Squarespace Sidebar Plugin is the perfect solution if you don’t want to sacrifice the flexibility of Brine. It’s by far the easiest way to add a sidebar to a Brine family Squarespace blog (or any Squarespace template for that matter). In fact, the Squarespace Sidebar Plugin is so flexible, it beats out the blog sidebar that’s built into the Bedford Squarespace template.
Disclosure: This post contains affiliate links. When you click on an affiliate link and make a purchase, I receive a small commission (at no additional cost to you). Affiliate links are marked with an asterisk (*).
Here are just a few of the ways you can customize the Squarespace Sidebar Plugin*:
You can add a sidebar to any type of page on your website.
You’re not confined to adding a sidebar to your blog. You can add one to a gallery page, index page, shop, or just about any other page on your website. I want blog visitors to read undistracted but I also want to have navigation options on my main blog page. So I added the sidebar plugin to that page while excluding my blog posts.
You can choose the exact width of your sidebar.
You can make your sidebar any width you want, down to the pixel. You can even set a different width for desktop and mobile devices. Generally, I recommend disabling the sidebar completely on mobile devices, which brings me to my next point.
You can disable the sidebar on mobile devices.
Having a sidebar doesn’t look great on mobile devices. It’s either going to squish your content into two tiny columns or get tucked under your main content area where no one sees it anyway. You can make the sidebar disappear at any mobile breakpoint you choose. (I have mine set to 1000px.)
You can control virtually every style setting imaginable.
Here’s a complete list of the other style settings you can control without writing a single line of code:
Sidebar position (right or left).
Whether or not to make your sidebar sticky when scrolling.
If you opt for a sticky sidebar, how much space you want between the sidebar and the top of the page.
Margin, padding, and gap (how much space you want between your sidebar and everything else).
The width and color of the divider that separates your sidebar from your content. Set it to zero if you don’t want a divider at all.
Border width, color, and radius. (Use these settings if you want your sidebar to be completely enclosed on all sides. The radius setting controls whether the corners of the border are sharp or rounded.)
Background color.
You can even add a shadow to your sidebar!
Here’s what the style settings look like:
The Squarespace Sidebar Plugin creates a page where you’ll add all your sidebar content. You can add any block you would add to a page–gallery, summary block, newsletter subscription form, Instagram widget, you name it.
The plugin isn’t exactly simple to install (no Squarespace plugin is) but it comes with super detailed step-by-step instructions. Even if you’re not that tech-savvy, it’s doable.
As a Squarespace web designer, I’m always looking for ways to do my job better and make it easier. And as far as I’m concerned, the Squarespace Sidebar Plugin is a huge boon. It makes installing a blog sidebar in Brine fast, easy, and affordable.
Have a question, comment, or want to request a specific tutorial? Leave a comment below!
