Horizontal & Vertical Line Dividers

UPDATED on May 3, 2018

Summary:  Horizontal or vertical line dividers help break up sections of content so they are more easily scanned and understood.

Example of a horizontal divider line (below)

---

Steps to add a horizontal divider line

• Position your cursor where you want to horizontal line
• Click the 'Insert Horizontal Line' button on your toolbar
• A line will appear.

Modify the width on the top and bottom of the horizontal line

• Click the 'Edit HTML source' button on your toolbar
• Scroll to the horizontal line tag <hr/>
• Modify the line tag as follows:

<hr class="vspacer-2" />

Note: every time the number increases, 10 pixels are added on top and bottom of line

• 1 = 10 spaces
• 2 = 20 spaces
• 3 = 30 spaces
• 4 = 40 spaces
• 5 = 50 spaces
• and so on

Note: spacing is not visible until the page publishes

Example of a horizontal divider line with 3 spacing (below)

---

Example of a vertical divider line

Vertical divider lines can only be added on columns, and only appear on the left of the column.

Here are two columns which contain vertical divider lines. To add columns, see Column Layout.

Steps to add a vertical divider to a column

• Click the 'Edit HTML Source' button on your toolbar
• Navigate to the column where you want to add the divider
• Locate the column code
• Column Code: <td class="col-sm-6">
• Revise the Column Code to <td class="col-md-6 devider"> be sure to put the word 'devider' as spelled, and inside the quote marks.
• Click 'Update'.
• Your divider line will not be visible until you publish.