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 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.
|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.
To see a live demo of styles please click here.
Customizing the Separator Predefined Design
There are a few settings in the divider settings pop-up to customize the default styling.
|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
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.