Add a Vertical Line to Squarespace

Lines and geometric shapes can add a design flare to your website. However, Squarespace does not have a vertical line block available.

In this video, I show you how to add a vertical line using HTML and CSS in Squarespace. All code used in the video is provided below.

Step 1: Add the Line using a Code Block

Copy and paste the following code into a code block on your site.

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

Step 2: Style the Line

Then add the following code to Design > Custom CSS. You can then customize the height, width, and color of the line. Use the position, top, bottom, and z-index CSS properties if you would like to overlap the line with other content.

/* Vertical Line */
.vertical-line {
  height: 50px; /* line height */
  width: 2px; /* line width */
  background: #a8a6a1; /*line colour*/
  margin-right: auto;
  margin-left: auto;
}

Here are some other posts you may like:

• Grid Gallery Captions on Hover | Squarespace 7.1

• Style Image Caption on Hover in Squarespace 7.1

• Autoplay Carousel Summary Blocks