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 code 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 color 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.‘.