Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Well done!
You have completed WordPress Basics!
You have completed WordPress Basics!
Preview
Design and style your homepage hero section to create a strong first impression. You’ll work with backgrounds, typography, spacing, and layout adjustments.
This video doesn't have any notes.
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
Welcome back.
0:00
So as we can see,
0:01
the text content on our left side
is vertically centered to its container.
0:02
So let's click
the gray box in the corner of it.
0:06
So unlike with our buttons,
the direction is this down-facing arrow,
0:09
meaning it's a vertical direction.
0:13
So our Justify content now controls
the vertical layout of its child elements.
0:15
Align items will control the horizontal.
0:21
These two properties differ
depending on the direction.
0:23
Luckily, it's easy to see quickly here
by just testing these buttons.
0:26
So let's justify the content to the center
0:31
and align items to the center.
0:33
Nice.
0:38
Let's click on our heading here.
0:39
Let's open the typography
0:41
and boost its size to, say,
0:44
80 pixels and change its weight to 700
bold.
0:46
The browser I'm currently recording on
is significantly zoomed in
0:51
for the sake of recording this video,
but if I zoom back out to 100%, you'll see
0:55
it's a good size and likely what
you're seeing if you're following along.
0:59
Text Stroke
will give your text an outline,
1:08
and if you ever want to undo all changes
to one of these sections, you can click
1:10
this circular arrow
to reset it to default.
1:14
I'll add a slight text shadow, and I think
these default settings look pretty good.
1:18
In the Advanced
tabs are options to adjust margin,
1:23
padding, width, and other cool features.
1:26
This will adjust these things
for just this item.
1:28
You can think of padding
like the space inside a box, pushing
1:32
the content away from the edges.
Margin is the space outside the box,
1:36
pushing the box further away
from other boxes on the page.
1:40
But the spacing between
all of our elements
1:44
isn't exactly desirable, so let's click
the gray box for the left container again.
1:47
Let's go down to Gaps and deselect
this Link
1:52
option,
as I only want to adjust the row gaps.
1:55
Let's bring this up to about 8 pixels.
1:58
That's better.
2:02
If you're wondering why the space between
this text and the buttons is larger,
2:03
it's actually due to the line
height of this text.
2:07
You could click it, open the typography,
2:10
and adjust it here.
2:16
It looks like 14 would get it
contained correctly.
2:19
I personally like the extra bit of
spacing there, so I'm going to undo that.
2:22
In Elementor, you can use Command
or Control Z to undo actions,
2:26
but there's also this History
icon at the top.
2:30
This will open a list of all the changes
we've been making.
2:34
We can click down through these
until we see the version
2:37
we want to get back to
and continue working from this.
2:40
It's helpful if you meet a lot of changes
that you want to undo.
2:43
Alrighty, let's add a background color
to our hero section.
2:47
Remember, to edit the parent container,
we click this middle icon at the top here.
2:51
Let's go to the style
and here we have our options.
2:56
We can do classic, meaning one color,
a gradient, video or an image.
3:00
I'll click on gradient. So gradient is a blend
of two different colors as we see here.
3:06
So for the first, I'll
select the primary global color.
3:11
Setting the location moves
where this cross
3:17
section of colors happens.
I'll leave mine there.
3:19
For the second color,
I'll select the global accent 2.
3:22
You can do a linear or a radial gradient
3:27
and the angle adjusts the direction.
3:32
I think somewhere around
210 looks good to me.
3:41
Please feel free to toy around
with these things and experiment.
3:44
Okay there's a few other fun
3:47
things I'd like to showcase
and the first is hover styles.
3:49
This is what happens to an element
on the page
3:52
when your mouse cursor is hovering over it
but not clicking it.
3:55
Let's click our first button here.
3:58
In the Styles
tab you'll see we have Normal and Hover.
4:00
Click on Hover.
4:03
Here are all the properties
you can adjust for the Hover state.
4:05
I'm going to go down to the Hover
animation and select Grow.
4:09
Above that is the transition duration.
4:14
So basically how fast does it go to and
and from normal state.
4:17
Zero is instant and the larger you go
the slower
4:21
it is.
4:25
I think .3 seconds
4:30
is usually a good duration.
4:32
Let's do the same for the other button.
4:36
button.
4:40
Awesome. Next,
4:42
let's play with the image a bit.
Let's click it and go to the Advanced tab.
4:47
If we scroll down
you see we have a lot of options here.
4:52
Let's first click on Mask.
4:56
This will crop the image to a given shape.
4:58
I'm going to select this Pill
Vertical option here.
5:08
You can see
5:11
it's not positioned too great though,
so down here we have more options.
5:11
I'll open the Position
drop-down and select Custom.
5:15
Now we can adjust these sliders
to move the shape.
5:19
Let's move the Y position
so it sits just above his eyes there.
5:22
I think 38% looks good.
5:26
OK, the last thing I'd like to show
is Motion Effects.
5:30
Let's open that.
5:32
You can see that most options
5:39
are locked to the paid plan,
but we do have some entrance animations.
5:40
This happens upon page load.
5:44
You can see there are lots of fun options.
5:46
I will warn you, going excessive
with these things can be jarring
5:48
and make a professional site
look a bit goofy and childish.
5:52
But for demonstration purposes,
I'm going to select
5:56
Fade In Right.
5:59
Okay, let's preview our progress.
6:02
Click the preview button
to see how our page looks to visitors.
6:04
This will open it in a new tab too.
6:07
Awesome, looking good.
6:11
I hope this has given you insight
into all the fun and technical ways
6:13
you can style your elements
and containers.
6:17
Anytime you make changes in Elementor,
6:20
make sure to click the publish
to save your work.
6:22
Nice work, everyone.
6:25
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up