How to Create a Sidebar in the Brine Template *updated*

 
 
 
This post has been recently updated!
Check out the details further down

 HEY MY DIYERS!

Brine… oh how I LOVE the Brine template. If you’re thinking “what the hell is she talking about”, I’ll explain a bit further.

Brine is a family of Squarespace templates, that include:

Brine, Aria, Basil, Burke, Cacao, Clay, Ethan, Fairfield, Feed, Foster, Greenwich, Hatch, Heights, Hunter, Hyde, Jaunt, Juke, Keene, Lincoln (discontinued), Maple, Margot, Marta, Mentor, Mercer, Miller, Mojave, Moksha, Motto, Nueva, Polaris, Rally, Rover, Sofia, Sonny, Sonora, Thorne, Wav, and West.

All of these templates, although they may look different on the surface, share the same underlying structure and functionality.

Brine is renowned as the best Squarespace template family because it has so many functions, you can just do SO much with it! Especially compared to a lot of other templates.

Related Post > How to Choose Your Squarespace Template

One thing that the Brine template doesn’t offer is any kind of sidebar. And even though it offers almost everything else, this can still put people off. If you’re planning to produce a lot of Blog content, a sidebar is a great way of keeping people on your website and reading your posts, so understandably, this is a make or break function for some people.

As a Squarespace designer, I’ve been trying to find ways to include a sidebar in Brine, because I really don’t like designing with any other templates.

Of course I’ve googled it many times, and I’ve read a lot about how you can ‘fake’ a sidebar just using blocks. This works really well for your main blog page, but my biggest concern was if I was to put a ‘fake’ sidebar on every single one of my blog posts using blocks, what if I needed to then change something on the sidebar? I would have to go back through 100’s of posts and do it manually? Nuh uh! That’s not happening!

So ideally, I wanted to build my sidebar in one place and if I needed to make a change on it, it would populate throughout my whole site/blog.

IMPORTANT UPDATE SEPTEMBER 2018

This tutorial describes how to create a sidebar by using a Blog and a Summary Block. While that’s an awesome idea, I have more recently stumbled across an incredible sidebar plugin that I’m currently using on my site.

It’s really simple to install, and once installed it’s so easy to use!

It’s such a great solution because it automatically adds the sidebar to ALL of your existing blog posts, meaning you don’t have to go back and update ANY of your posts!

It’s also it controlled through ONE page, so if you want to add or remove or change anything on the sidebar, you can easily just update it on your “SIDEBAR” page and it will populate throughout all of your blog posts.

I’ve used a lot of “fake” sidebars for the Brine Template, and this one is by far the best!

I’ve been using this plugin for around 3 months now and I haven’t had any problems or glitches with it. Also, any questions I had about setting it up were handled quickly by the support team of the plugin developers.

I recommend this sidebar plugin 1000% over the following summary block method!

Get the sidebar plug in HERE!

Original Post Cont.
Blog and Summary Block Method

I’ve figured it out, and I’m going to tell you my secrets!
 

  • First we will need to add a Blog page to the Not Linked section of our website. I’ve named mine Sidebar, for reference.

 
How to Add a Sidebar in Brine Squarespace1.png
 

 

 

  • I’ve roughly designed by sidebar and decided this is what I want it to look like:

 
How-to-Add-a-Sidebar-in-Brine-Squarespace17.png
 

 

  • Now I save all of the images for the side bar individually:

Top Image:

Line break:

How to Add a Sidebar in Brine Squarespace13.png

Buttons:

How to Add a Sidebar in Brine Squarespace14.png
 
  • Now we’re going to add a new Blog Post (in our new Blog) for every image we want in our Sidebar. I have 5 images, so I will be adding 5 new blog posts. Because our sidebar will display the newest post at the top and the oldest at the bottom, first add whatever you want at the bottom of your sidebar. For me this will be:

 
How-to-Optimize-Images-for-Squarespace1.jpg
 

For the next few blog posts we add we don’t need to worry about adding any titles or body text to these blog posts. Everything that we need to create the sidebar will be under the “Options" tab.

