How to Insert Vertical Lines in Squarespace

Squarespace Formatting & Design
Written By Sarah Pew

TLDR: Does the below look too confusing, or do you have other things you’d rather be spending your time on? Reach out to me and I’ll help you update and manage your website!

The drag and drop functionality of Squarespace is part of what makes it such an attractive tool for people looking to build a site. But like many programs that are built with guardrails, things get a bit trickier when you want to think outside the box.

If you want to add a horizontal line to your page, it’s easy as A, B, C.

A. Hover over your section and select “New Block”

B. Select “Line”

C. Position it where you want on the page.

The tricky part comes when you want to add a vertical line. That is not a standard block insert in Squarespace, so you need to get a bit creative. Don’t worry, I’ll walk you through it.

Prerequisites:

You must be the owner (not just administrator) of your site in order to make these updates. You will not see “Website Tools” on your “Website” side menu if you’re only an administrator on the site. If you’re not the owner, call the owner up and tell them you’ve got a neat trick, then forward them this article.

Custom CSS page screen shot

Update your CSS:

This is the part that you need to be an owner for!

  1. Head to the Custom CSS panel (Pages > Website Tools > Custom CSS)

  2. Copy the below into your Custom CSS

    .vertical-line {

    background: #000000;

    width: 1px;

    height: 200px;

    margin: 0 auto;

    }

Code block screen shot

Create your vertical line:

  1. Navigate to the page where you want your vertical line

  2. Insert a code block onto the page

  3. Delete the text that is in the block and replace it with the following

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

Voilà

You’re done! Read below to understand why this works and what you can do as a more advanced user.

How It Works

CSS Updates

The CSS Update and code block work together to create a beautiful vertical line making your page more readable! A few things to note:

  • If you want more than one type of vertical line on your site, you will need to a unique name for each. The name in the CSS file must match the name in your code block.

  • Background - this property value that controls the color of the vertical line. By using #000000, the line will appear black. If you’d like to use a different color, replace the numbers with the Hex number of your choice.

  • Width - this property value controls the width of the vertical line. We have made it 1px. To make a thicker line, replace the 1 with a larger number. Test out a few to see which you like best.

  • Height - this property value controls the height of the vertical line. We have made it 200px. You can increase or decrease the height of the line by making the number larger or smaller respectively.

  • Margin - this property value controls the space around the elements. “0 auto” is the standard setting, and I recommend leaving it as is.

Sarah Pew