How to Create a Vertical Line in Squarespace: Simple Guide

This post may contain affiliate links. I may earn a commission at no extra cost to you if you make a purchase through them. Full disclosure here.

How to Create a Vertical Line in Squarespace?

Vertical lines can be a great design element to add structure, visual interest, and guide the viewer's eye through your Squarespace website's content. While Squarespace doesn't provide a built-in vertical line block,

you can easily create one using HTML and CSS.

Method 1: Add a Vertical Line Using HTML and CSS

1. Go to the section where you want to add the vertical line and click "Add Block", then select "Code".

2. In the HTML code block, add the following:

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

1. To style the vertical line, go to the CSS editor in Squarespace 7.1 (Website > Website Tools > Custom CSS) or Squarespace 7.0 (Design > Custom CSS).

2. Add the following CSS:

.vertical-line {
  height: 100px;
  /* Adjust the height as needed 
  */width: 2px; 
  /* Adjust the width as needed 
  */background: #a8a6a1; 
  /* Set the color of the line
  */margin-left: -1px; 
  /* Center the line within its container */
  }
    

Copy to Clipboard

You can customize the height, width, and color of the line by modifying the corresponding CSS properties.

Method 2: Add a Vertical Line by Rotating a Horizontal Line

1. Create a horizontal line using the "Line" block in Squarespace.

2. Find the block ID of the horizontal line using the Squarespace ID finder tool.

3. In the Custom CSS, add the following:

This will rotate the existing horizontal line by 90 degrees, creating a vertical line. You can adjust the media query to control the visibility of the vertical line on different screen sizes

Both methods allow you to add a vertical line to your Squarespace website. The first method gives you more control over the line's properties, while the second method is a more straightforward approach using an existing horizontal line.

Adding Multiple Vertical Lines with Different Styles

To add multiple vertical lines with varying styles on the same Squarespace page, you can use a combination of HTML and CSS.

HTML

For each vertical line you want to add, create a separate <div> element with a unique class name:

<div class="vertical-line-1"></div><div class="vertical-line-2"></div><div class="vertical-line-3"></div>

<div class="vertical-line-1"> 
</div><div class="vertical-line-2">
</div><div class="vertical-line-3">
</div>

Place these HTML elements in the locations on your page where you want the vertical lines to appear.

CSS

In your Squarespace Custom CSS, you can then style each vertical line class independently:

/* Vertical Line 1 
  */.vertical-line-1 {
  height: 100px;
  width: 2px;
  background: #a8a6a1;
  margin-left: -1px;
  }
  /* Vertical Line 2 
  */.vertical-line-2 {
  height: 150px;
  width: 3px;
  background: #333333;
  margin-left: -1.5px;
  }
  /* Vertical Line 3 
  */.vertical-line-3 {
  height: 80px;
  width: 1px;
  background: #cccccc;
  margin-left: -0.5px;
  }

    

Copy to Clipboard

In this example, each vertical line has a different height, width, and color. The margin-left property is used to center each line within its container.

You can further customize the styles by adjusting the height, width, background, and margin-left properties as needed for each vertical line.

By using unique class names for each vertical line, you can easily control the individual styles and positioning of multiple lines on the same Squarespace page.