How to Add a Vertical Line in Squarespace (2 Easy Ways)

Jan 30

Written By Kate Ingham-Smith

How to add a vertical line in Squarespace - main image

Squarespace makes it super easy to add a horizontal line to your page. Just add a block, choose Line… job done!

However, what if you want to add a vertical line to your Squarespace page instead?

You can add a vertical line in Squarespace in two ways – through custom CSS or by using Spark Plugin.

How to add a vertical line in Squarespace in no time at all.

Option 1: Use CSS

Go to the page you want to add your vertical line to, click Add block, and choose Code.

Copy and paste the following code into your code block. Make sure you are in HTML mode and that Display Source Code is toggled off.

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

Save and Exit your page. You won’t be able to see your horizontal line at this time, but that’s okay.

The next step is to define the characteristics of the line in the Custom CSS editor. Go to Pages, scroll down to Website Tools, and Custom CSS.

Then, add the following code to the Custom CSS box. Don’t delete any code that’s already in the box.

.vertical-line {
  background: #000000;
  width: 3px;
  height: 100px;
  margin-left: 1px;
}

You can customize this code in the following ways:

Background – the default color is black, but you can change the color by amending the six-digit hex code
Width – this changes the thickness of the line
Height – this changes the height of the line
Margin-left – the bigger the number, the more the line aligns to the left. You can align the line to the right by adding a minus (-) to the number

Once you’re happy, Save and Exit, and you’re all set!

Option 2: Use Spark Plugin

If you want to add a vertical line in Squarespace but don’t want to mess around with fiddly snippets of code, Spark Plugin is the option for you!

Spark Plugin makes it easy to customize any line individually or site wide.

Not only can you add vertical lines to any page, but you can change the weight, color, and length in just a few clicks. Plus, you can animate your lines to make them jump off the page.