This is a very basic tutorial to how the Elementor page builder works. It explains how to change the style options on sections and columns to customize your page design.
hey guys this is Noah from Elementor so
in the previous video from the Serie we
went over the layout options for both
sections and columns today in the
continuation to that video we’ll be
going over their style options so I
first inserted a new section for best
display in her video I activated the
stretch section option and set the
sections height as fit to screen if you
need to reminder how to do this you can
watch our previous video about the
sections and columns layout settings now
we’ll be viewing the section style
options by clicking on this tab now here
I have full control over the style
options for this section its background
border and CIPA graffia in the
background style options I have the
backgrounds type here I could choose no
background at all or classic background
or video backgrounds
if I select none the sections background
stays as is if I select the classic
background I have an option to set a
color and or an image I’m saying and/or
because you can set both a color and an
image where the color will be displayed
below the image so anyway by clicking on
color I can set the entire sections
background color and its opacity now
I’ll just add a simple heading to give
you a better idea
all right and now we’ll just head back
to the section style options now to
display an image background I just click
right here first I’ll just clear the
color now I’ll just click right here and
then choose my image from the WordPress
media library say this image now once a
background image is placed note how you
have the following settings you have
position where you could select the
exact positioning of the image inside
the screen see that let’s go with center
center and then you have attachment
where you could choose whether the image
will scroll along with you or stay fixed
in place while you scroll down so say
scroll it Scrolls down with me or fixed
it stays in place and then you have
repeat you can choose whether the image
display will be repeated inside the
section and if so in what direction so
you have no repeat or repeat or repeat X
or repeat Y vertically and then you have
size where you could set the image or
size as automatic cover which stretches
it out or contain meaning the entire
image is displayed let’s leave it at
cover now as I’ve mentioned before you
could set both color and image as a
sections background this is great if you
want to display a rather small image
that doesn’t take up the entire sections
background and then if you set a color
they will both be displayed in the
backgrounds now we’ll head over to our
amazing background overlay style feature
which as you may have noticed was
immediately added when we selected the
classic background option
now this background overlay feature is
truly amazing because it gives you
endless background style options for
your section so you could choose none
meaning no background overlay or classic
which will bring us all our overlay
options so you could set a color overlay
and or an image overlay if we set a
color overlay say good black you could
also set the opacity now you could set
it to be any color you want say yellow
now instead of color I could set its
overlay as an image so I just click here
and then choose the image I want from
the media library say this gentle
pattern see that now once the image is
in its place note how we have the image
display options again just like before
the position attachment repeat and size
and asset for these we also have the
opacity option where I could set the
exact opacity that I want for the
overlay now let’s take this a step
further so now I’ll add a color overlay
sleep black and then aside for the color
I also add an image say this nice
texture and I’ll add a bit
so now I have here a nicely touched up
section without touching any code so
that was the overlay feature moving
right on we’ll head over to the border
style options here as you can see you
have the option of setting the border
and the box shadow to your section to
emphasize this I’ll go over to the
layout settings and deactivate the
stretch section and for the height I’ll
give it min height of say 600 pixels
then back to our border style options
right here so first you have the border
type where you could choose the type of
border that you want let’s set a solid
and you have the border width you could
set the exact width of the border
let’s give it four pixels and you have
color we’ll set it as something bright
so yellow and the border radius where
you could set the exact radius of the
sections border say we set it at 20
pixels now note that the border radius
option appears also when you don’t have
an actual border meaning you could set
it to the edges of this section so if I
set the border as none while the border
is still set at 20 see how the sections
edges are still rounded and last but not
least here we have the Box shadow which
could give the section a great effect so
you could choose as no or yes and then
we have the following options we have
blur which spreads out the Box shadow
we have spread where we could spread it
out horizontal and vertical now watch
this if I head back to the border select
solid and set the color as white see how
great that looks now we get so caught up
in our image and color backgrounds that
we almost forgot about the section video
background option so we’ll head back to
the background style options where as
you can see it is set as classic right
now so let’s set it as background video
so here you could insert a youtube link
so say I answered this video see how
that appears now I’ll just head back for
a second to the border radius and set it
as 0 so it looks better and in the
layout I’ll just stretch out the section
again go back to the video now see how
this video is also displayed with the
overlays that we have set before yay to
the overlay you also have the option of
setting a background fallback for the
video now this is for mobile where the
video won’t be displayed because video
backgrounds and mobile could cause
loading issues so after the background
and border style options we have the
typography style options which are
relevant only if you deactivate the
elementary global colors in the main
Elementor settings on your dashboard now
that we went over the section style
options it’s time to head over to the
column style options let’s scroll down
to these good-looking columns that we
have right here now I’ll just click on
the columns icon and as you can see you
have the content tab and the Advanced
tab under the content tab you have the
style options for this column
you have background and border and
topography in background and border you
have the option of setting a background
color or image border and box shadow now
these are simply two columns each with
their own style setting easy to do yet
resulting in a very modernized section
so in the first one as you can see we
have here its settings already we have a
blue background color now as you can see
if I change the color it changes for the
entire column so that’s the only setting
that we set for the backgrounds no
border and no box shadow and in the
second column
if we click right here so you can see we
only have an image for the backgrounds
now this image I chose it from the media
library and I adjusted its settings
right here see top right in the position
and no border and no box shadow now if I
head over to these columns will just
quickly go over each and every column
and what we set for it so in this column
as you can see it has a white background
color and it has a border radius of 6
say if I give it 10 it’s even more
rounded so with 6 and it has a light box
shadow you see it’s set as yes it’s
color is like grey with a blur okay and
the next column here we also have a
background color as white and we have a
border type as solid this time with a
width of 8 and the color is yellow and
with no box shadow and this third column
over here we have the background color
as pink this time see and without any
border nor box shadow
I hope you enjoy this video for more
videos and tutorials subscribe our
YouTube channel or visit us at Doc’s
Elementor com
