How to Add a Vertical Line in Squarespace

Why Add a Vertical Line?

Vertical lines are a simple way to separate content, frame headings, or add a modern touch to your Squarespace design.

The only catch? Squarespace doesn’t have a built-in vertical line block, but it’s easy to create one using a few lines of HTML and CSS.

Step 1: Add the Line

Decide where you want your line to appear (e.g. between columns or beside text).

Then add a Code Block and paste this snippet:

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

That creates a placeholder for your line.

Step 2: Style It with CSS

Next, go to Design → Custom CSS and add:

.vertical-line {

height: 80px;

width: 2px;

background-color: #a8a6a1;

margin: 0 auto;

}

This gives you a clean, centred line.

You can tweak it to match your brand:

Height: height: 120px;

Width: width: 4px;

Colour: background-color: #000000;

Spacing: margin-top: 20px; margin-bottom: 20px;

Step 3: Make It Responsive

Check your site on mobile.

If the line looks too tall, add this to your CSS:

@media screen and (max-width: 640px) {

.vertical-line {

height: 50px;

}

}

This keeps it neat on all screen sizes.

Why It Works

Clean geometry and alignment help guide the viewer’s eye, turning a basic layout into something balanced and intentional.

As a freelance web designer in Glasgow, I often use small custom CSS touches like this to elevate Squarespace websites without making them complex to manage.

Quick Recap

Add HTML with a Code Block

Style with CSS

Adjust for mobile

Small tweaks. Big difference.

Need help customising your Squarespace site?

I create clean, SEO-friendly designs for service-based businesses across Glasgow and beyond.