Adding a Vertical Line with Code

Squarespace already offers a horizontal line in its content blocks, but check out this video to discover how to add vertical lines to your website with simple code. Through the custom code window you can create vertical lines, customize the color and more.

In this video I cover:

• Ideas on where to incorporate this design element into your site design

• The specific code used to achieve this look (see below)

Show Notes

0:10 Insert code block

0:50 Changing the line thickness

1:00 Changing the line style

1:17 Changing the line color

1:25 Changing the line height

<style>
.v1 {
border-left: 6px solid green;
height: 500px;
  }
</style>

<div class="v1"></div>

---

The following information was created for use with templates made with Squarespace 7.0.
Stay tuned for more tips and tricks for the new 7.1 platform!

---

WANT to CREATE
a custom WEBSITE?

GET THE DETAILS >

---