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 👇

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).

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).

📩 Join the inner circle to get exclusive code updates

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

Your designer

I'm Sam, an award-winning Squarespace web designer. I have worked with every type of business, building platforms for solo entrepreneurs through to multi-million dollar corporations. If you want to discuss a potential project, you can email on sam@bycrawford.com or get in touch with me here. Alternatively, you can book in a free 15-minute consultation call here.

Want more?