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):

  • arrow-top
  • arrow-bottom
  • arrow2-top
  • arrow2-bottom
  • arrow3-top
  • arrow3-bottom
  • asymmetric-top
  • asymmetric-bottom
  • asymmetric2-top
  • asymmetric-2-bottom
  • asymmetric3-top
  • asymmetric3-bottom
  • asymmetric4-top
  • asymmetric4-bottom
  • curve-top
  • curve-bottom
  • curve2-top
  • curve2-bottom
  • clouds-top
  • clouds-bottom
  • clouds2-top
  • clouds2-bottom
  • clouds3-top
  • clouds3-bottom
  • clouds4-top
  • clouds4-bottom
  • graph-top
  • graph-bottom
  • graph2-top
  • graph2-bottom
  • graph3-top
  • graph3-bottom
  • graph4-top
  • graph4-bottom
  • mountains-top
  • mountains-bottom
  • mountains2-top
  • mountains2-bottom
  • ramp-top
  • ramp-bottom
  • ramp2-top
  • ramp2-bottom
  • slant-top
  • slant-bottom
  • slant2-top
  • slant2-bottom
  • triangle-top
  • triangle-bottom
  • triangle2-top
  • triangle2-bottom
  • wave-top
  • wave-bottom
  • wave2-top
  • wave2-bottom
  • waves-top
  • waves-bottom
  • waves2-top
  • waves2-bottom
  • 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:

arrow2-top

arrow2-bottom

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:

arrow-top-onbottom 

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: 

--top-divider-color:

--top-divider-height:

--top-divider-width:

--top-divider-margin:
--bottom-divider-color:

--bottom-divider-height:

--bottom-divider-width:

--bottom-divider-margin:

clouds-bottom-ontop

--top-divider-height:80px;
--top-divider-color:#fff;
-webkit-filter:drop-shadow(0px 0px 50px rgba(0,0,0,0.1));

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

  • top-flip-y
  • bottom-flip-y

Flip Horizontally

  • top-flip-x
  • bottom-flip-x

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.

Examples

arrow-bottom-ontop arrow2-bottom-onbottom bottom-flip-xy

arrow3-top-ontop arrow3-bottom-onbottom top-flip-y bottom-flip-y

asymmetric-top-ontop asymmetric2-top-onbottom top-flip-y

asymmetric3-top-ontop asymmetric4-top-onbottom top-flip-y

clouds4-bottom-ontop clouds2-bottom-onbottom bottom-flip-xy

clouds-bottom-ontop clouds3-bottom-onbottom bottom-flip-xy

curve-bottom-ontop curve2-bottom-onbottom bottom-flip-xy

curve-bottom-ontop curve2-top-onbottom

graph-bottom-ontop graph2-top-onbottom

graph3-top-ontop graph4-top-onbottom top-flip-y

mountains-top-ontop mountains2-top-onbottom top-flip-y

ramp2-bottom-ontop ramp-top-onbottom top-flip-x

slant-bottom-ontop slant2-top-onbottom bottom-flip-x

wave-bottom-ontop wave2-top-onbottom

waves-bottom-ontop waves2-top-onbottom

zigzag-bottom-ontop zigzag-top-onbottom

torn-ontop torn-onbottom bottom-flip-y

castle-bottom-ontop castle-top-onbottom

points-bottom-ontop points-top-onbottom

book-bottom-ontop book-top-onbottom

lines-bottom-ontop lines-top-onbottom

fade-bottom-ontop fade-top-onbottom

checkers-bottom-ontop checkers-top-onbottom

bumps-bottom-ontop bumps-top-onbottom

corners-bottom-ontop corners-top-onbottom

Your Title Goes Here

Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.
Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.

asymmetric3-top-ontop asymmetric3-top-onbottom top-flip-y bottom-flip-x