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
Begin building your homepage by adding sections, containers, and basic content elements. You’ll learn how to structure content using Elementor’s visual editor.
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
Now we're ready to begin designing
the bulk of our website using Elementor.
0:00
In this lesson, we'll open our homepage
inside the Elementor editor, explore
0:05
how the editor works, and build
the first section of our website.
0:09
We'll start by creating a hero section.
0:14
A hero
section is the large introductory area
0:16
at the top of a website
that usually includes a headline,
0:19
supporting text,
and sometimes a button or image.
0:22
This section helps visitors immediately
understand what the website is about.
0:26
Let's do this.
0:30
Let's start by opening our homepage
if you don't still have it open.
0:32
In the WordPress sidebar, click Pages,
then locate the homepage.
0:36
Hovering over
0:40
this should now actually have an Edit
with Elementor option right here.
0:40
There we go.
0:45
Before we start building, let's take a
quick look at the Elementor interface.
0:46
On the left side,
you'll see the Elementor panel.
0:50
This contains
design elements called widgets.
0:53
These include headings, images,
buttons, text blocks, and much more.
0:56
On the right side, we see the page
preview.
1:03
This shows exactly what your website
will look like as you design it.
1:05
Elementor works
using a drag-and-drop system.
1:09
You simply drag widgets
from the left panel into your page layout.
1:12
And before adding content,
1:15
it's important to understand
how Elementor organizes layouts.
1:17
Pages are built using containers.
1:21
Containers help group content together
and control layout spacing and alignment.
1:23
Think of containers like rows
or sections that hold your content.
1:28
First, let's hide this ugly page title
that WordPress automatically adds in.
1:33
Click this page settings icon up top
1:38
and toggle this hide title option here.
1:42
Okay, we can go back by clicking this
plus icon now.
1:46
So let's create
our first container for the hero section.
1:50
Click the plus icon on the page
to add a new container.
1:54
This gives us an option for Flexbox
or Grid.
1:57
We'll touch on Grid later,
2:00
but we definitely want to become familiar
with Flex, so let's select that.
2:01
We'll
2:07
see lots of options to use
as a starting point.
2:07
These first two are for a single container
and depict the direction
2:10
of the content flow vertical or horizontal.
Since our mockups hero section has text
2:14
on the left side and an image on the right,
let's select a two column layout.
2:19
This gives us a simple structure
to begin building our hero section.
2:24
So you can see here we now have
two containers in this main container.
2:28
The main container is currently
highlighted with these pink lines,
2:32
and if we look at the top tab here
and hover over the options,
2:35
you can see
we can add a container above it,
2:39
edit this container,
or delete this container.
2:47
Let's click the Edit option.
2:51
This opens up
all kinds of options in our sidebar.
2:53
We can adjust its layout, style,
and some advanced options.
2:56
You'll see this same setup in the sidebar
with other widgets as well.
3:00
We'll explore all of this as we go.
3:04
Let's leave things as they are
3:06
for now and click the plus icon
to add a widget into the left container.
3:08
This opens up
3:14
all of our options of types of widgets
we can add.
3:15
We could add another container,
headings, images, all that.
3:18
There are some down here in the list
that are only available
3:23
if you pay for a pro Elementor plan
so don't worry about those.
3:25
What we want first is our main heading,
so in the Elementor
3:30
panel, locate the heading widget
and drag it into the container.
3:34
You can see our sidebar
3:39
changes to the customization options
for this widget.
3:41
In this content tab,
I'll edit the text content
3:44
to Mike the Frog.
3:47
Also, let's change
3:50
this HTML tag option to H1.
3:51
Headings, H1 through
H6, are used to organize content
3:55
on a webpage
in a clear, structured hierarchy.
3:58
H1 represents the main title of the page,
while H2 through
4:02
H6 are used for subheadings in smaller
sections, helping
4:06
both users and search engines understand
how content is organized.
4:10
There should typically
only be one H1 per page because it defines
4:14
the primary topic of that page,
4:18
improving accessibility,
readability, and SEO clarity.
4:20
You can see our global styles
taking effect as well.
4:24
Nice.
4:27
Okay let's open the Style
4:29
tab. Here you can adjust the text alignment
4:30
and by clicking this Edit Pencil icon
you can change the size,
4:37
color and typography.
For now we'll slightly increase the size
4:40
so it feels more like a main website
heading.
4:44
Clicking it again closes that popup.
4:51
We'll do more styling
after we lay out more content.
4:54
So let's add
a short introduction below the heading.
4:57
To get back to the element options, click
this plus icon at the top.
5:00
Let's drag the text editor widget
into the container just below the heading.
5:05
You'll see the line of where
5:09
you're about to place it
before you release the mouse button.
5:10
I'll have it say Creative
5:15
Developer and Project Builder.
5:16
Again, you have all the customization
options available up here.
5:20
Let's quickly go to Style
5:25
and change its weight to 700 bold.
5:28
Next,
let's add a button to encourage visitors
5:36
to explore the site or contact Mike.
5:39
These are typically called Call to Action
buttons.
5:41
Let's go back to the widgets and drag
the button widget into the container below
5:45
the text.
5:49
I'm going to label
this button, Contact Me.
5:53
Cool.
5:59
Let's
connect this button to our contact page.
5:59
So here in the link field,
start typing contact,
6:02
then select
the contact page from the list.
6:05
This allows visitors to easily
navigate to the contact page.
6:09
In this gear wheel is the option
to open links in a new browser tab.
6:13
This is helpful if you're ever leading
the user outside of your website.
6:17
You'll keep your site open in the original
browser tab.
6:21
Ok, let's head to the style tab
and let's change the text color
6:24
to our global text color.
6:28
And change the font.
6:33
Our mockup actually has two buttons here.
6:39
We can actually duplicate items too.
6:41
If we right click on our button
you see a duplicate option Click
6:44
that. Let's change the text
to See Projects,
6:47
And let's remove the link for now.
6:54
And here's our first issue.
6:59
The buttons are side
by side in the mockup,
7:01
but when clicking
and dragging this around,
7:03
I only have the option to go on
top or below the other.
7:05
This is due to the direction
of this entire container.
7:10
It's set to lay things out vertically.
7:13
So what do we do?
7:15
Well luckily,
we can add containers to containers.
7:17
Let's drag in a container widget.
7:21
Let's drag in our Projects button.
7:28
Then drag the Contact button
right on top of it.
7:33
You can see now this dotted line
surrounding both of our buttons.
7:36
They're both inside this nested
container now.
7:39
If we click this gray box in the corner,
we can edit this container.
7:42
Let's do that.
7:46
So down here we have a direction option.
7:49
We can lay things out horizontally,
vertically, or both of those reversed.
7:51
We want this right-facing arrow,
which lays them out horizontally in a row.
7:56
This justify content option
allows you to further adjust the layout.
8:01
Centered,
starting at the end, spaced between,
8:05
spaced around, or spaced evenly.
8:09
I'll center mine.
8:12
Align items will do the same
for the opposite direction,
8:15
in this case vertically.
8:18
We'll leave that as is for now.
8:19
Finally, the gaps option
allows you to adjust the gaps
8:22
spacing between the elements manually.
8:25
Okay, let's add our image.
8:28
Let's click and drag
the image widget into the right container.
8:31
Now let's hover over the placeholder
in the sidebar.
8:35
Let's choose an image and let's select
8:38
our headshot here with him
crossing his arms.
8:41
Let's add some alt text for screen
readers sake
8:44
and say Mike the frog
crossing his arms and click select.
8:47
Alright that's pretty big.
8:54
So we've got all of our content laid out.
8:56
This should give you an understanding
of adding containers, adjusting
8:58
their layouts, and adding,
removing, and duplicating widgets.
9:01
In the next video,
we'll style this to match the mockup.
9:05
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