Dividers are one of the most basic and useful design elements in web design. So we went ahead and made them even better! with newly added elements and shapes.
In this tutorial you’ll learn how to:
✔︎ Choose an SVG divider and control its style
✔︎ Add an icon or text before, in the middle, or after your divider
✔︎ And more!
hey there Cassie from Elementor here in
this video you’ll learn how to use the
extended options of the divider widget
exploring design options
you’re gonna love so let’s dive in we
already created a premade design for a
sushi restaurant including a title texts
and video in the background let’s
upgrade the design in this section so
just drag in the divider widget go to
style and under color choose white to
make it visible there we go now we can
see it let’s go back to content in style
choose the line style you like I’ll go
over the various types of lines and
choose the one that best suits my site
hard to choose huh so many options I’ll
go for the curved one the one that looks
like waves it’s just right for my sushi
restaurant in width I can set the width
of the divider by percent or pixels I’ll
stick to percentage and set the line to
we have the option to add text or an
icon click the icon and open the icon
library and search for one that is
fitting how about a fish this one’s cute
I’ll choose it and hit insert excellent
let’s move on to the style tab here we
can control the design of the divider
and the icon in the divider settings
wait you can set the thickness of the
divider here I’ll set it to 1
set the size of the line style set this
one to 15 and here set the amount let’s
say 25 in gap you can set the space
between the dividers and the elements
above and below five looks good here on
two icon settings here you have all
sorts of options like choosing either
the default a stacked or framed icon set
the size over here and padding
the primary color
and the secondary color
I’ll just reset the icon back to default
you can place the icon on the left or
right I’ll keep it in the center over
here we can control the spacing and even
rotate
so we added a divider with a fish icon
here in the second section we’ll add a
divider with text to keep the design
uniform I’ll copy the divider from here
in our hero section and paste it so
right click the heading handle
paste and drag it over the heading in
style let’s paint it black to make it
visible so do it for the divider and for
the icon as well back in content align
it to the left click the text icon here
will change our element to text and in
the field type in your text cool in
style text you can also edit the
typography however you like
and in position place the text to the
left
stunning try integrating the advanced
design settings of dividers into your
site today for more fun videos subscribe
to our YouTube channel catch you later
