Add Separators to a Column with Visual Composer

Add Separators to a Column with Visual Composer

Get a copy of the transcript of this guide (pdf)

add-separators-to-a-column-with-visual-composer

Add a Separator element

add-separators-to-a-column-with-visual-composer-1

There are two types of the separator. First is the standard separator wherein it’s just a horizontal line across the page. Let’s try to add the standard separator. To do that, you can click on either of the + icons.

Select the Separator element

add-separators-to-a-column-with-visual-composer-2

Select the Separator element to add the standard separator.

Separator Settings box will pop-up

add-separators-to-a-column-with-visual-composer-3

These are the general properties that you can manipulate inside the separator settings:

  • Color
  • Alignment
  • Style
  • Border width
  • Element width

Once done with the changes, click on Save Changes.

Another type of separator – select Separator with Text element

add-separators-to-a-column-with-visual-composer-4

The other type of separator is the Separator with Text. After selecting the Separator with Text element, a Separator with Text Settings box will pop-up. These are the general properties that you can manipulate inside the Separator with Text settings:

  • Title – This is where you’ll place the text in the middle of the separator.
  • Icon
  • Title position
  • Separator alignment
  • Color
  • Style
  • Border width
  • Element width

Once done with the changes, click on Save Changes. Now, let’s preview our changes by click on Preview Changes.

Standard Separator and Separator with Text

add-separators-to-a-column-with-visual-composer-5

As you can see here, we’ve got the text separator and the standard separator and that’s the difference between the two.