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
Create a structured showcase section using layout tools like grid. This section highlights work samples and demonstrates how to organize content visually.
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
Okay, let's wrap up this homepage
0:01
and get a quick introduction
to the Grid container option.
0:03
Grid is a layout system
that lets you organize content into rows
0:07
and columns at the same time.
0:10
It's especially useful
when you want to create structured
0:12
layouts like galleries, project showcases,
or card-based sections
0:15
where items need to align
both horizontally and vertically.
0:19
Flexbox, on the other hand,
is designed to arrange
0:24
content in one direction at a time,
either in a row or a column.
0:26
Flex is great for smaller
layout tasks like aligning buttons,
0:30
navigation menus,
or stacking content within a section.
0:33
Grid is usually considered when you need
more complex, two-dimensional layouts.
0:37
It's important to know that most layouts
can technically be built
0:42
using Flexbox alone,
but Grid often makes larger structured
0:45
layouts easier to manage and easier
to keep visually consistent.
0:49
So, since we also have our heading,
which will not be part of the grid,
0:53
I think it's easiest to add a Flexbox
container
0:57
as our overall container and lay out
elements vertically like before.
0:59
To keep things consistent and quick,
let's actually duplicate our
1:05
About Me heading up here
and drag it down into our new container.
1:08
What this does is bring along with it
all of the style changes we've applied
1:12
for different viewports.
1:16
So, in my case, the font will get smaller
for each breakpoint.
1:17
Awesome.
1:21
Let's change
the text content to My Projects.
1:22
Let's quickly add our spacing by editing
1:27
the container.
1:29
And I used 60 pixels before.
1:33
So in advanced
I'll unlink margin options and add
1:36
60 to top margin.
1:40
Nice. Okay let's go back
1:43
to the Add Elementor sidebar
and let's test out this Grid Container
1:45
option. Let's drag it in our new
container underneath
1:49
our heading.
1:53
So here
2:00
we have options to set
how many rows and columns we want.
2:01
I'll be using the four mock project images
that are in the downloaded files,
2:04
so a two-column, two-row
grid makes sense for me.
2:08
Now if we look at the mockup
2:12
we have the image
and a heading for each project
2:14
and typically we would add
even more for each like some text
2:17
explaining what it is
or the tools used to build this project.
2:20
So I think it makes sense to use
2:24
a flex container
inside of each of these grid cells right?
2:26
Let's try it out.
2:30
Let's drag a container in
2:35
and make sure its direction is column
vertical.
2:36
Alright, let's add an image to
2:41
this new container.
2:43
Let's choose
2:49
an image,
and I'll start with this one here.
2:50
By the way,
these images were generated with AI,
2:53
so please don't mind the typos.
2:56
To stay consistent,
I'll add a border radius
3:00
on all corners of 25.
3:02
and a box shadow with values
3:09
of 2 on horizontal and vertical again.
3:11
Nice.
3:15
Okay,
let's add a heading beneath the image.
3:17
And this time, we want to use an H3.
3:24
See we're currently nesting these
projects inside of the overall
3:27
My Projects section of the page,
which has an H2 heading.
3:30
So the next level we should use is 3.
3:34
I'll change the title to rock desktop
3:37
not "rock desttop"
like the mock says, and go to the style
3:40
tab. Let's center align
the text to the center.
3:45
Let's check this in tablet and mobile.
It looks okay in tablet but the heading
3:49
font size is a bit too big for my taste
in mobile. I'll change it to 20.
3:55
So now that we have this container
4:03
fleshed out, let's save ourselves
from repeated work and duplicate it.
4:05
Let's hover over this grey
4:09
box in the corner, but making sure
we're on the one for this grid cell.
4:10
Let's right click it and select Duplicate.
4:16
See how it automatically tossed it
in the next grid cell too?
4:20
Awesome!
4:24
Let's do this two more times.
4:25
Perfect!
4:33
So all of our styles
have transferred over for each.
4:34
Now we just need to change the images
and heading text content.
4:37
Let's do that real quick.
4:41
I'll select the next image.
4:42
And rename it to Insightful Blog,
4:51
ignoring that typo in the image again.
4:54
Next one, select the image.
5:01
This one is called Shoply.
5:11
And last one select the image
5:16
and Creative Designs.
5:29
Nice.
5:35
Let's double
check the layout in tablet and mobile.
5:36
Looks good in tablet.
5:41
And look at that,
it automatically changed it
5:45
to a single column layout for mobile,
which is typical.
5:48
Awesome. This is looking great.
5:51
Now we can set up our button
5:56
in the hero section above to lead the user
to this project section.
5:57
To achieve this,
we can use Elementor's Menu Anchor widget
6:01
to create links that jump
to specific sections on the same page.
6:05
By placing a menu
anchor at the top of a section
6:10
and giving it a simple ID, we can
then link buttons or menu items to that
6:13
ID using a hashtag or pound symbol
followed by the name.
6:17
So let's go to our elements here
and search for menu anchor.
6:21
There it is.
6:26
Let's drag it in right
above our title here.
6:27
And don't worry, site
visitors won't see this on the live page.
6:29
Now, in this ID of menu anchor field,
we give it a unique ID.
6:33
Let's just use projects, all lowercase.
6:38
Cool.
6:41
Let's scroll up and click
on our See projects button.
6:42
Now in
6:48
this link field, we can simply type a hash
or pound symbol
6:48
to signify it's an ID
we're about to supply, then our unique ID.
6:52
Make sure there's no spaces
and the ID is spelled
6:57
and capitalized
exactly like we created it below.
7:00
Now when we click
the button, it'll lead us there.
7:03
Awesome.
7:06
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