All language subtitles for 19. Adding Blog Posts To The Homepage (1)

So right now we have added the entire six blogs.

So what I'm going to do right now is I'm going to ask you after you add all of your blogs to go and

visit your website, mainly we're going to visit the home page because that is where we're going to

host the blog posts.

And if you search for the major brands, this is exactly what they do.

All the best blogs out there.

This is what they do.

They integrate their blogs in the first page right after the newsletter.

I would assume that's the proper placement.

So right now I'm going to go ahead and click edit with Elementor.

And this should be easy work.

Remember the plugin that we installed, unlimited elements that is going to allow us to add a blog over

here.

So I'm going to scroll down here and you can see these.

We don't really need these pictures or this section, so I'm just going to remove the entire section

and I'm going to keep this now instead of this upcoming events.

What I want to say is I want to say latest celebrity news.

So I'm going to copy that.

I'm going to come back over here, click on my heading and change that to this.

Now, notice that I've added an emoji over here.

Now you can add whatever emoji you want just like this.

So for instance, if you want to add a rocket, you can add that and you can add something else here

at the beginning, for instance, Now over here, I'm going to go and I'm going to go and get the posts

grid or post blocks.

Now this is the post blocks.

I'm going to drag and drop it right after the separator.

Like this.

And that's it.

Boom.

So right now, my blogs were added.

So what I'm going to do here, I'm going to click on my element.

I'm going to go to advanced and add some padding.

Now the padding I'm going to add, I'm going to unlink values together.

And from the top I'm going to add a 20.

No.

25 padding from the right hand side.

I'm going to make it 50 from the bottom.

I'm going to make it 25.

And from the left hand side, I'm going to make it 50.

Update So right now you can see this is how the stuff is looking right now.

Now, in this case, I'm going to click again here, make sure that I'm on the right place and I'm going

to go to content.

So right now, let's go ahead and edit this grid or this block over here, the grid gap.

Now it's set to 20.

You can make it less if you want.

So I'm just going to make it to ten and see how this that looks like.

So I think ten is pretty good.

Now over here text align to left.

Keep it like that.

The button here says read more.

I'm just going to keep it To read more and intro number of characters over here.

It's set to 100 now.

You can make it to be less.

For instance, if you want to make it 50, that will actually make it less and I'll just make it 50

in this case.

Now, in terms of the layout, you can click on the layout now you can show the image, show the category.

In my case here, the category is not shown, but if you decide to show it, it will show it here.

But it's not necessary to show that because we haven't really added any category to our posts.

So over here, show title, show, text, show button metadata.

We want to hide it time ago.

You can show that there's a clear indicator of when the blog post was posted.

I'm just going to move on here now.

Sequence entries, animation.

Now over here you can add a sequence entrance animation.

Now, in my case, I'm just going to add an appear animation like this.

Okay?

So the I'm going to leave everything as is and I'm going to go to posts query over here now here custom

posts post.

Right.

So here maximum posts.

So the maximum posts to show per page.

I'm going to make it to be six, which is precisely all the posts that we have over here.

Order by.

I'm going to order by the last or by by the by date because we want to show the most recent news or

the most recent added posts.

Now if I scroll down over here post pagination, now it's set to none.

Now I can actually add a pagination, but since I only have about six, there is no pagination here.

If I add another post and if I add pagination right here, people will be able to go from page one to

page two.

Now you can add a pagination widget or you can add numbers, but here it's not necessary for me to add

pagination since I only have about six blog posts.

And so over here in the advanced option show widget data for debug, I'm not going to do that.

So let's go to styling right now and let's add a little bit of a border radius.

I'm going to make it 20 border type solid.

I'm going to keep the border as it is and the box background actually, I'm going to set it up to be

entirely white.

Actually, it is already white.

Now, the box background image, you can add the background image to the boxes.

I'm not going to do that.

Now here, when it comes to the content content padding, now, if you remove the content padding,

look at what's going to happen, everything is going to feel cramped up.

So I'm going to add padding, but I'm going to make it 20 instead of 30, which was the initial padding

that was now over here.

If I go to the image image height, you can actually listen it.

You can make it 200.

For instance, If you make it 200, you can see it's a little smaller.

And that way I feel it's better now.

You can make it even bigger if you want.

You can make it like this.

Now, in my case, I'm satisfied with the 200 image height now.

Image Fit Cover Image position Center Center.

The category over here.

Category background.

