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

Jan 30

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?

A vertical line can be a great way to separate information on a page or draw people’s attention. However, you can’t add one in the same way you can a horizontal line.

Example of a vertical line in Squarespace

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

Here’s how to make a vertical line in Squarespace in no time at all!

How to add a vertical line in Squarespace

Option 1: Use CSS

There are two parts to creating a Squarespace vertical line using code. The first step is to identify where you want to add your line on your page.

Step 1: Add your code to the page

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>

(‘Vertical-line’ is your class name and is what you’ll use to identify your code in step 2. You can change this to something else if you want, just update your CSS code in step 2 accordingly.)

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.

Step 2: Use CSS to amend your Squarespace vertical line

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

I recommend having the page your line is on open at the same time so you can see how your changes affect your vertical line. The custom CSS box doesn’t work in real-time, so you need to Save and refresh as you make changes.

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

If you want to use this type of vertical line on other pages of your website, just add the code you created in step 1 to another code block.

If you want to create another style of vertical line to use on your site, just repeat the process above using a different class name. For example, vertical-line2.

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

Top tip: Vertical lines can look different on desktop and mobile, so I recommend checking your page on both devices to make sure your line looks and functions exactly how you want it to.

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 on your site. 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.

Transforming a line using Spark Plugin is easy. Just add one one-off piece of code to your site, then click the Spark Plugin ‘K’ Logo at the top left-hand side of the page.