2.8 Sidebar Plugin


 

A great option for Templates without sidebars!

 

Many of Squarespace’s newer template families, like Brine, have so many great features but they do not have a sidebar. Thankfully, there is a great solution: The Sidebar Plugin! This plugin was developed by sqspthemes.com and comes with two licenses, well worth the investment:

  1. Standard for single website use $50

  2. Professional for multi-site use $120

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. If you decide to purchase the plugin please use code KMSS15 to get 15% OFF. Please note that this is an affiliate link:


Step-by-Step Instructions


  1. Disable Ajax in your Style Editor. This is not mentioned in the video but very important!

  2. Purchase the plugin and download the zip file.

  3. Open the zip file and save content on your computer.

  4. Click on instructions.html, this opens up a brower window and takes you to a page where you configure and style the sidebar.

  5. Upload the sidebar-plugin.js and sidebar-plugin.css files to your website.

  6. Go to your Not-Linked section and add a page, name it 'Sidebar' or 'E-Course Sidebar' - whatever makes it easy for you to identify it. Add the content for your sidebar on this page, i.e. photos, welcome text, an archive or summary block for your course lessons.

  7. Go back to the instruction window and configure the sidebar code with your side page URL and any other settings as desired.

  8. Copy and paste this code into your e-course blog settings > Advanced > Page Header Code Injection.

  9. Save your blog settings and go to a lesson in your e-course blog, you should now see the sidebar in your blog post lesson.

  10. IMPORTANT! This is not mentioned in the video! Click on the SEO tab in your page settings and check “Hide this page from search engine results” so that your sidebar page is not indexed by the search engines.

 
Blog SEO Hide 2.png
 

Customize the sidebar

On the instructions page you can also customize your sidebar, i.e. add a background or border, increase the gap between sidebar and blog post, add padding etc. If you do this you need to download a new sidebar-plugin.css file and replace the old one on your website with the new one. Make sure you retain the same file name. This is explained in more detail on the instructions page and also in the video. 

Multiple sidebars

If you have more than one blog (e.g. a regular blog plus an e-course blog, or multiple e-courses) then you can easily implement different sidebars for each. Start by creating a sidebar page and content for each blog, and use a respective URL slug for each page, e.g. /sidebar-main-blog or /sidebar-ecourse-1 or /sidebar-ecourse-2 etc. Then update the code that is injected into the blog page header with the URL slug for the respective sidebar page. This is also explained in more detail in the video. 


Video Tutorial