How to create a blog post sidebar in Squarespace
Here's what you'll find in this blog post:
→ Info about this tutorial
→ Video tutorial
→ Code example
→ Related content
About This Tutorial
This tutorial was recorded using Squarespace 7.1 and these codes will not work on legacy sites built on version 7. For more information, visit insidethesquare.co/themes
Squarespace can do a lot of things, but it doesn't have a sidebar feature for blog post... until now! 😎
In this tutorial, you'll learn how to create a sidebar using a summary block. This sidebar can be added to any blog post and when you need to make changes to it, all the posts will be updated at the same time! 🙌
We’ll unlock the secret power of the Squarespace Summary Block and show you how to use it to create a simple yet stylish sidebar for your blog posts.
Use the sidebar to display key information like an author bio, important links, your latest freebie, or even a mini table-of-contents that can direct people to related info.
The secret sauce is the Summary Block: you can use this built-in feature to create a functional side bar, and some CSS to personalize it to match your blog's style.
PRO TIP: This is specific for version 7.1 and wont work in older versions of Squarespace. 7.1 was released in 2020, so if your website is over 4 years old, it's time for an upgrade! You're missing out on features that will function better on newer devices. Learn more about the latest version of Squarespace at insidethesquare.co/start
Squarespace Tutorial
Code Example
Here is the code I used in the video; make sure you change the colors and padding to match your own unique style:
/* sidebar buttons */
article .summary-item:nth-of-type (2) .summary-title{
background:yellow;
text-align:center;
padding: 5px; border: 2px solid orange
}
article .summary-item:nth-of-type(3) .summary-title {
background:pink;
padding: 5px;
border: 2px solid red;
text-align: center
}
article .summary-item:nth-of-type(4) .summary-title｛
background: orange;
padding: 5px;
border: 2px solid pink;
text-align:center
}
/* sidebar button hover effect */
article .summary-title:hover｛
background:#fff!important;
border-color:#333!important
}