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
Learn how to optimize your website for tablets and mobile screens. You’ll adjust layouts, spacing, and typography to ensure your site looks great on all devices.
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
So our hero section is looking great,
but there's another very important
0:00
topic that we haven't touched on yet,
0:04
and that is adjusting our page
for mobile devices.
0:06
A very large majority of people browsing
the internet
0:09
these days is done on mobile devices,
smartphones in particular.
0:12
So we need to make
0:17
sure things are still legible
and look good on phones and tablets.
0:18
Let's get to it.
0:22
Okay, if you take a look at the top center
of the Elementor page builder,
0:24
we see icons for a desktop, tablet,
and mobile.
0:28
Clicking these changes
0:32
the preview to show us
how they'll look on thinner screen widths.
0:33
So let's start with tablet
and move our way down.
0:37
I actually think the layout looks okay
0:41
here, but we definitely need
to make our heading text a bit smaller.
0:43
Let's click on the heading.
0:47
Let's open the typography and notice
next to the size and line height
0:49
and all these other options
0:53
there's this little icon
that matches the tablet icon up top.
0:54
If we click back to
0:59
desktop and reopen typography
it's the desktop icon.
1:00
So this is how we can specify changes
for specific viewports.
1:03
We could click on this icon directly
1:07
and adjust things for others
and it will take us back to that view.
1:09
Okay, so we're back in tablet,
let's lower the heading
1:13
size.
1:15
I think 50 looks good.
1:19
Also, notice our navigation has switched
1:22
from the two horizontal links
into this hamburger menu.
1:24
Pretty convenient, huh?
1:27
Alright, I think the hero looks good
in tablet view.
1:29
Let's switch to mobile.
1:31
Hmm, I'm not sure I like this much.
1:34
I think it would look a bit better
if the image was on top.
1:38
I'm not a web designer by any means,
but it'll be fun to show how to do it
1:42
at least.
1:46
So let's click
the Edit Container icon at the very top
1:47
You can see it still on horizontal
but it just been squeezed so tight
1:51
that they stacked. So let's click
the up arrow here for column reversed.
1:54
Easy as that.
2:00
Let's adjust our heading size again
though.
2:02
46 looks good.
2:10
It also looks like we could use
some extra space below our buttons.
2:12
This is where we can apply some padding.
2:15
So, let's click the gray box on our text
and button container.
2:18
Let's go to Advanced, and again, notice
this is showing that it's only for mobile.
2:22
Let's unlink our padding settings, and
we only want to add bottom padding, right?
2:27
Right.
2:31
I'm just eyeballing it here,
but I think 40 looks pretty good.
2:33
Again, please toy around
with all of these settings and options.
2:37
There are so many fun things you can do,
2:40
and the best way to learn
is by doing and experimenting.
2:42
I'm pretty satisfied with this, though.
2:45
Great work here.
2:51
I hope that using the Elementor page
builder is starting to feel comfortable.
2:51
There are many different widgets
you can add to your pages as you can see
2:56
from that sidebar.
3:00
We're barely scratching the surface
with those.
3:01
I'd like to offer a challenge to you.
3:04
I would like for you to try your best to
complete the About Me section on your own.
3:06
You have the mockup already.
3:11
Look at the elements in the mockup
to decide what widgets you need to place.
3:13
The text is all there for you
3:17
in the project files to copy
and paste over if you're following along.
3:19
If not, you can use it as inspiration
for your own page.
3:23
Look at the layouts
3:26
of these elements in the mockup and see
how you need to arrange them in Elementor.
3:27
Check everything in the mobile
and tablet views.
3:32
Do they still look good?
3:34
In the next video,
3:35
I'll speed up the video of me
creating it to save us some time,
3:37
but I'll quickly go through the settings
and any tricky points
3:40
I ran into along the way.
3:43
So please, give it an honest shot.
3:44
I believe in you. You got this.
3:46
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