10 Easy Steps to Add a Sidebar to a Squarespace Website - With Video Tutorial
While there is much to love about Squarespace 7.1 there is one problem: it doesn’t come with a sidebar option for blogs. I have no idea why Squarespace thinks that blog sidebars are not important. I understand that from a design point of view a single-column blogpost looks sleak and stylish. Yet, there are good reasons why bloggers or business owners still want a sidebar:
1. A sidebar welcomes our readers
My blog is the #1 entry point for my website visitors and I love beeing able to welcome them with a photo and brief intro via the sidebar. This immediately creates a visual and personal connection while providing helpful information about what I do.
2. It helps us grow our mailing list
The sidebar offers an easy place for a newsletter sign-up box which can be very effective for getting more subscribers onto your list!
3. A place to sell our products
The sidebar is a great place to showcase our products, give a brief overview of our services and encourage our readers to check them out.
4. It’s good for SEO!
A sidebar with links to other areas on our website – e.g. popular posts, blog categories, shop, about page, etc. – encourages our readers to stay and browse. Search engines love that and the longer someone spends on our website the better for our SEO.
5. It’s a great place to share news
Because you manage the sidebar in only one place you can easily update it. If you have news, for instance, you just put it into your sidebar and it will be visible on every blog post.
The good news is that SQPlugins created the fabulous Sidebar Plugin!
It’s a very versatile plugin, too, with many styling options and you can have as many different sidebars on as many different pages as you like, this is not just for blogs!
10 Easy Steps
Video Playtime: 10 mins
Disable Ajax in your Site Styles if your template has this, e.g. Brine templates. 7.1 does not have Ajax.
Purchase the plugin (link above the video) and download the zip file.
Open the zip file and save content on your computer.
Click on instructions.html, this opens up a browser window and takes you to a page where you configure and style the sidebar.
Upload the sidebar-plugin.jsandsidebar-plugin.css files to your website. To do this go to your Not-Linked section and add a link and upload the file to this link.
Go to your Not-Linked section and add a page, name it Sidebar. Add the content for your sidebar on this page, i.e. photos, welcome text, an archive or summary block for your course lessons.
Hide the Sidebar page from search engines. Click on the SEO tab in your page settings and check Hide Page from Search Results so that your sidebar page is not indexed by the search engines.
Go back to the instruction windowand add yourSidebar Page URL. This will update the code on the instruction page.
Copy and paste the code into your blog > Page Settings > Advanced > Page Header Code Injection. Save and go to a blog post, you should now see the sidebar!
Customize the sidebar. On the Instructions page you can customize the sidebar, e.g. change the width, padding, background color etc. Once you’ve made the desired changes you simply copy and paste the code into your website custom CSS section (Go to > Design > Custom CSS). And if you are comfortable with CSS you can make further changes right there in your own custom CSS.
Multiple sidebars
If you have more than one blog then you can easily implement different sidebars for each. This is also works with regular pages, the sidebar plugin is not limited to just blogs.
Start by creating a sidebar page for each blog, and use a respective URL slug for each page, e.g. /sidebar-main-blog or /sidebar-blog-2
Then update the code that is injected into the second (or third etc.) blog page header with the URL slug for the respective sidebar page.
Sidebar Plugin Support
For help with the sidebar plugin, please contact SQPlugins Support.
