How to Add a Vertical Line in Squarespace Using CSS

Table of Contents

• Adding HTML

• Customize with CSS

If you are trying to add a vertical line on Squarespace but are having trouble understanding how to do so using CSS, this guide is for you.

How to Add a Vertical Line in Squarespace Using CSS.

1. Adding HTML

You can start by choosing the section you want to add to the vertical line. I added mine here.

Small vertical line on Squarespace.

You want to choose a code block and add the following code into that block.

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

Then save the page, and let’s move to the next step.

2. Customize with CSS

Next, you can start customizing the line with CSS. You can change the color, width, and height and move it around with custom CSS.

Head over to Utilities and then Website Tools.

For you to access the CSS class, you have to define it in the code section by adding a .vertical-line and then using curly barses to add the specific customizations.

Here is an example. 👇🏼

.vertical-line {

background-color: black;

height: 50px;

}

That’s it! It is that easy to add a Squarespace vertical line.

You can also watch my tutorial to see how I do it. 👇🏼

I hope this helps!

-Silva 🤩