In this video I will show you how to create Box Shadow effects to widgets, sections and columns, by using the Elementor page builder for WordPress. That’s right – beautiful drop shadows with absolutely no coding or CSS.
To learn more about using Elementor’s many widgets and features, subscribe to this channel or visit
hi everyone this is Noah from alimentar
today I’m going to show you an amazing
new feature the Box shadow with which
you can add a unique touch to your
website to begin we’re going to click on
the Edit with Ella matter button on this
page we show how to add a box shadow to
a section a column and a widget let’s
begin with this section to find the box
shadow we just click on the section on
the style tab border and here you can
see the Box shadow here you click yes
and now you can see in front of you all
the Box shadow options here we have
color
let’s pick black with an opacity of
course blur is in order to soften the
edges of the box shadow spread is in
order to increase the size of the box
shadow horizontal is in order to set
horizontally the Box shadow and vertical
is to set vertically the Box shadow
edges now please note that the Box
shadow is displayed only on the bottom
border because it’s set as full width
now let’s move on to the columns let’s
click on a column style tab and under
background and border you could see box
shadow click yes and now once again we
have the same box shadow options for
this column let’s pick a gray with an
opacity and for the blur we’re going to
set it at just about 30 with the spread
of 0 horizontally and vertically we’re
going to leave at 0 as well so that it’s
right at the center of the column now
we’re going to move on to another set of
columns
now these columns are just an example of
the incredibly creative things you can
do with the Box shadow and for the color
I’m going to insert that same color and
of course give it an opacity all right
and now for the blur I’m going to set it
as zero so there won’t be any soft edges
in this box shadow for the spread I’m
going to set it as 50 now as you can see
the box shadows edges have increased
their size to 50 for the horizontal
option I’m going to set it as minus 250
please note that if you want to position
it outside the scale you can just type
in the number now we’re going to move on
to the other column in the Box shadow
color we’re going to choose in all of
the green for the blur of course we’re
going to set it as 0 just like the other
column spread we’re going to set it as
to set it as an opposite of the other
column let’s set it at 240 and vertical
let’s give it a minus 8 now I’ll just
put this on preview mode so you could
see what an incredibly creative touch
it’s given to the page now we’ve gone
over the columns and it’s time to move
on to the widgets here you can see a
video widget inside this section let’s
click on the widget itself and here
please note that the Box shadow is
placed in a different area
in the sections and columns it’s placed
in the Advanced tab it’s placed here
under the Advanced Options because the
box-shadow
isn’t always set on the element itself
but on the whole widget for example for
this title
the box-shadow will be set for wherever
the blue line is displayed on the border
of the widget and not on the title
itself let’s go back to the video widget
now for the color let’s go with black
the blur we’re going to set as 50 and
the spread horizontal and vertical we’re
going to keep a zero
as you can see on the page that gave the
video widget and amazing effects I hope
you enjoyed this video for more videos
and tutorials subscribe our youtube
channel or visit Doc’s
alimentar com
