How To Add Vertical Lines In Squarespace
Please note that this page does include affiliate links. This means that if you click and purchase, I may receive a small commission at no extra cost to you.
Vertical lines look clean and elegant. I love them! Unfortunately, Squarespace doesn't provide a content block that lets you add them into your website very easily.
Please fix this Squarespace!
The good news is, there is a couple of work arounds depending on your skill level and comfortability with code. Pick the one that works for.
01. Create Vertical Lines With Images
This is the easy way.Create a vertical line image in your preferred graphic design software. This may be Photoshop, Illustrator, Picmonkey, Canva or something else.
Be sure to download the image onto a transparent background. If you are using Canva, you will need Canva For Work in order to do this.
Now add an image content block where you would like to add your vertical line. Upload your image and use spacer blocks to adjust until you're happy with how it looks.
02. Create Vertical Lines With Code
Place a Code content block where you would like your vertical line to appear.
Now paste in the following HTML code:
<div class="vertical-line"></div>
Now we've chosen where our vertical line will appear, we need to create and design it.
Go to Design > Custom CSS
Now paste in the following code:
.vertical-line {
display: block;
background: #cd9f82;
width: 2px;
height: 100px;
}You can adjust the settings according to your own desired colour, width and height.
Once you're done, save your changes and refresh your page to see the vertical line appear.
Whichever option you decide to go with, you can add vertical lines to your heart's content. This is a great way to customize your website and make it stand out from your basic Squarespace template.
I hope you found this Squarespace CSS tutorial valuable. If you did, subscribe for more good vibes or leave a comment below. I’ll see you there! :)
