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.
Displaying a Divider
To add a divider:
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. |
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. This option is only available for some styles and will be displayed in a new tab next to General. |
Divider Width | Sets the width of a divider. |
Align | Sets the alignment of a divider. |
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 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.