How to add a sidebar to Squarespace blog with CSS (without a plugin)

Unfortunately in 2024, Squarespace blogs can’t add a sidebar by default but there are multiple ways around things. Here’s a quick tutorial on adding a simple sidebar to a blog page on Squarespace without needing to purchase a plugin. Just add a simple bit of CSS code and you are done.

For this tutorial, you will want the Squarespace ID finder or be able to find the ID for sections on the page in the browser Inspect window. I like the Chrome Squarespace ID Finder extension by Will Myers: https://www.will-myers.com/squarespace-id-finder.

Build out the Sidebar:

1. Create a New Section directly underneath the blog section.

2. Add images and buttons to the section that you want shown.

3. Switch to Mobile view and check the page elements are in the right places and adjust as necessary.

4. Click Save.

Add the sidebar to the page:

1. Go to Design > Custom CSS to open the CSS editor.

2. Add the following CSS below to the CSS editor.

3. Find the page IDs:

   1. Blog section ID - add this to the code with width 75%.

   2. Sidebar section ID - add this to the code with width 25%.

4. Click Save.

CSS Code:

/* Side by side Section */
  @media screen and (min-width:768px) {
    section[data-section-id="61208e10289ecd50268832e8"]{
     width: 75% !important;
    float: left !important;
    padding: 0px !important;
  }  
    section[data-section-id="672ac0aa5deb005f4aa5a7d1"] {
     width: 25% !important;
    float: left !important;
    padding: 0px !important;
  }  
  }

Choosing the sidebar side:

• The sidebar side can be switched from left to right by using the section up or down arrows to sort which is “first”. In this case, adding the side bar section underneath the blog section will automatically make a right sidebar by default.

---

---