How to Add a Vertical Line in Squarespace? Custom Code


On a squarespace website, a vertical line CSS can be applied to divide up text and add visual interest. There are many options for doing this. Your requirements will determine the method you use. Including vertical lines is a great approach while using the Squarespace Divider Block. Any divider, including animated and solid lines, can be added to this block. Add a Divider block to your page to add the vertical line.

How to Add a Vertical Line in Squarespace?

Another method to draw a perpendicular line is using HTML code. This approach is more complex, but it allows for more detailed designs. To use this method, code must be inserted into your page. You can style the upright line created by this code using CSS in 2023.

To make more intricate designs, you can employ extra HTML components. Elegant and tidy are vertical lines. These content blocks cannot be easily added to your website using selection id.

Steps To Create Vertical Lines

Depending on your comfort and level with coding, a few workarounds can be applied. Select the one that you will treasure most valuable.

Step 1. Use Images To Make Vertical Lines

This is the simplest method. To design an upright line image, use Illustrator, Picmonkey, or Canva. Make sure the image is downloaded with a transparent background. You must use Canva for Work if you utilize Canva. Wherever you intend to place your vertical line, include an image content block. When happy with the outcome, upload your image and make any necessary adjustments with spacer blocks.

Step 2. Vertical Lines Can Be Made With Code.

Wherever you want your vertical line to be, place a Code block. You should replica and paste the HTML code from under. The position of our perpendicular line has now been determined. It’s time to design and build it at this point.

Go to Design > Custom CSS

To Show Vertical Line in every kind of device (Desktop, Mobile Phone, Tablet) copy the code below:

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

Now, If you want to exclude the Mobile device and want it to appear on your desktop and tablet or iPad device, Then use this code:

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

You can amendment the settings to get the anticipated colour, width, and elevation that you like. Once you’re finished, save your modifications. Revisit the website to see the vertical line. Whatever option you select, you can add vertical lines to it.

Vertical Lines Can Be Made With Code

This is a fantastic method to add your flair to the default template and distinguish your website from the competition. Custom CSS snippets and cutting-edge subscription-based services are both possible with plugins. You can look up these timeline plugins free online or by going to extension director.

How to Change Font on SquareSpace?

How Do I Create a Horizontal Line?

There are various options for drawing horizontal lines. The tag can be used to produce a horizontal line. A horizontal line the width of the page will be produced as a result of this. Horizontal lines can also be made using a border. The tag is the most widely used method of horizontal line creation in HTML. It can signal a shift in focus or a gap in the narrative.

How Do I Create a Horizontal Line?

Another way to make a horizontal line in HTML is to add a border to an element. This can be through by accumulation a CSS stuff called ‘border-top’ to an element. This will add a limit at the top or lowest of the element. It will create a horizontal timeline. Both these methods can be used to create horizontal lines in HTML. The choice of which one to use will depend on your needs. To create a visual break line between sections, the best option is ‘tag.’ The CSS attributes ‘border-top’ and ‘border-bottom’ can be used to apply a border to any element.


How can I make text vertical?

When writing content for a website, you might occasionally like your text to be vertical. The HTML tag can be cast-off to achieve this. With the use of this tag, a paragraph is automatically created.

How can I put a line separating sections?

For adding a line between portions, it offers a variety of alternatives. The Design Mode panel’s line tool is available for use. Also available is HTML code.

Can you scroll horizontally on Squarespace?

You have a few alternatives to add a horizontal line scroll to your website. To your CSS file, you can add code. The Page Scroll Effects app is additionally available on the App Store.

Some Squarespace editing is mentioned below video credit to youtube.


Squarespace’s vertical lines may only sometimes produce the intended outcomes and can be difficult. You need to avoid ending up with a line that isn’t exactly straight or doesn’t correspond to your content. Take your time and exercise caution to draw a straight line.

Leave a Comment

Tech In Radar

We will provide different tech news, gadget updates, games information, mobile phones, how-tos of the internet world, apps, AI and a lot of other kinds of tech as well.

Top Post

Contact Info

[email protected]