How To Add A Vertical line To Squarespace

Abi Bacon

Squarespace Developer based in Southampton, UK

In Squarespace we have access to the ‘Line’ Block, this allows us to use horizontal rules within our websites. However quite often I find designs that clients provide me for their sites contain vertical lines, which currently Squarespace doesn’t have a built in way of providing.

You can target the built in Line Block with some CSS to rotate it, but then its not the easiest thing to manoeuvre and place on the site. Also, you’d either have to individually target the specific blocks that you’d like to rotate or it will affect all of them throughout the site, leaving you unable to use horizontal lines.

Instead, using a little bit of HTML and CSS we can create a specific Vertical Rule component.

1- Creating The HTML For The Vertical Line

First off you’ll want to add a Code Block onto a page on your site. Inside this we’ll want to create a div element and add a class to it so that we can target it with our CSS. I’m going to name the class ‘vertical-rule’, but you can choose what you’d like.

<div class="vertical-rule"></div>

2- Styling The Vertical Line With CSS

At the moment you won’t be able to see anything in the place of the code block, as its just an empty div.

We will want to set the height to 100% so that the Vertical Line fills the height of the code block, allowing us to size it by dragging the code block to the correct size. You can set the width to however wide you’d like, whatever will best suit your design and also set the background colour.

To position the line in the center of the code block we’re going to set the left value to 50% and then use transform: translateX to center this.

.vertical-rule {
  height: 100%;
  width: 2px;
  background-color: black;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

Step 3 - Make It Visible In The Backend

You’re probably thinking you still can’t see this in the editor, but if you check the live site your line is now showing. We can add this additional bit of CSS which also lets us see the line in the backend.

.sqs-block-code .sqs-block-content:has(.vertical-rule) {
  position: unset;
}

Now you’ve got a visible vertical line that you can use across your site, to create a new instance you’ll just need to add a code block and paste in the HTML we added in Step 1.

Step 4 - Custom Variables

If you’re wanting to hand this off to a client you may worry that they’ll jump into the CSS to change the width or colour and accidentally end up breaking it. In these cases I tend to add cutsom variables to the top of the CSS panel and then a comment to the CSS saying ‘Don’t edit below this line’ to the rest of the code.

Here’s the adjusted code using CSS variables so you can easily adjust the styling without worrying about the rest of the code.

.vertical-rule {
  --width: 2px;
  --color: black;
}

/** Don't edit below this line **/
/** Vertical Rule from abibacon.com **/

.sqs-block-code .sqs-block-content:has(.vertical-rule) {
  position: unset;
}
.vertical-rule {
  height: 100%;
  width: var(--width);
  background-color: var(--color);
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

---