Intro­du­cing Shape Divider

A very powerful fea­ture added to the sec­tion offers a very beau­tiful way to crea­te your pages with ama­zing lay­outs on the top of the sec­tion or at the bottom. 

Shape Divi­der is a per­fect exam­p­le that allows you to crea­te cool sepa­ra­tor effects, that until now were sim­ply not possible.

We are start­ing off with 18 shapes you can choo­se from. The­se are star­ter shapes, that can be cus­to­mi­zed to crea­te an end­less and ver­sa­ti­le array of dividers.

How Shape Divi­der Works

The Shape Divi­der fea­ture uses high­ly opti­mi­zed SVG shapes, that are mani­pu­la­ted and cus­to­mi­zed on the front­end editor.

Bes­i­des making the shapes light­weight SVG files, the loa­ding is asyn­chro­no­us, mea­ning they only load when you need them to, and after the page has finis­hed loa­ding, so it doesn’t affect page speed.

Becau­se the shapes are SVGs, this gua­ran­tees they are always seen as high reso­lu­ti­on, inclu­ding on reti­na screens.

Con­trol Over Shapes

Fle­xi­bi­li­ty is an important fac­tor when crea­ting shapes. In Ele­men­tor, you have con­trol over the various set­tings that help cus­to­mi­ze each and every shape:

Back­ground: You can sepa­ra­te any back­ground with shapes, inclu­ding color, 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­fe­rent shape for the top and bot­tom part of the sec­tion, with a sepa­ra­te set of con­trols for each side

Mobi­le editing: You can quick­ly cus­to­mi­ze a dif­fe­rent shape to fit desk­top, tablet and mobi­le screens, using Elementor’s Mobi­le Editing feature.