Let's go ahead now and add
the blog section on our homepage.
And you can see this is what we're trying to accomplish.
We will have our headline,
it divider and two blog posts,
which will have the featured image,
the title of the post,
the excerpt, as well as a read more link.
And then the read more posts
bottom dealt actually linked to the blog page.
But here's the thing though.
Let me drag the same demo site right here,
but with the backend you will see I have
access to certain elements in here,
like the pulse grid as well as the post time line.
But if asked to go to my own site right here.
And if I scroll down to the essential atoms section,
you will see that I don't have access to
those elements and you will not see them either.
And that's because we
need to activate them in the back-end.
What am I talking about?
Let me first of all drag this page away.
Let's go to the back end,
the actual WordPress backend,
and you will see essential add-ons in here.
Go ahead and click on it.
And now right here where you have
elements, you click in there.
And you right here,
this is where you can activate or deactivate
elements that you'll walk in width.
So let's do this.
Okay, I will actually go ahead and disable
every single element or an aldose,
activate a few, the ones that we would probably use.
I'm going to activate the testimonial element
right here and then right here under
your dynamic content elements,
I'll activate the post grid as well
as the post time line.
Let's go ahead and save our settings.
Now we'll go back to the homepage edit with Elementor I.
If I scroll down to the essential add-ons section,
you will see we now have access to just a
few of the elements I not show.
Are we still while you can still see a better payment,
easy jobs, carrier pages, elements,
I don't know why, but it's fine.
At least now, we have access to
the post grid as well as the post timeline.
So here's exactly what we're gonna do.
First of all, we're going to drag in our header,
which would say visit our blog.
So I'm going to drag the heading right here.
So I'll say visits blog.
Let's align it to the center.
Next up will be the divider.
So let's add down as well.
I'm going to align to the center with very,
very short width of about,
let's say 20% should be fine.
Now here's going to be
the main thing. We're going to go back.
We're gonna make use of the post grid, post timeline.
I'll show you how that works
when we build on the blog page.
But I'm going to drag the poles grid right here,
just underneath the divider.
Let's drop it in there.
Okay.
Now, posts per page,
I'm going to switch this one to two.
We only have two pages in here.
And a thin is you can source by maybe the author.
You can also pick specifically by
categories as well as you simply
come in here and type in the name of
the category whose posts you want to show.
So on you can offset by maybe one post you can
order by the Date descending, and so on.
You have access to all these settings.
But the main one that actually wants to walk
with is going to be the layout settings right here.
In here, you have just one template layout,
which is the default lit, which is fine.
But then the columns are going to make this one too.
Now right here, the image size,
we're going to go with full.
And there you go.
So now things are starting to look a lot better.
But then of course we can also do things like
the show our Lord more if you want to.
So when you activate this,
you'll see this button right here that will
load more blog posts as well,
but we're not gonna do that.
You do have access to a grid style,
which isn't much of
a difference between good and missionary.
I guess, when you, when you are shooting
more posts and welcome with more columns,
that's when you'll see the difference ball would
just took with masonry for now. Okay.
Showed a title?
Yes. We want to show the title.
Should they accept yes,
but we're going to extend the except to 50 words.
Okay, so there you go,
50 and then 50 letters rather.
And then in here the show we'd More button,
yes, we want to do that one.
Show post terms.
We can show this.
This would be things like your tags,
your categories, and so on.
But we're not gonna do that one,
so we'll just go ahead and hide that.
Now. Show meter.
This is going to be for the author,
the date it was published.
I'll go ahead and hide that.
But again, of course this is entirely subjective.
You are more than welcome to display.
You'll need the information if you want to.
Alright, links right here.
You can do things like Target blank for
your images are no full of this would
be for SEO purposes,
are and so on.
All right, let's go over to style
and let's see what we have in here.
The post grid style default,
you've got style to,
which would have the dates.
You've got style three here,
which won't have the date which
is kind of similar to the default.
I guess there wasn't that much of a difference.
And of course in here you can do things like
change the posts background color,
add some more spacing if you want to.
We're gonna come down here to color typography and style.
So right here when you hover on the title,
you can see right here, it has this color right here.
We can simply just change that
to black so there is no change,
is just basically a link. It's not going to change.
But again, very, very subjective.
You can add a link by day if you want to tackle style.
I'm gonna come down here to typography.
For the declaration.
We can go with none,
so it's not on the line, but again,
until you subjective or style,
we can go with italic bulb.
I'll just stick with the default.
All right, That's what a typography.
And then it down here,
you have the hover cut style.
Right now when you hover on the featured image,
you have kind of like this animation,
this fading animation.
And then with the black background,
you can click in there.
This is where you can change the animation.
So instead of fading in and you can do maybe like
a zoom in where it zooms in.
Or you can do a slide up, so you can see that.
And then of course you can change the
background color was well,
maybe make it something less
darkish me, something like this.
You can also change the icon, They'll be displayed.
You have all these options are available for you.
But I'm just going to leave this as it is.
I'm just changed the color
back to something a bit darker.
And that's okay, that's perfectly fine.
And that's it.
All right, so lastly we're gonna do is to simply
add the Read More post button.
So let's drag a button in here.
And I will say read more.
And now this link will go to the blog page, so forth.
Large blog aligned to the center.
And we're gonna make some changes as good to style.
The background.
For the bottom will be the orange color,
and then the text color, of course would be white.
Let's go to the topography which transform uppercase.
And let's actually say read more posts.
Read more posts, I believe them just take a look.
Yeah, it says Read more posts.
So we'd more posts.
And that's it.
Let's go back to style again.
For the typography, we're going to go back
in here style, the curation non.
So we don't have any on
the line button in there. And that's it.
You can add your borders and do other things as well,
but I think this should be fine for now.
So let's go ahead and update.
And that's it.
So you're more than welcome to style this.
Anyway, you want to, you don't necessarily have to use
the exact same colors or the exact same texts and so on.
And that's it.
So one more thing, one more thing we should do
before I round this up is to add
some space in between the gallery section and a blog,
as well as the block and the FUTA.
Let's go back real quick.
And of course we're going to edit
this section for our blog
and we're going to add some padding.
So let's go in here and it's section
go to Advanced unlink these values.
So top, Let's add 50.
Then bottom, we're going to add 15.
And then that should be enough.
Let's go ahead update.
One more time.
View the page. Scroll down,
and that is it.
So we've built out the blog page, German vin,
next video where we'll build out
the deals and packages section.