Adding a vertical line to Squarespace

Adding vertical lines can help improve your website, however, at the moment, a vertical line block is not available.

This tutorial shows you how to add a vertical line using a code block and CSS in Squarespace. All codes used are below.

Complexity: Easy

Step 1: Add the html below using a Code Block

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

Step 2: styling the vertical Line

Add following code to Design > Custom CSS.

/* Vertical Line */
.vertical-line {
display: block;
height: 100px; /* line height */
width: 2px; /* line width */
background: #000; /*line colour*/
}

You can then adjust the height, width, and colour of the line. To adjust the position use top, bottom, and z-index CSS properties, if you would like to overlap the line with other content.