Divider Shortcode

Updated on December 29, 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.

To display a divider in the Jupiter theme, you only need to add the divider shortcode in Visual Composer and configure the settings.

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

Divider Shortcode - demo


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.

Divider Shortcode - divider 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 DesignThe predefined design of the separator line.
Design PropertiesSettings 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.
To change the predefined design:

Divider Shortcode - edit divider

2From the Style setting, select one of the options: Double dotted, Thick Solid Line, Thin Solid Line, Thin Dotted Line, Shadow Line, Go Top with Thin Line, Go Top with Thin Line, or Empty Space

Divider Shortcode - divider style

3Click 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 ColorChanges the color of the divider. This option is only available for some styles and will be displayed in a new tab next to General.
Divider WidthSets the width of a divider.
AlignSets the alignment of a divider.
Padding TopCreates empty space above the divider.
Padding BottomCreates 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 Entrance Animation

To make the divider visible on scroll with animation, there is a setting in the divider settings pop-up called Viewport Animation. Using this setting is easy and straightforward but if you need a step-by-step tutorial, read the Configuring a shortcode’s entrance animation article.

Did this answer your question?