In this tutorial, we’ll add cool shapes and elements using the spacer widget in Elementor.
This is a great way to speed up and save weight on your WordPress website because you can replace some heavy png images with CSS.
You’ll learn how to:
✔︎ Create shapes with the Spacer widget
✔︎ Use absolute position
✔︎ and much more!
hi-oh zip from elemental here in this
video you’ll learn how to liven up your
designs with cool colorful shapes just
like you see here they are made with
elemental using a cool design trick so
let’s dive in and see how it’s done we
will be working on this pre design page
over here let’s add some colorful shapes
to bring it to life we will start with
the circles instead of using image files
we can use a nifty design trick to
create easily adjustable shapes so how
do we create circles in Elementor first
off drag is space the widgets into the
column over here then under advanced
background set the background color you
want the circle to be next we will set
its height and width and the content
changes height now under advanced custom
positioning set the width to custom and
make sure to set the custom width to the
same as the height so you end up with a
square now before turning it into a
circle let’s set its position to
absolute and place it over here in order
to turn it into a circle go to border
and change the border radius unit to
percentage and set it to 50 cool now
even if you change its size it will
always remain a circle got it
nice let’s create another yet slightly
smaller circle and this time only with a
border so duplicate the circle and move
it over here now in advanced give it a
solid border and some width then change
its color as you can see the circle
seems a bit squished don’t worry we’ll
fix it soon first let’s clear the
background color so it will be easier on
our eyes okay great now let’s turn it
into a circle again in order to do so
remember this when creating circles with
the border using this spacer concept
always add twice the amount of the
border width in pixels to the custom
width in our case the border width is
set to 3 pixels so under custom
positioning we should add 6 pixels to
the width cool our circle is back now
let’s make the circle a bit smaller and
the content set the spacer to 50 pixels
and based on what we just learned set
the custom width 256 pixels as you can
see creating circles is a breeze now
let’s add some custom rectangles to
liven up our title a bit drag a spacer
widget under the heading and in advanced
and a background give it a color back in
content set the space to 220 pixels to
match the height of the heading widget
now back in advanced ina a lot of
back-and-forth it’s worth it and the
custom positioning set the width to
custom and set it to 30 pixels now let’s
fix its position a bit change it to
absolute and set the orientations to
left and bottom in order to responsively
align the rectangles with the heading
widget with tablet and mobile in mind
we’ll change the offset units to
percentage now place it next to the
heading like so cool now just duplicate
and move it a bit to the right good job
our hero section is done let’s move on
to the next section I’ll add some
circles here as well so go ahead
right-click the circle and hit copy now
in the second section paste it in the
column over here and move it to where
you like then change its height and in
advanced and the custom width said its
width accordingly now let’s create
another circle only with a border so hit
duplicate move it a bit and then change
its height and width like before add a
border and change its color then remove
the background color now let’s add a
square on the side over here by
duplicating this circle then in custom
positioning set its orientations to
right and bottom change the color and
turn it into a square by removing the
border radius which is set before cool
let’s add a larger square next to it
duplicate the Blue Square and change its
height and width remove the background
color then give it a border give it a
nice color
and move it over here and that’s on hits
update and check it out cool well that’s
it now you know how to create cool
easily adjustable and colorful shapes
using the spacer widget to really liven
up your designs don’t forget to
subscribe to our YouTube channel for
more tips and tutorials see ya later
