how to make a vertical line in squarespace

In Squarespace, creating a vertical line or divider can help separate content on your webpage for a more organized and visually appealing layout. To add a vertical line in Squarespace, follow these steps:

Method 1: Using a Code Block (HTMLCSS)

1. Log into Your Squarespace Account:
   • Go to the Squarespace website and log in to your account.
2. Access the Page Editor:
   • Navigate to the page where you want to add the vertical line and enter the page editor.
3. Add a Code Block:
   • Click on the section or block where you want to insert the vertical line.
   • Click the “+” button to add a new block.
   • Choose “Code” under the “More” section.
4. Insert HTML and CSS Code:
   • In the code block, you can insert the following HTML and CSS code to create a vertical line. Customize the code to match your design preferences.

htmlCopy code

<div class=”vertical-line”><div> <style> .vertical-line { border-left: 2px solid #000; * Adjust the color and thickness as needed * height: 100%; * Adjust the height of the line * } <style>

5. Save and Preview:
   • Save your changes and preview the page to see the vertical line.

Method 2: Using the Squarespace Line Block (for Squarespace 7.1)

If you’re using Squarespace 7.1, you can add a vertical line using a built-in feature:

1. Log into Your Squarespace Account:
   • Go to the Squarespace website and log in to your account.
2. Access the Page Editor:
   • Navigate to the page where you want to add the vertical line and enter the page editor.
3. Add a Section:
   • Click the “+” button to add a new section to your page.
4. Choose the “Line” Block:
   • In the section editor, click on the “+” button within the section.
   • Choose the “Line” block from the list of available blocks.
5. Configure the Line Block:
   • Customize the line block by adjusting the color, width, and height settings to create your vertical line. You can usually find these settings in the block’s options panel.
6. Save and Preview:
   • Save your changes and preview the page to see the vertical line.

Using either method, you can add a vertical line to your Squarespace page to visually separate content or enhance the design of your website. Adjust the line’s appearance and position as needed to achieve the desired effect.