Intro­duc­ing Shape Divider

A very pow­er­ful fea­ture added to the sec­tion offers a very beau­ti­ful way to cre­ate your pages with amaz­ing lay­outs on the top of the sec­tion or at the bottom.

Shape Divider is a per­fect exam­ple that allows you to cre­ate cool sep­a­ra­tor effects, that until now were sim­ply not possible.

We are start­ing off with 18 shapes you can choose from. These are starter shapes, that can be cus­tomized to cre­ate an end­less and ver­sa­tile array of dividers.

How Shape Divider Works

The Shape Divider fea­ture uses high­ly opti­mized SVG shapes, that are manip­u­lat­ed and cus­tomized on the fron­tend editor.

Besides mak­ing the shapes light­weight SVG files, the load­ing is asyn­chro­nous, mean­ing they only load when you need them to, and after the page has fin­ished load­ing, so it doesn’t affect page speed.

Because the shapes are SVGs, this guar­an­tees they are always seen as high res­o­lu­tion, includ­ing on reti­na screens.

Con­trol Over Shapes

Flex­i­bil­i­ty is an impor­tant fac­tor when cre­at­ing shapes. In Ele­men­tor, you have con­trol over the var­i­ous set­tings that help cus­tomize each and every shape:

Back­ground: You can sep­a­rate any back­ground with shapes, includ­ing col­or, image, video and gra­di­ent backgrounds

Con­trols: With the Shapes fea­ture, you can con­trol the size of the shapes, as well as invert them or flip them over

Top & Bot­tom Shapes: Set a dif­fer­ent shape for the top and bot­tom part of the sec­tion, with a sep­a­rate set of con­trols for each side

Mobile edit­ing: You can quick­ly cus­tomize a dif­fer­ent shape to fit desk­top, tablet and mobile screens, using Elementor’s Mobile Edit­ing feature.