Custom Dividers

classes

To add shape dividers to sections, rows, columns, and modules, you’ll add classes to their CSS classes box.

First, you’ll choose the shape you’d like to use (examples below):

• torn
• zigzag-top
• zigzag-bottom
• castle-top
• castle-bottom
• book-top
• book-bottom
• lines-top
• lines-bottom
• points-top
• points-bottom
• bumps-top
• bumps-bottom
• corners-top
• corners-bottom
• checkers-top
• checkers-bottom
• fade-top
• fade-bottom

Basically, the -top and -bottom indicate which part of the SVG graphic you want to use. For example:

Now add -ontop or -onbottom to the end of the shape class to indicate if you want the shape to appear on the top or bottom of that element. In this example, we are choosing the arrow-top shape and placing it on the bottom of the element.

 So, the class we will use is:

By default, the shapes will be grey. You can customize the color, height, width, and margin of the dividers by including any of the CSS variables below to the Main Element Custom CSS box: 

Hint: Most of the time you will use *-bottom-ontop and *-top-onbottom.

Additionally, you can flip the top or bottom SVG horizontally, vertically, or both by also adding one of the following classes for each divider:

Flip Vertically & Horizontally

• top-flip-xy
• bottom-flip-xy

In the visual builder, you’ll need to save your changes in order for the custom shape divider to appear. Once you add the class, save the changes in the element, then save the page changes. You will see the new shape added to that section.