Elementor WordPress Builder How To Build A Hero Section

Elementor WordPress Builder How To Build A Hero Section


hi guys and welcome to another WordPress
elementor builder tutorial this is Janie from system 22 and web designer tech
tips calm all we’ve been looking at the Elementor
page builder in our last few videos it’s free and it’s pretty good actually
we just through this quick site together with one of the templates that they had
installed there let’s continue on this time we’re gonna
build from scratch and see what we can come up with so let’s get a new page
going I think I’ve got a test page here we can use it get nothing on there first
thing I want to do is make sure it’s set to element a full width which it is and
update that now I’m gonna hit the Elementor builder button now we’ve got
the page loaded let’s create a new section we’ll work on our hero section
so we’re gonna hit the little red button there and let’s make it side by side
50/50 – there we are there’s one column there’s the second column let’s put a
background in here you so I’ll just hit the edit section in the
middle there you can use right-click to do things as well edit section it’s just
telling us that so that’s what we want to do here I’m going to put an image
behind there let’s go to style background type no let’s put an image in hit the
plus button here and let’s stick that in all right so the image behind there now
now let’s add something to our first little column here well let’s make this
a bit wider first we can do that on the Advanced tab with a bit of padding just
couldn’t give it a hundred everywhere there we go and that’s giving it a hundred pixels
all around top right bottom and left you can have it in percentages or m if you
prefer let’s click on this little section here
let’s add an image you okay now let’s choose our image uhh
with this fellow in right here no particular game plan
okay yep deal with it pinging bit larger we’ve got it in the middle that’s fine we give it a border and make it a little
more interesting looking I see we got with max-width here past the border
tight our solid border make it 10 pixels and play now let’s make this can we make
it image rounded they must have a border radius here I’m sure
border-radius here we go you can have pixels or percent it if I give it a
percentage and give it 50 that’ll make it round it’s fine not interested in well just try the box
shadow a little bit too much with a little bit
there we go little bit of box-shadow look a bit more there we go it spreads
fine I don’t want that any more than that okay
okay so now we’ve got our image in there let’s put something over in this side we
just click on it it will bring up our blocks or if it doesn’t just hit the
little grid icon up here and it’ll bring them up bring up a heading you you make it h1 make it large even bigger than that what about large
extra-large there we go I see our image on the back
but how this is repeating itself I don’t want it to repeat itself so let’s go on
to our main section block we covered sections in our last video so you might
wanna take a look at that okay image position default attachment
you can have it to fix and give it that sort of lock parallax effect there we
slide up down and repeat we don’t want it to repeat but we do want it to
actually cover the whole area so let’s say cover there there we go okay and let’s make that heading stand
out a bit so I’m just going to click on it to highlight it it’s color just make that white and
stand out nicely how about we put a cover overlay on this just to make that stand out even
more yet so let’s go back clicking all that edits section man and let’s follow Hitler star background
over layers just put a blue one on there well a very good let’s take that there
we go we can still see the image behind we’ve got it overlaid
that’s fine now let’s add something under our heading text here like a text
block just add this text editor block I just can’t get just underneath where
that light blue line is right there and against our wise I’m not going to spend
a lot of time on this we can have it longing left like it is color again
we’re gonna go for the white text so it stands out there
that’s great now to have a little call-to-action
button there’s a button right there under our text there this time we’ll have it aligned
centrally it’s making a bit bigger let’s make it large oh yeah I like that better and giving an icon if we want to just give
it an icon something like an arrow to the right or something like that there we go something like that there we
go and color wise make it blue takes color we want to stay white and background color will make blue
there we go and when it hovers let’s make that background color green and
we’ll keep the text color white just update that yeah
hey doesn’t look like it updated I hover color there and it’s a text color white
every air takes color white and hover color background green to update that
yeah that’s better that’s doing okay so we’ve
got makings of a hero section there
let’s just at this section right here let’s give it a background color even
make that text stand out a little bit more black
and let’s take this a pasting down a little bit there we go and let’s give everything in
there a bit of padding say 50 pixels all round so that’s gonna be an advanced
spacing padding see we’re on pixel so let’s give it 50
there we go well I’m sure about mainly boys picture
that’s too small I think that picture itself was probably too small so let’s
add a different one beside this one I guess you okay well that’s even remembered our drop shadow and other settings which
is great and that pictures more like the size let’s see what we can do about a
bit of padding I want different ones on top and bottom
this time I’m going to try and make that around so that skids 2000 on bottom
well let’s say 30 on the left and right see 40 that’s not quite doing what we wanted to
do but it’s almost there it’s almost saying well that will do for the time
being so we’ve got our nice little hero section there so let’s go down and take
a look now we’ve updated let’s hit the little I icon there there we have it
nice little quick hero section there got a bit of a gap here won’t get rid of
that not sure why we’ve got a gap there let’s inspect it and take a look I’m
just using the chrome inspector here with Google Chrome site contents that’s got rid of it okay let’s just
copy this over and we’ll put this in our custom CSS so we don’t have that gap Scooter our theme customizer there it is
parents customized and down at the bottom here we’ve got
that additional CSS block a bit of CSS that we copied it’s just paste that in
there publish that now it’s published
when we refresh it should stay the same that gap should
still not be there there we go that’s fine I’m sure we had
padding there but it’s easy enough to get rid of with a bit of CSS so there we
have it there’s our little hero section that was very easy to do with Elementor
so very good next time we’ll do all about our section and use some more of
those widgets so I hope you found that useful if you have please like share and
subscribe to our YouTube channel if you’re interested in web development
take a look down below we’ve got some great free courses as well as some
premium courses our premium courses have a huge discount for our YouTube
subscribers who do take a look once again this has been Janie from system 22
and web design and tech tips comm thanks for watching have a great day

Be the first to comment

Leave a Reply

Your email address will not be published.


*