1. Home
  2. Divider Shortcode

Divider Shortcode

Updated on November 23, 2017

A great way to organize page content is to use divider/separator lines. The divider shortcode allows you to insert different kinds of dividers between the page contents.

Divider Shortcode - demo

To see the Divider shortcode in action, check out the demo page.

Displaying a Divider

To add a divider:

1Add a new page or edit an existing page.

2From the Visual Composer screen, click on the + button.

Divider Shortcode - visual composer section
3In the Add Element pop-up screen, search for Divider and click on it to be added to the page.

Divider Shortcode - add element
4When the shortcode is added, a new pop-up screen called Divider Settings will open that allows to configure the shortcode settings.


5Click on Save Changes and publish or update the page to check the result.

Configuring the Design

To change the divider style:

There are two types of settings to configure the design: Predefined Design and Design Properties.

Setting Description
Predefined Design The predefined design of the separator line.
Design Properties Settings like color, width, padding and so on which customize the specific styling of the separator.
1Click on Edit Divider to open the Divider settings pop-up.

2From the Divider Orientation setting, select one of the options: Horizontal, Vertical.
3From the Style setting, select one of the options: Line, Dotted, Dashed, Thick.

To see a live demo of styles please click here.

4Click on Save changes.

Customizing the Separator Predefined Design

There are a few settings in the divider settings pop-up to customize the default styling.

Setting Description
Divider Color Changes the color of the divider.
Divider Width Sets the width of the divider. Available options are: Full Width, One Half, One Third, One Fourth, Custom Width.
Divider Custom Width This option will be available if you set the Divider Width to Custom Width. Use this option to set the width of the divider. Value is in pixels.
Divider Align Sets the alignment of the divider. The option is available only for Custom Width setting.
Divider Thickness Sets the divider thickness.
Padding Top Creates empty space above the divider.
Padding Bottom Creates empty space below the divider.

Configuring the Visibility for Devices

To hide/show the divider for a particular device (mobile, tablet, …), there is a setting in the divider pop-up called Visibility For Devices. Using this setting is easy and straightforward but if you need an step-by-step tutorial, read the Configuring a shortcode’s visibility article.

Adding an Extra Class Name

The Extra Class Name field in the settings pop-up allows you to add an extra class name to the shortcode. It’s useful when you need to target the shortcode in a stylesheet or JavaScript file.

You can read the Adding a custom CSS class to a shortcode article for further explanation.

If you have any questions regarding Divider shortcode customization, feel free to contact our support team.

Did this answer your question?