Create some amazing web designs using the Shape divider

Shape divider are graphical parts that you can add to separate the sections of your page. Hereafter is a preview of the shape dividers that are available into Page Builder CK.

Examples of shape dividers

shape asymetric slope shape cloud shape clouds shape drip shape ellipse shape mountain shape multiple slope shape multiple v3 slope shape multiple v slope shape multiple waves shape paper shape slope shape triangle shape triangle 3 shape triangle small shape v slope shape wave shap bridge

How to add a shape divider

Create at least 2 sections (rows) in your page.

2 sections

Edit the CSS styles of the bottom section

css edition

You will open the left panel where you will find the tab for the Shape divider

edition panel

List of options

Shape : select the shape that you want to use in the list
First color : this is the main shape color to fill the shape with
Second color : you can force the second color (mainly like a background color). In many cases you don't need it
Position : choose if you want the shape to take place at the top of the bottom of your section
Flip : normal or inverse, choose what you want
Placement : this will put the shape under the content (for example text over the shape), or the shape over the content (for example that cuts an illustration)
Height : this value can be set in % or px. By default it will be 100px, you can play with it to get the desired result
Width : this value can be set in % or px. By default it will be 100px, you can play with it to get the desired result. Note that a width in % will stretch the shape as a width in px will keep the shape ratio and cut it off

Hereafter you will get the options to create a simple cloudy divider :

shape coulds simple

Example with 100% width

demo clouds percent

Example with 1000px width

demo clouds 1000