How To Make Vertical Lines in Squarespace
If you’ve spent any time building a Squarespace website, you know that it’s super easy to make a horizontal line by using a line block.
But what about vertical lines?
Vertical lines can create a sense of height or grandeur. I like to use a lot of whitespace in my design. If you hold trepidation about leaving too much whitespace between paragraphs and images, try using vertical lines to create page length and indicate to the user that there is more information below.
It’s incredibly easy to do, here’s how it’s done:
Step 1: Create an HTML div
Do this by adding a code block.
In the code block, enter:
<div class="vl"></div>You can name the div class anything you want. I’m calling it “vl”, but you could call it “vertical-line”, “vert-lie,” “flibbertyjibbit…” anything. It doesn’t matter what you call it.
Step 2: Use CSS to Style the div Into a Vertical Line
In the your site’s custom CSS (Design > Custom CSS), use this code to style the div:
.vl {
border-left: 2px solid #000000; // defines the width, style and color of the line (change the hex code [#303030] to match your site).
height: 100px; // defines the length of the line.
position: absolute;
left: 50%; //move the line to the middle (50% of the page width)
margin-left: -1px; //half the width of border witdth to ensure the line is precicely centered on the page.
top: 0;
}
What’s happening:
If you named the div class “vl,” you write “.vl” to modify the div you created. If your div class is named “vertical-line,” you would write “.vertical-line” before the opening curly bracket ( { ).
Optional:
If you want the colour or style of a vertical line to be different from page to page, you’ll need to place the CSS from step 2 in the “Advanced” section of the page options { ⚙️> Advanced) to apply it to one specific page.
If you need to place the CSS in the page’s advanced section, you need to write the code a little bit different. You’ll need to put the code between <style> tags, so the CMS knows that it’s CSS.
Write it like this:
<style>
.vl {
border-left: 2px solid #303030; // defines the width, style and color of the line (change the hex code [#303030] to match your site).
height: 100px; // defines the length of the line.
position: absolute;
left: 50%; //move the line to the middle (50% of the page width)
margin-left: -1px; //half the width of the border witdth to ensure the line is precicely centered on the page.
top: 0;
}
</style>
Use spacer blocks to keep vertical lines from overlapping other content, and make sure it looks ok on mobile too.
If you're looking to customize your Squarespace website even more, check out the code shop for unique modifications that are sure to set you apart from your competition!