How to Add a Sidebar in Brine Squarespace4.png
 
  • For each button, I will upload the thumbnail image and check “Post title should link to URL” and enter a URL above. You can enter your Squarespace Category URL which would be something like https://yourwebsite.com/blog?category=The%20Category%20Name

  • Or you could go ahead and create new pages for your categories so you can add the sidebar to them. Either way, this button will link to whatever you put in the Source URL box.

 
How to Add a Sidebar in Brine Squarespace3.png
 

 

I do this for all 3 of my buttons.

 

  • Still working my way up from the bottom, now I want to put the word “Categories” and the black line.

  • I again create a new blog post for this section.

  • You can see below, I’ve added the black line as a Thumbnail image, and I have added the word Category in the excerpt box. I have styled this, making it a Header 3 and Bold by using the text style tools. I have also added some space above and below it by holding down Shift and clicking Enter and creating a line break.

 
How to Add a Sidebar in Brine Squarespace5.png
 
 
  • Now I want to add the main picture of me and some text. You can see below that I have added the thumbnail image, some formatted text and I have linked my image to the about me page, so if people want to know more, they can click on my image.

 
How to Add a Sidebar in Brine Squarespace6.png
 

 

Now we get to put it all together!

We’re going to use a Summary Block to create our ‘fake’ sidebar, and a Summary Block to create our Blog.

If you’re currently just using a standard Brine blog page, you will have to create a new regular page to make this work, as you can’t add blocks to a standard Blog page.

You can add a Summary Block and choose your Blog. This will show the last 30 Blog posts. You can also filter this by category or tags. If you’re not familiar with using the Summary block for your blog, then head over to this post:

Related Posts > How to Customize Your Blog Design in Squarespace

I go into detail about how you can use the Summary block to replicate your blog and change its layout.

 

Once you have set up your blog, you can add a Summary Block Wall for your Sidebar.

 
How to Add a Sidebar in Brine Squarespace8.png
 


You’ll be able to see your sidebar forming, but you will need to make some adjustments. These adjustments are all up to you, but I will show you my settings:

 
How to Add a Sidebar in Brine Squarespace7.png
How to Add a Sidebar in Brine Squarespace10.png
How to Add a Sidebar in Brine Squarespace9.png
How to Add a Sidebar in Brine Squarespace11.png
 

 

Yay! How cool is that? We’re done! Now you can go ahead and add the Sidebar where ever you want, including all of your Blog Post pages.

I love creating a sidebar this way because if you want to add a button, update a button, change a link, add a new profile picture, you can do it all from one place instead of having to change it on EACH blog post!

 

This is what my final sidebar looks like,:

IMPORTANT TIPS:

TIP: Read my post on totally changing your blog page with Summary Blocks.

TIP: If you want to go back and add anything, it will automatically go to the top of the sidebar and will probably mess up the order of things. The way to correct the order of the blog posts/sidebar is to change all of the Blog Posts to Drafts. Then, go back and Publish them in the order of bottom to top. After you publish them in that order, they will stay there.

TIP: Every thumbnail image will either automatically link back to the blog post, or will link to the Source URL you enter. If you don’t want the image to link anywhere, remember to add # hashtags to the Source URL.

TIP: Remember to format your text in the excerpt with H1, H2, H3, bolds and italics etc.

TIP: You can add this sidebar to any pages you want, including category pages. Just duplicate the page you’ve already set up, then change the Summary Block to filter by Category (enter the category that you want the page to be).

TIP: I like to add a Search Bar to the bottom of my sidebar. You can also add things like Instagram and a Summary Block to display your most popular posts. Add these manually with blocks to the bottom of your sidebar.

TIP: Another way to add a “recent post” or “popular post” to your sidebar is to add it as a section (like we added the other components of the sidebar) and then swap it out whenever you want. You can create a custom thumbnail for it, link back to the post with the Source URL and put some text above it that says “Popular Post”. Once you have set this up you can just go back into the Blog when you want to change it, edit the particular post and change the image and Source URL.

TIP: Avoid putting your sidebar on the left hand side on the blog, and keep it on the right. This is because: if it's on the left hand side of the blog readers on their mobile will have to scroll all the way through your sidebar stuff before they get to the actual post - not ideal!

 

I hope this tutorial was useful, drop me a comment if you have any questions and I would love to help! 

Thanks for reading!
Erica x

 
 

Related Posts

Squarespace TipsErica Hartwick