Primitus Consultancy

View Original

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

See this content in the original post

Step 2: styling the vertical Line

Add following code to Design > Custom CSS.

See this content in the original post

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.