Divider | SP Page Builder (Pro) - Documentation | JoomShaper

SP Page Builder (Pro)

Updated Last: 18 March 2024

Divider

What is a Divider

The Divider addon lets you add a divider between web elements to help individualize sections prominently. This addon comes with multiple customization options to let you fully customize your divider.

SP Page Builder 4.0

 

How to Add a Divider

You can add a Divider to your web page from the Addons panel of the SP Page Builder sidebar. Simply drag the Divider addon from the SP Page Builder Addons panel and drop it on the section of the page where you want to add the addon.

Divider Settings

When you click on the Divider addon, the addon inline editor will open up. You can access the addon settings from here and customize the addon to fit your needs. 

The Divider Settings consists of two options: 

  • Divider
  • Options

Divider

SP Page Builder 4.0

Vertical Mode

Enable this mode in case you want to set your divider vertically.

Divider Type

There are two types of divider you can choose from. You can either select the border divider or you can select the image divider. For image divider type you have to add the divider image in the image upload option.

Border

SP Page Builder 4.0

In the case of Border, you will have full access to edit your border width, style, and color. 

The style option comes with 3 types of borders to choose from: Solid, Dashed, and Dotted.

Image

SP Page Builder 4.0

The Image option is there to let you set your preferred image as your divider. This option comes with further customization options like choosing image, Background repeat, and divider height. The background repeat option comes with a drop-down list of options that includes no-repeat, repeat all, and repeat horizontally.

Divider Width

Set the size of the divider according to your preference. Enter the desired digit as per your design requirement.

Options

SP Page Builder 4.0

Get further customization edge with Options. The options tab comes with 3 separate choices.

  • Border Radius: Set an optimum radius for your border edges
  • Margin Top: Set an optimum distance from the top element
  • Margin Bottom: Set an optimum distance from the bottom element

Alignment

SP Page Builder 4.0

Set the horizontal or vertical alignment of your divider as per your requirement. Choose from the 3 options of Right, Middle, and Left.