web design

No Sidebar? No Problem!

How to create a sidebar for your blog on squarespace

Imagine: You’ve selected the template for your dream site. You happen to be a blogger and cannot wait to get all of your amazing pieces out there for the world to see. You’re 20 blog posts deep into your site when you realize you haven’t set up your sidebar yet and you think, sidebar is exactly what I need so everyone can see other blog posts, quick info about me, and my Instagram page. You go into settings and *horrified* find that your template has no sidebar on its blog function. What the heck are you supposed to do now?!

I’m here to tell you to take that panic and throw it to the side because honey, there is a solution (one that doesn’t compromise your template either!)

But first, here’s some helpful information, a list of all template families on Squarespace that include the sidebar function for the blog pages

Squarespace Templates (& families!) with Side Bars on Blog Pages

  1. Avenue

  2. Bedford

  3. Five (& all pages)

  4. Forte

  5. Galapagos

  6. Ishimoto

  7. Montauk

  8. Skye

  9. Wells (& all pages)

  10. Wexley

Whew, now that that’s out of the way, did you see your template or template family up there? If not, like I said, not to worry, I’ve got the solution below! I had a client who transferred her site from Wordpress to Squarespace, and the template we agreed on actually didn’t have a sidebar option for her blog...and she’s a blogger. (Psst…Check her blog out here for some awesome beauty and lifestyle info!)


Luckily, she trusted me to come up with a solution so I did what anyone would do...consulted Squarespace for their help (it’s 100% awesome and free by the way) and I discovered you could actually make a sidebar. So I did, and if I do say so myself, I think it turned out fabulously. Here’s what the final product ended up looking like:

 
Sidebar Final Product Lifestyle of Leslie.png
 

Not too shabby right? I created a few graphics for her, and she had some from her previous site that she wanted implemented and voila! You’d never guess that her site template didn’t have a sidebar feature because it’s on every page.

Alright, so now that you know it’s possible to create a sidebar on your Squarespace site, the last key question we need to ask is, what exactly am I going to put on it?!

Here’s what we did for Leslie:

  • Graphics (from her, and designed by yours truly)

  • A brief welcome to her blog and what her goal of having the blog was for

  • Email Subscription to her awesome newsletter

  • A “Get In Touch” button (actually a graphic!)

  • Her Instagram (she opted for 8 of the latest posts)

  • Recent Blog Posts

By no means do you need to include all of these components on your sidebar, but I’d say they’re pretty standard and have a great way of keeping your visitor engaged on your site and wanting to see more!

How to Create a Sidebar for a Squarespace Template Without One

OKAY. It’s time to get cracking, here’s a step-by-step on how to create a sidebar on your blog post!

Step 1: On your Home Page, go to “Pages”

Step 2: Select “Blog” (if you don’t already have it, click on the “+” button by “Primary Navigation” and click “Blog Page”

Step 3: Hover over your blog post (if you don’t have a blog post yet, click “+” by the gear symbol next to “Blog”

Step 4: You’ll see a blank page, this is where we set up your clean slate. Click to add 4 Spacer blocks and arrange them so that you have two with the smallest spacing on each side. With the two spacer blocks in the middle, arrange it so that one is large enough to be the centerpiece (your main blog content will go below here), and another that is generally about the size of two of the smaller spacer blocks (your sidebar will go here)

Step 5: Add your blog content under the “Centerpiece” spacer block.

Step 6: After determining what fabulous pieces of you and your website that you want to display in your sidebar, it’s time to implement! Simply add content boxes accordingly under the “Sidebar” spacer block until the sidebar you’ve been envisioning comes to life! Take this as an opportunity to be creative - use graphics you’ve designed or had designed for you, your favorite photos, link your Instagram, show other blog posts that need love, are crazy popular, or a combination of both. This sidebar is all you.

 
new sidebar on squarespace template without sidebar .png
 

How to Compress Photos for a Faster Website

Compress Photos to Speed Up Website.jpg

Site a little on the slow end? It could be because your photo size files are too big. The best practice when it comes to photo size on Squarespace is to be a JPEG image that is no more than 500KB in size. Images larger than that can impact the speed of your site and cause site visitors to renege and leave the site before they even see what you offer!

Here’s a quick tutorial on how to compress your photo files if they are greater than 500KB

  • Head to https://www.jpegmini.com/

  • Download the app from the site onto your computer [it will show up as an app]

  • Determine how often you will need this tool -

  • If you are compressing less than 200 photos, I recommend using the trial.

  • If you will be compressing more than 200 photos (say you’re a web designer or photographer), I would recommend purchasing the app to for $89 USD per year giving you unlimited uses.

  • Upload the file(s) you’d like to have compressed by clicking the teal circle with a “+” in it

 
jpegmini add photo to compress.png
 

  • And Compresso! It will automatically compress your photos and save them as the smaller file size, and you can also see how much file space you saved as well:

 
jpeg mini saved space.png
 

  • Upload your new photo to your website!

Remember!

  • Make sure you you have an appropriate filename before uploading the photo to your site per the SEO 101 [link] cheat sheet

  • Megabytes (MB) are larger file sizes than Kilobytes (KB) so you will more than likely be compressing MB files.

For the math impaired (me too, don’t worry!): A kilobyte is 1024 bytes and a megabyte is 1024 kilobytes