Now, because we don't really have a category, it's not necessary for us to do this.

Let's go to the title here.

Now you can have a different title color for your title.

For these posts, I'm going to select a blue color, kind of dark blue color for my post title like

this.

And over here, title color hover.

So when people hover over your title, it turns black.

Now over here, I'm just going to go and take it to the top blue so that there is distinction.

People can clearly see that they are hovering over this now title spacing.

You can add a little bit of title spacing, but it's not necessary.

There is enough space, as it were, metadata here, there is no metadata.

So let's just not do that.

Let's move on to text now here.

When it comes to text, I want to make it black.

Okay.

So completely black, because that's a text text spacing.

Don't touch that.

And for the button here, let's go ahead and change the button background.

Now, the button background should be similar to this one over here.

That is why I'm going to click on this button.

And I'm going to go with a style here and I want to pick the color that we've used for this particular

button.

So I'm going to click on it.

Over here, the background type color, it doesn't really display the color here because we have changed

the button from the customizer.

So I'm just going to click on this.

Hopefully I can get the color from here.

So if I click on this, if I go to style, yep, this is the color.

So I'm going to copy this color and let me scroll down over here to this.

I'm going to click back.

Go to style and scroll down to the button, which is where we were.

And over here I'm going to go to the background color of the button and change this to this.

Right.

So right now the button is in the color.

We want the button hover color.

I'm going to make it blue like this so that when people hover over it, it turns blue and button text

color.

I'm going to keep it white button spacing.

I'm going to keep it as it is button border type.

I'm going to make it no border and over here, button typography.

I'm not going to choose anything.

And here hover effect.

Actually you can choose hover effect for your button, maybe pulse so that when we hover over it, it

kind of pulses.

And I kind of like that.

You know, people hovering over this gives an animation plus the animation of the posts.

This looks pretty awesome.

So I'm going to update and I'm going to do one more thing.

So I'm going to take you here to Advanced.

And I want to scroll down over here to the background and what I want to do.

I want to add a little bit of a shadow because mind you here, if I come back, you can see that there

is some shadow that adds an extra layer of definition that right there.

So I'm going to come here to background background type.

I'm going to click here.

And let's click over here now, I'm pretty sure here the layout.

Let's just see the padding kind of what what padding we've added over there.

Now over here, let's click on background again.

And over here.

Color.

Well, actually, what I'm going to do here, I'm going to quit the background and I'm going to go to

border instead and I'm going to go to border type here, No border.

And I'm going to do one thing, which is here, the box shadow.

So once you click on the box Shadow, you can see here the color.

I'm going to make it kind of like black, right like this.

And you can see that we've added a border right there, a shadow right there.

Now, the thing here is I'm going to select a border.

Why not?

Let's click on Solid.

Right.

So here, solid border.

For here.

The border radius, the hover.

Now, no need for us to do anything more.

Now, what I'm going to do here is I'm going to click back on style.

And let me see what we can do more to make this look a little bit better.

Now maybe we can add a border color, a box, border color here.

So let's go for solid.

Let's make it two.

And that will do.

And so here let's go to the other stuff here.

Box border radius box, border color.

Now let's change the box border color to kind of kind of darker like this.

And I feel like this is pretty good.

I don't know about you guys, but I think this is pretty good.

Maybe we can add a little bit of transparency to it like this.

Our box.

Background box.

Background color.

Now if I add the box background color.

Maybe make it a little bit less white.

Or maybe let's make it light blue.

That will make it a little bit different.

Kind of like this.

Yep.

So, you know, I think I think it's pretty cool, but I think I'm just going to go back to the, to

the white one, you know, So I'm just going to go back and update.

So now we have our pretty good looking blog.

And so over here, latest celebrity news, I'm pretty sure here it displays bigger.

So I'm going to go and make this bigger, kind of like this big in this size.

So to keep the consistency, I'm going to click here and what I'm going to do, I'm going to go to style

here and I'm going to click on typography.

So here I styled this at 50 pixels, so I'm going to make this one as well, 50 pixels.

Click on it, go back over here and change it to 50 pixels.

Okay, so this way is better.

I'm going to go to transform, capitalize instead of uppercase.

And there you go.

So right now we have our beautiful looking blog section.

So right now what we're looking to do is we're going to go ahead and build the mission statement plus

the about us and we're going to optimize the homepage for mobile.

Then we're going to move to the blog page to create the blog page and optimize the blog page.