Step 1. Create your columns

Drag and drop the "Multiple Columns" badge down to the page, and the click on "3" to create 3 columns.

---

Step 2. Add the Vertical Line HTML code

Drag and drop the "Custom HTML" badge to the middle column. Insert the following HTML code into the "Custom HTML" badge:

<div class="vertical-line"  style="height: 500px;"></div>

Note: Change the orange number to make your vertical line longer or shorter: style="height: 500px;"

---

Step 3. Add the Vertical Line CSS code

Click on "Design" at the top, and then click on "Edit HTML/CSS" in the top-right of the page. Click on "main-style.css" in the column on the left. Scroll all the way to the bottom of the CSS stylesheet and add the following code:

div.vertical-line{
    width: 1px;
    background-color: black;
    height: 100%; 
}

Click save.

---

You're done! Publish your site to see how your vertical line looks!

---

Tips & Additional Information

Your vertical line will naturally reside in the center of its location. If you want the line to move to the right or the left, simply add "float:right" or "float:left" to the code from Step 2. for the desired result as shown below in orange.

​<div> class="vertical-line"  style="height: 500px; float:left;"></div>

---

comments powered by Disqus