‫Welcome back, my dear students.
‫And now in this lecture of the course, we will be adding the recent post in our this particular page.
‫Now this page is already a static page.
‫And every of the thing that we have added are the static elements, which means that now if we go ahead
‫and we add a new post, this page is not going to be affected because everything is particularly static.
‫However, now we want to convert this static page.
‫This is going to be a static page, but we want to add a dynamic thing right after here so that every
‫time a new post is added we want to update that section.
‫Then how can we do that with this particular theme?
‫This is actually possible.
‫And what this team say is that you can use a developed, uh, widget that we offer for the Gutenberg,
‫and you can add that on your particular website to show the recent post.
‫How are you going to do that?
‫Let's just go ahead and let's take a look at it.
‫So what I want you to do is to click on the edit page so that you are taken to the edit page.
‫Now, once you are in the edit page, we need to add a new group.
‫But before adding the new group, let's rename this group.
‫So I'll be just clicking on these three dots.
‫And now I will rename this to our top.
‫Destinations and I will save.
‫This is our group name.
‫Now I will collapse this.
‫This is collapsed.
‫Now I'll be clicking on here and I will be adding a new group which is going to be in the design tab.
‫So this is our design.
‫And now in here you can see that we have got this group.
‫So I'll be clicking on here.
‫And this is going to be added.
‫Now what I'll do I'll select this uh one single layout which is going to be added.
‫And now after that I need to add a heading which is going to be the recent.
‫Visits recent visits like if you if you are building a travel blog, you can do it like this.
‫But let's suppose that I want to add a generic heading, which is going to be recent post.
‫Now this is also added and for that we need to add the post.
‫So how are we going to add the post?
‫Basically this theme allows us to add the post if you are using, uh, this Gutenberg editor, which
‫is the default.
‫So if you click on this plus and you go down, we have got this Blocksy widgets that we have over here.
‫And we can use these widgets to add the recent post on our website.
‫So what you can do, you just have to click on this advanced post.
‫And if you click on that it's going to be added.
‫It's going to tell you like what is going to be your layout, how you want the layout to be.
‫So you can click on choose a pattern.
‫You can click on create a custom one using the Gutenberg editor.
‫Now Gutenberg editor is not much really good right now, so that is why I would never recommend you
‫to create a custom layout, because you cannot do much of the customizations like we already did with
‫our website, uh, using the theme customizer.
‫So the way that this is designed, it's designed really good.
‫And designing this with the Gutenberg is really very complex.
‫It's really very hard.
‫So that is why for this particular project, I would recommend you to inherit this from the customizer
‫later.
‫Then in the upcoming projects.
‫Then I will also teach you.
‫Let's suppose that if you want to design each of the pages, each of the cards yourself where you want,
‫like if I need an icon, then I need something else over here.
‫Then I need this activities instead of here.
‫I need that to be here.
‫So how you can design that?
‫I'm going to be showing you and you can implement the same, uh, thing over there.
‫So let me show you the project that we're going to be building.
‫All right.
‫So this is going to be our fifth project.
‫And if I go into the all properties, all right, which just shows all of the properties.
‫Now this is also a card.
‫But right here you can see that I'm showing the price of the property.
‫Then I'm showing the location of the property.
‫Then I'm showing the category of the property, the size of the property, the number of the bedrooms.
‫So this is already designed, but this is actually a custom design that we will be talking later on
‫inside our fifth project.
‫And you can use this same, uh, strategy, same, uh, tips that I will be giving you in here to build
‫a custom layout for a blog website.
‫However, in a blog website, generally the things that are necessary, we have already covered that.
‫So now what I would recommend you to do is to click on inherit from the customizer.
‫But let's suppose that if you want to explore the other patterns as well.
‫So let's suppose that I say that I want to choose a pattern.
‫And if you click on this choose a pattern.
‫Then it's going to open up a pop up which is going to show you like how do you want to actually design
‫the look and feel of, uh, your post.
‫So let's suppose, let's suppose that I want to go with this one.
‫All right.
‫Uh, the post layout two, which is in a grid format, I click on that.
‫This is going to be added.
‫All right.
‫This is added.
‫Now what I can do, I can customize this my way.
‫So like, let's suppose that if I want the title to be bigger, then I can click on this title and I
‫can just go into this title and I can work with the sizing so I can increase that which is going to
‫be increased.
‫Or let's suppose that after that, then I want to add the category.
‫Then I can also add that.
‫So I can just click on the plus over here which is going to be added.
‫Now I can click on browse all and now I can go down and here inside the theme.
‫Then I if I go down then it shows you the custom of the taxonomies that you will be creating.
‫So let's suppose that I want to show the destination.
‫All right.
‫If I click on that it's going to be added because this was actually added in Abu Dhabi.
‫This is in Dubai, this was in Paris.
‫So it's going to show you like that.
‫But um, if we actually want to go with the Gutenberg, then we cannot design discard the way we want,
‫like we cannot do much more stylings like we are doing with this because this is designed using the
‫Elementor.
‫So if you want extra customization, then this is not possible, uh, with the Gutenberg, because Gutenberg
‫is not that much advanced.
‫It is mostly for the blog website.
‫So that is why I would recommend, instead of designing this layout, uh, what you should do, you
‫can click on this, this, these three dots, and then you can click on delete.
‫And instead of choosing a pattern and editing that pattern, you can click on inherit from the customizer.
‫And what this is going to do is that whatever the stylings that you have already done, it's going to
‫show you that and everything is now added over here.
‫The hover effects will work, everything will work.
‫The box shadow will be there.
‫It's it's now beautiful.
‫Now you can work with the limit.
‫Like how many of the posts you want to show.
‫So I say that I want to show six posts, which is right here, but it is not looking good because this
‫is the layout like first one, the second one, the third, fourth and fifth.
‫So if you are using this kind of layout, then it's better to go with the five.
‫So I'll be changing that to five and it's going to show only the five posts.
‫And this is how they are.
‫Similarly, if I want to show the pagination then I can click on that.
‫And the pagination is also going to be appearing up here on the home page.
‫However, I would not recommend you.
‫I will just recommend you to add only uh.
‫The latest post, which is going to be either five or if you want, you can also show only the two posts.
‫But I kind of like the five and I'll get rid of the pagination.
‫And now I will hit on update.
‫Now, if you are actually using Elementor and you want to add this kind of thing with the Elementor,
‫then how you're going to do that?
‫I will also share with you in the upcoming lectures probably.
‫So now let's just go ahead and let's go back to the home page.
‫Let's go down.
‫And now this is our page and this is how it looks.
‫The recent post.
‫All right.
‫And this is how it looks.
‫Now, let's suppose that in this recent post you want to add a different background because this is
‫already white and this is also white.
‫So let's suppose that you want this this to be of a different color.
‫All right then how you can do that.
‫For that you can actually uh create another group that is going to actually hold the background color.
‫Because let's suppose that if I just click on this group and then I go into the stylings and then I
‫go into the background.
‫And now let's suppose that I choose this background.
‫All right then if I just go ahead and if I hit on update.
‫And now if I go back to the website and I refresh this, then this is how the background is.
‫All right.
‫So what you can do instead is that you can click on this align and you can say that I need that to be
‫actually full width.
‫All right.
‫And then when you will go back to the website now you can see that this is how it actually looks.
‫So once I change that to the full width then this is how it is looking.
‫So you can work with this group.
‫You can create uh, if you have already added the group then it is recommended to always whenever you
‫are adding a section, always add a group so that it looks good.
‫And now what you can do you can click on here and you can actually rename this.
‫Post, and then you can go ahead and you can hit on save changes.
‫Now you can hit on update.
‫And now let's refresh.
‫And this is how the recent post are.
‫So now we are fully designed with our home page from the upcoming lectures I will share with you.
‫Like, let's suppose that if you want to design this kind of similar layout with the Elementor, then
‫how you're going to do that now, since you already know Elementor, I'll be designing the pretty basic
‫things like I'll be adding a section or a container.
‫The heading, the text.
‫This search bar is not possible to add.
‫And similarly, the destinations that we have over here, I'll show you like how you can add the destination.
‫This is already the similar that you can use with this one that we already design.
‫If you want to use the Elementor, then the main and the most important thing is that.
‫Let's suppose that if you want to show the recent post right over here, how you're going to show that
‫using the Elementor, this is something that we're going to be most importantly talking about in the
‫next lecture.
‫So stay tuned.
‫And by.