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.
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. |
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.
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.