How to Craft the Perfect Squarespace Sidebar Including What to Avoid

Squarespace-Sidebar-Design

I recently had a reader reach out to me and request I write a post on tips on how to design a Squarespace sidebar, so I'm making wishes come true today. Although this post is directed towards creating a Squarespace sidebar, you can most definitely put the tips towards your Wordpress sidebar.


Some people choose not to have a sidebar on their blog and that's totally fine, however I personally can't imagine not having one. It's a great place to promote your social media accounts, your courses, your newsletter, etc. You might be thinking, but it's just a sidebar, how much thought could possibly go into putting one together, however, when it comes down to it, you want a sidebar that works for you and your brand.

Let's begin! Below I'll describe what the best things to include in your sidebar are, and even things you should seriously avoid. 

1. YOUR PHOTO

This might seem like an obvious one, and it is, but you want to keep a few things in mind when choosing a photo...

  • Use a photo of you and not a stock photo. It's important to have that personal connection when someone new and old visits your blog. 
  • The photo could be a portrait, or you in your element, whatever best represents you. 
  • Make sure your photo is clear and not dark/grainy. If you have a photo that looks professional people will likely take you more seriously. Thankfully phones these days come with a decent camera so if you don't have the money for headshots, or a fancy camera you can have a friend take some for you on your phone. 
  • Natural light is best. Avoid taking photos between 11am-1pm, that's when the sun is directly overhead. Photos that are taken early in the morning or later in the afternoon/evening have a softer, less harsh appearance. 

ADDING A PHOTO BLOCK TO YOUR SQUARESPACE SIDEBAR

If you are a Squarespace newbie I'll show you how to add a photo to your sidebar.

Insert the photo widget > upload your photo > hide 'caption below' if you dont want anything added right below the photo > hit apply.

Related: How to add content upgrades to your blog using Squarespace and Convertkit

2. A SHORT BIO AND A LEARN MORE BUTTON

Adding a short sentence or two about you and your blog, beneath your photo gives new readers an idea of who you are and what you blog about. It's a friendly, quick introduction and if they want to read more about you they can click the "learn more" button underneath. Just like your photo this adds a nice personal touch and your readers will feel a little more connected to you. 

A few things you can add to your short bio are:

  • Your name, duh!
  • What you blog about 
  • A fun/quirky fact about you

In the screencast below I show you how I added the short bio under my photo as well as the 'learn more' button. 


Insert text widget > enter your bio > hit apply > add button widget > link the button to your about page > hit apply. 

3. Social Icons

Make sure to connect all of your social accounts to your Squarespace site. Follow the instructions below:

Settings > connect accounts > connect the accounts you want to use > hit apply.

Once you have all of your accounts connected you can then go into your sidebar and add your icons where you want them to sit. I like to have mine under my photo and bio because drawing people to my social accounts is important to me. A good tip is to add the icons in order of where you hang out most. So if you are always on Instagram connecting with your followers there add your Instagram icon to the front of the list, and so on.

Related: How to create an accordion menu in Squarespace

4. Newsletter box

If you are blogging with an email list then having your sign up box near the top is a good idea. Squarespace only has a Mailchimp widget at the moment however if you are on Convertkit or any other mail site you can still add a box. Below I will show you have to do it with Mailchimp and Convertkit.

 

To add a newsletter box from Convertkit create a form in Convertkit > go to settings > go to embed > copy the one line Javascript > add a code widget to your Squarespace sidebar > paste the code > hit apply > refresh your page.

Since I don't have Mailchimp I can't show you the full process but it's as simple as adding the 'newsletter' widget to your sidebar and connecting your Mailchimp account. I'll show you how in the screencast below.

Add the newsletter widget to your sidebar > connect your Mailchimp account under 'storage' > hit apply.

5. PROMO BOX or boxes

If you have a course, a really awesome content upgrade, a Facebook community, or anything that will bring in subscribers, having a promo box is a great thing to include in your sidebar. In order to do this I just add an image widget, upload my promo image, and attach the URL that will direct them to the promo. You can follow the same steps where I showed you how to upload your profile photo. 

Below are some examples of my favourite promo boxes from other bloggers.

Melyssa Griffin has this awesome content upgrade promo in her sidebar, along with a few others. It's designed nicely and has a bright, large button telling you how to download it. This is a content upgrade she added to one of her blog posts in the past and because it's so awesome it's a great way to get new subscribers by adding it in her sidebar. 

Kory Woodard promotes her free 7 day brand course with this beautiful image in her sidebar, I mean how could you not want to sign up for this? She keeps her brand on point by using the same style of images and typography she uses everywhere else. 

Lindsay from White Oak Creative has a beautiful sidebar, it's cohesive and everything just fits together so well. As you can see above she has an image on her sidebar promoting her Facebook group. I highly suggest checking out her sidebar for some inspiration.

A few examples of things you can promote are:

  • Courses
  • Workbooks
  • Facebook groups
  • Ebooks
  • Webinars
  • Twitter chats
  • Store items

6. Search Bar

Imagine visiting a blog that has hundreds of posts and no search bar. How in the heck are you supposed to find that one post from months ago without combing through all of their posts? Having a search bar will take a lot of frustration away for your readers and keep them around.

Related: How I took a meh Squarespace template and made it unique

Things your blog sidebar doesn't need

Now that you have a good understanding of what is most important, I've listed a few items your blog can do without. 

1. GRAB MY BLOG BUTTON

I'm totally guilty of this. Back when I had my first blog I had the 'grab my blog button' in my sidebar, but do you think anyone actually added it to their blog? Prooooobly not. Your blog is YOUR blog, don't bother promoting other people's blogs in your sidebar, sure it's a nice thing to do but you don't want to drive traffic away from your blog. 

2. The list of categories that never seems to end

Have you ever visited a blog and their sidebar has a massive long list of their blog categories? Doesn't it make you feel overwhelmed and all 'NOPE!' I'm outta here? First off, you shouldn't have more than 10 categories, even that is a little too much, but if you do then make sure your category list is a drop down menu on your sidebar. It will not only save so much space on your sidebar but it won't overwhelm your ready at first glance. 

3. flashy gifs / videos

By adding things like videos, gifs, or any embedded content it slows down your site loading time. You also don't want to distract readers from your valuable post content. 

4. Widgets galore

This one is directed more towards Wordpress bloggers since you don't have a gazillion options on Squarespace. Again, I'm totally guilty of this, you spend a few minutes searching plugins and before you know it you have 10 installed and your sidebar is widget town, USA. Too many installed widgets slows down your site loading time, and let's be honest you likely aren't even using half of them. 

FINAL THOUGHTS

Make sure your sidebar fits in with your branding. If you check out the bloggers I linked above in number 5 everything they decided to include in their sidebar has purpose, isn't overcrowded with unnecessary items, and the design falls in line with their branding.


Download my free checklist to help you craft your perfect sidebar.