Add a Vertical Line to a Page on Squarespace [Easy Code]

Lines

Apr 5

It’s super easy to add a horizontal line to a Squarespace page but what’s not so simple is adding a vertical one.

To do so you need just a small piece of custom code, keep reading to find out what it is and how to add it to your Squarespace website.

Watch the video

Check out the YouTube video below 👇

Framework for designing a perfect homepage — *Want a framework for designing the perfect homepage?*

Access now

Head to the page you want to add a vertical line to and add a block to the section where you want the line to appear.

You’ll need to choose a code block and drag the blog into position (aka where the line will appear).

Adding a code block to Squarespace page Image

Double click the new code block, remove any code that appears and instead add the following code:

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

This will add the line however if you want to make it bigger, you can.

To do so, make sure you’ve saved your changes and then head to Website > Website Tools > Custom CSS and add the following code to your custom CSS box:

.vertical-line {
background: #ffffff;
height: 550px;
width: 2px;
margin: auto !important;
}

This code basically tells Squarespace what color you want the line to be (background) and the size you want to make it (height), how thick you want it to be (width) and its position on the page (margins).

Hit save and that’s how you add a vertical line to a Squarespace page, simple!