All right, so let's go ahead now and
build out the blog page,
which we've named the Articles page on the main menu,
but it's actually the blog page.
The first thing we're gonna do here is we can't
edit with Elementor directly just yet
because we actually need to
edit the page first from the backend,
from the traditional work is back-end.
Right here.
We can now click on Edit with Elementor.
This will now give us access to
the elemental interface for the page.
The first thing I'm gonna do is
I'm gonna come down here to
sit-ins and simply hide the page title.
Then we'll simply use our own heading.
And we'll call this one our blog.
We're gonna sell it as an H1, go to style.
Actually let's align to the center first go to style.
And then for the typography,
we're going to set it as our primary.
If you're not working with the global fonts,
you can set this to about maybe
60 pixels or something like that.
Make sure it's pretty big, right?
Next, we're going to add
our divider for the blog
and we'll align it to the center.
Set this at fits he present.
Now, check this out.
Okay, we're going to add posts from different categories.
We're gonna make use of our posts grid
from the essential add-ons down here.
Now you do have post timeline,
which is actually very interested
in what this will do is that it'll
display your posts in
a vertical timeline and it is a different style.
Personally, I'm not a big fan of it,
but you do have this option if you want to.
But I'm not gonna walk with it.
I'm simply going to use the post grid.
Alright, so I'm gonna go ahead and drag the pose grid,
jump ridges underneath of
the divider. And now look at this.
The source is going to be our posts obviously,
but we can query based on the author,
the tax Fermat's and so on.
But we're going to go with categories.
Here.
I'm going to type in Europe.
Alright.
We're gonna pull in posts from Europe.
The postpaid page here would be set to three,
and then the layout sets in.
So we'll go with three columns for the image size.
We're gonna go with full as usual.
Now, you would notice that because I'm using
different sizes of my images for the posts,
there is a misalignment in terms of heights.
Like obviously the fashion in
Istanbul has the taller image.
And then for their sins in Pittsburgh
and Glasgow posts have shorter images.
There is a way around
this and you will see it right here.
You have image height.
You can simply set a fixed height for your images.
The only drawback to this is that
sometimes you may not get the best angles.
Like for example, you know, if you
made this one taller than,
you may miss out on the best angle
in your images and so on.
So that's the only drawback.
Ideally, you'd want to use images of
the same width and
height when it comes to featured images,
but it's not a problem.
It's okay.
Alright, so we've got that.
What else simply do is let's
add a heading to indicate that,
okay, this is our posts from Europe.
So I'm gonna come in here and say Europe.
Alright, now let's make some changes
to the actual pose good itself.
Layout settings.
In here.
The accept words we're going to go with 15.
Show read more. Yes, show metta.
Yes, Bot Loves.
Go over to style.
What I'll do here is I will select style number two.
This one will show us the date A2 ensures
the avatar or the, the author's name.
So I do prefer this particular style.
Now from understand itself,
we're gonna go over to the color typography and spacing.
Hey, again, you have the title hover color.
We did this earlier,
I'm going to change this one to orange.
So when they hover on the posts link, it turns to orange.
Then for the typography,
we're gonna make some changes in here as well.
I'm going to make this a little bit smaller,
just so that majestic city of Glasgow
can be on one single line.
The style, I'm gonna go with italic decoration, none.
For the Read More button.
Let's also change down as well.
I will find out on down here with
Mo button style, the text color.
We're gonna go with orange just to keep things constant.
And then of course for the typography,
I'm gonna click in here,
go to declaration and then sit down to none.
And that's it.
We've set it up. Europe, we've got a three posts.
What else I want to do right now is
to simply duplicate Europe,
duplicates the Postgres right here.
I will drag Europe, the second one,
drop it above here,
and then set this one to Asia.
That's going to be the next category.
Now for the actual Postgres itself,
we're gonna change the categories in here to Asia.
So let me type in Gia
There it is.
There you go. And then last but not least,
let's do the exact same thing again,
duplicates, duplicates.
Now I'll drag Asia.
Changes wanted to South America,
come down here to the Postgres.
Changes, one to America.
Recall South America.
And there it is.
So one more thing we could do is to add
some space in between the poles grids. So check this out.
Okay, I'll go to my postgraduate work,
either one for Europe,
go to advanced on link
the values and then I'll sets bottom pattern.
Let's say 25 pixels.
Nothing too drastic,
will do the sentence for Asia as well.
Laying bottom 25 pixels.
And then last but not least we'll do
for South America as well,
on laying bottom 25 pixels.
Let's go ahead now updates.
And let us view the page.
There it is.
Okay, so we're gonna add some spacing
for the blog title itself bought. Take a look at this.
This looks pretty neat and it's actually quite cool.
Let me just quickly make that quick change
to the blog title.
Let's add some spacing. So we're going to go,
actually will go to the section button right here holding
all the content will go to advanced on
link and they will simply set 50 pixels for
the top and then fit 50 pixels for the bottom as well.
Okay, OR gates.
Now, one more time,
let's view the page.
And voila law, There you go.
That is the blog page all built out.
However, I want to challenge you.
To make things more interesting.
I'll show you an example of what I'm talking about.
Both with elemental and
with the essential atoms are plugin.
You have access to so many elements to
make your pages look more exciting, more dynamic.
As an example, for the essential atoms have
activated yet another element.
And it is the image accordion.
You'll find it on
the creative elements right here
you'll see image accordion.
Go ahead, activate it.
Now let's go back to the page in
here and let me show you one thing we could do.
I'm going to edit with Elementor.
We're going to make use of the image accordion.
Now check this out again. I'm going to scroll down here.
Are essential atoms.
We have the image accordion element right here.
I'm going to click drag and drop it
just above you up. All right.
Now before I begin to edit this,
I'm going to add another
heading just above the image accordion.
And we can call this one latest posts.
Just as an example,
I'm actually going to add some padding from the top.
Let's go 25 pixels.
Just to give you some distance between
the actual block title and let us posts.
And I'll take a look at this again.
I'm gonna go to my image accordion and invite here.
We can do so many things for the
very first according in here,
I'm going to click inside,
change the image in here to be one of the posts.
This one right here, the Saint-Petersburg posts,
I'm going to choose the featured image.
Insert that.
And now writer you'll see make it active.
Yes, we want to make this,
I couldn't active so that it will
actually linked to the posts in here right now,
I'm going to change that title.
Two visits in St. Petersburg.
That's going to be the title.
And then in here would be the excerpts.
This would be the except for the text,
which we can change it now right
here where you have enabled her to link,
you want to show this and now right here,
this is where you would add the link to the post.
So let me just quickly do this.
Let me view the page real quick.
For days in St. Petersburg.
So right here I'm going to grab this link right here.
Again, notice that you don't need to
copy the domain name itself.
Just go with the forward slash and then the name of
the post or the URL of the posts.
I'm gonna copy this.
Go right here, go back to Edit.
Click on the very first image accordion in here.
And now down here, title link.
I'm going to go ahead now and simply paste that.
So this will now link to the post or
four days in St. Petersburg.
Again, I could do the same thing for the second.
According in here as well.
Our list choose the one for the Rainbow Mountain.
And then again, I can come in here and change the title
to the Rainbow Mountain.
Little quick, Rainbow Mountain, and so on.
That's for the second accordingly, the third quarter.
And I will just change this one to the one who Rapa Nui.
And then of course, the last but not least,
let's go with the one for Turkey,
fashion and fashion in Istanbul. Insert that one.
It is.
I'm gonna go ahead and now updates.
And now we'll take a look at the improved blog page.
Now look at this.
You've got blog posts, for instance,
in Pittsburgh, you will have this rainbow mountain.
They can click on this one for Rapa Nui,
this one for fashion and Istanbul.
And then if they're not interested,
they can simply now scroll down to
view the posts from Europe,
Asia, South America, and so on.
So this is one way,
another way how you can make
your pages more interactive, more dynamic.
You can also add animation as well,
like you can set it up so that you
are maybe slides in from the left or from the right.
I've shown you how to do that in the homepage.
So just try to be creative.
If you're not happy with how static your page feels like,
you can always spice things up by making use of
creative elements, adding some animation.
And you will see a massive improvement
in how dynamic your pages are.
That's it for building out the blog page.
Thank you so much for watching.
I will see you in the next class.