How to create a vertical line in Squarespace 7.1 website

The impact of vertical lines in design to evoke a sense of height and sophistication. These lines, thoughtfully placed, not only add elegance but also serve as seamless connectors between content elements. For those who value whitespace, vertical lines offer a visually pleasing way to maintain simplicity while guiding users through the entirety of the page. Incorporating them into your design is a straightforward process, enhancing both aesthetics and user experience.

Generate Vertical Lines in HTML

To introduce a vertical line in Squarespace, initiate the process by embedding HTML code in the desired location on your website.

On your Squarespace page, incorporate a Code Block at the intended position for the vertical line.

Inside this code block, substitute the placeholder text with the following HTML snippet:

Html:

<div 

class="vertical-line">

</div>

Note: Feel free to choose any name for the div class. In this instance, it's labeled "vertical-line." For multiple vertical lines with distinct styles, consider assigning a unique div class name for each.

Don't be alarmed if the line isn't visible yet. Custom CSS is needed to apply the desired style.

Apply CSS for Vertical Line Styling.

To customize the appearance of the vertical line on your website, navigate to the Custom CSS panel (Design > Custom CSS) and insert the provided code snippet:

CSS:

.vertical-line {
  background: #000000;
  width: 1px;
  height: 200px;
  margin: 0 auto;
}

If you prefer the vertical line to be visible exclusively on desktop and tablet versions, use the following code:

CSS:

.@media screen and (min-width: 768px) {
  .vertical-line {
    background: #000000;
    width: 1px;
    height: 200px;
    margin: 0 auto;
  }
}

Important: If you've named the div class differently in the HTML code block (other than "vertical-line"), ensure consistency by updating the class name in the CSS as well. For instance, if you changed it to "v1" in the HTML, replace ".vertical-line" with ".v1" in the CSS.

Now, let's dissect the property values and explore how you can tailor the line to suit your preferences:

Adjust the visual characteristics of the vertical line by manipulating the CSS properties in the provided code:

Background Color: The HEX code #000000 in the background property dictates the color of the vertical line, set here as black. Modify the appearance by substituting #000000 with the HEX code corresponding to your preferred color.

Line Thickness: The width property, set at 1px in this example, governs the thickness of the vertical line. Increase this value for a thicker line or reduce it for a more delicate appearance.

Line Height: The height property, designated as 100px here, determines the height of the vertical line. Adjust this value to lengthen or shorten the line as desired.

Margin Setting: The margin: 0 auto ensures proper spacing around the element. This is a standard configuration; it is advisable to retain this setting unless specific adjustments are necessary.

Once you've tailored the CSS code to your preferences, save the changes and refresh your page to witness the updated appearance of the vertical line.