Blog Sidebar Generator

Squarespace 7.1 removed native blog sidebars. This tool brings them back with clean CSS grid — no plugins, no monthly fees. Choose position, width, and styling.

Why this matters

When Squarespace moved to version 7.1, they dropped sidebar support entirely. Bloggers and content-heavy sites lost a key navigation and engagement tool. Third-party plugins charge $59+ per year for what amounts to a few lines of CSS. This generator gives you the same result for free — a responsive, sticky sidebar using CSS grid that works with any 7.1 template.

/* Blog Sidebar Layout — Squarespace 7.1 */
/* Targets the blog item content wrapper and a section block as the sidebar */

/* Step 1: Create the grid layout on the blog item page */
.blog-item-content-wrapper {
  display: grid !important;
  grid-template-columns: 1fr 300px;
  gap: 32px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 40px 20px;
  align-items: start;
}

/* Step 2: Blog content takes its grid position */
.blog-item-content-wrapper > .sqs-layout:first-child {
  order: 1;
  min-width: 0;
}

/* Step 3: Style the sidebar section */
/* Add a "Section" block in your blog post and set its ID to "sidebar" */
#sidebar,
.blog-item-content-wrapper > .sqs-layout:last-child {
  order: 2;
  background: #f9f9f9;
  padding: 24px;
  border-left: 1px solid #e5e5e5;
  position: sticky;
  top: 100px;
}

/* Step 4: Responsive — mobile layout */
@media (max-width: 768px) {
  .blog-item-content-wrapper {
    grid-template-columns: 1fr !important;
  }

  .blog-item-content-wrapper > .sqs-layout:first-child {
    order: 1;
  }

  #sidebar,
  .blog-item-content-wrapper > .sqs-layout:last-child {
    order: 2;
    position: static;
  }
}

How to add this to Squarespace

1. Copy the CSS above.
2. Go to Design → Custom CSS and paste at the bottom.
3. Open any blog post in the editor. Add a new Section block where you want the sidebar content to appear.
4. Click the section's gear icon, go to Advanced, and set the Section ID to sidebar.
5. Add your sidebar content inside that section — text blocks, image blocks, newsletter forms, or any Squarespace blocks you want.
6. Click Save. The sidebar appears next to your blog content on desktop and stacks on mobile.
7. Tip: For a site-wide sidebar, add this section to your blog post template or use Summary Blocks to auto-populate recent posts.