Adding a vertical line to Squarespace

Design is in the details—and sometimes, a simple vertical line can help you separate content, structure your layout, or add visual interest to your Squarespace site. While Squarespace doesn’t offer a vertical line block by default, you can easily add one using HTML and CSS.

This tutorial will walk you through how to add vertical lines in different areas of your site, such as between columns, inside sections, or alongside text blocks.

Table of Contents

• Why Add a Vertical Line

• Step-by-Step Instructions

• Key Takeaways

• FAQs

• Conclusion

Why Add a Vertical Line?

• Visual Separation: Break up large sections of content or columns to improve readability.

• Modern Design Aesthetic: Vertical lines create clean, minimalist boundaries that enhance visual structure.

• Highlight Content: Use lines to draw attention to specific blocks, such as quotes, testimonials, or callouts.

Complexity: Easy

---

Step-by-Step Instructions

Step 1: Add the html below using a Code Block

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

Step 2: styling the vertical Line

From the Squarespace dashboard navigate to Pages > Custom Code > Custom CSS and paste the code below.

/* Vertical Line */
.vertical-line {
display: block;
height: 100px; /* line height */
width: 2px; /* line width */
background: #000; /*line colour*/
}

You can then adjust the height, width, and colour of the line. To adjust the position use top, bottom, and z-index CSS properties, if you would like to overlap the line with other content.

---

Key Takeaways

• Squarespace doesn’t provide a native vertical line block, but it’s easy to create one using HTML and CSS.

• Vertical lines can be added using Code Blocks, CSS, or custom layouts with columns.

• Always preview your design on mobile to ensure spacing and alignment are preserved.

• Use vertical lines sparingly to maintain a clean and modern aesthetic.

FAQs

Can I add a vertical line between image blocks?
Use a 3-column layout with images in columns 1 and 3, and a vertical line (Code Block or Divider) in the middle column.

Will vertical lines be responsive?
If styled properly (e.g., using height: 100% or relative units), yes. Test across different screen sizes to fine-tune.

Can I animate or style the line?
Yes. You can add CSS transitions or use dashed borders for different effects.

---

---

Conclusion

Whether you're aiming for elegance or clarity, a vertical line can help organize your Squarespace content visually. With a few lines of code, you can add this minimalist design element anywhere on your site.