Add a Vertical Line to a Page

Adding a horizontal line in Squarespace is a breeze — but a vertical line? Not so obvious.
Luckily, you only need a tiny snippet of code to make it happen. Follow these steps, and you’ll have your vertical line up in minutes.

Step 1 – Go to the Page Where You Want the Vertical Line

• Navigate to the exact page and section where you want your vertical line to appear.

• Decide whether it’s going to be between two sections, beside text, or next to an image.

Step 2 – Add a Code Block

• In the section where you want your line, click the “+” icon to add a new block.

• Select Code from the block options.

• Drag and position it exactly where you want the line to appear.

💡 Tip: You can move code blocks just like any other content block in Squarespace.

Step 3 – Insert the Vertical Line HTML

• Double-click the new code block.

• Delete any pre-filled text.

• Paste this simple code inside

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

Step 4 – Style the Line with Custom CSS

• Go to Website → Website Tools → Custom CSS.

• Paste the following CSS into the box:

.vertical-line {
background: #ffffff;
height: 550px;
width: 2px;
margin: auto !important;
}