‫Welcome back to your students.
‫And now in this lecture of the course, we will be working up with the home page design.
‫So let's just go ahead and let's get started.
‫Now as you can see that we have already created this home page over here.
‫This is already designed.
‫But let's suppose that if you want to add, uh, basically a hero image, and then we want to show something
‫like the list of the top destinations after that.
‫And then we want to show some of the latest post right after that instead of just adding the post.
‫All right.
‫We want to just like, uh, tell the users that, okay, you are on the home page and on the hero section.
‫Let's suppose that if you want to add a search box over here like this that we have over here, if you
‫want to add a search box like that, then how can we do that?
‫These type of things we're going to be, uh, doing inside this particular page.
‫Now, to edit this page, we have to basically exit out of this customize that we have over here.
‫Because this theme customizer that we have over here, it is going to only allow us to change the styling
‫of the card.
‫So whatever we are going to be changing in here, it's going to be applied here.
‫Now let's suppose that if you want to add anything on top like a hero image and everything, then how
‫can we do that?
‫For that you have to convert this page into a static page.
‫Now when you will convert this page into a static page, then you will be able to use the page builders
‫like Elementor or the Gutenberg to design your post page or design your home page right here.
‫Now we're going to be diving deeper into this like I'm going to be, uh, comparing the Elementor and
‫the Gutenberg for a blog website in this particular lecture.
‫And then we're going to be going up or sticking up with one of the page editor I'm going to be sharing
‫with you both the methods, like if you want to go with the Elementor, how you can do that.
‫If you want to go with the Gutenberg, then how you can do that.
‫So we're going to be comparing these two in this particular lecture.
‫So let's just go ahead and let's get started.
‫First of all we have to tell our theme that instead of using this dynamic page that is already here,
‫we want to use a static page.
‫And for that we have to create a page that is going to be a static page.
‫So you need to go into the pages and then you have to go into all pages.
‫These are the pages by the default.
‫The about page is already here which we created.
‫Now we will be creating a home page.
‫So we will click on Add New.
‫And now in here we will type in home.
‫And now we will hit on publish.
‫Now once this page is going to be published now we will be going ahead and we will be assigning our
‫home page to be the home page.
‫So how are we going to do that.
‫You can go into the dashboard and once you are in the dashboard you have to go into the settings.
‫And then you have to go into the reading.
‫And in here it says your home page displays latest post or a static page.
‫So we will select we need it to be a static page.
‫And we will select our home page to be the home page.
‫That's it.
‫And now we can hit on save changes.
‫So now once the changes are actually saved, now if you go into the disc website again and you refresh,
‫then you can see that we have got this home over here, which is empty.
‫And now we are able to design this page either with the Elementor or we can go with the Gutenberg.
‫Now there is one more thing that you can do.
‫All right.
‫So you can do create another page by going into add new.
‫All right.
‫And you can name this page as blog.
‫Or you can name this page as all posts.
‫All right.
‫And then you can click on publish.
‫This page is going to be published.
‫Now you can click on view page.
‫And this is how the page is.
‫Now what you can do inside here you can select post page to be all posts.
‫Now we have to refresh this so that it just like gets uh, reload all of the list of the pages and I
‫will select all post.
‫And now I will click on Save Changes.
‫And now once the changes are saved.
‫Now if I refresh this then you can see that this page is going to show all of the post right here.
‫So the home page that we had is now actually on this all post page.
‫Now if you want to add this page, if you want to show all of the post then you can do that.
‫And now let's suppose that you want to show the title of the all post as well.
‫So you can go into the customize, and then you can go into the blog post, and then you can show the
‫title and it's going to show the all post.
‫All right.
‫But I would recommend you not to create an all post page because previously people used to create the
‫all post pages, but now the trend is changing and now you can add some of the latest post in the home
‫page.
‫That's it.
‫The destinations categories.
‫These pages are enough.
‫You do not actually need to create an all post page specifically for that.
‫So what you can do, you can just click on cross.
‫And then you can go into the All post page, click on select like this is not selected.
‫Then you can hit on save changes.
‫And now, once the changes are saved, you can go back to the all pages and you can get rid of the all
‫post page.
‫Now if you want to add it.
‫That is how you can add that.
‫And it's going to show all of the posts like that.
‫But now since we have deleted it, it's now going to give us a 404 error because that page does not
‫exist.
‫So now we are here back to square one.
‫This is our home page.
‫And now we have to design this page.
‫All right my dear students.
‫So now how are we going to design this page.
‫For that you have to actually go into the edit page.
‫And this is going to be the editor, which is going to be the Gutenberg editor.
‫And you can make the full use of it to design this.
‫Now before designing, there are a few things that I want you to do.
‫I want you to make sure that you get rid of everything that we have over here.
‫Like, you can see that we have got this home title.
‫We need to get rid of that.
‫There is going to be some of the spacing from the top and from the bottom as well.
‫So we need to get rid of that.
‫Now there are two ways to do that.
‫So number one is that you can go into the edit for the home page.
‫All right.
‫And once you are in here then you have to go into the Blocksy page settings.
‫Now once you are in here we have got the page title.
‫So if you click on that it says inherit, which means that whatever the settings that you will be doing
‫inside the theme customizer of the pages.
‫Like whatever these settings that we will be doing in here, it is going to inherit that from here.
‫So like let's suppose that in the theme Customizer we say that on all of our static pages, whether
‫it's home, whether it's about or whether it's advertised that we can create later on, we do not want
‫to show the title for that.
‫So if we select this, then the title is going to be hidden from every of the page, whether it's about
‫whether it's this, it's going to be applied to every of the page.
‫However, if you want to show the title.
‫And you want to do the customization yourself right here to each individual page.
‫Then you have to click on the Be the Block settings, and you can do it right from here to the each
‫individual page.
‫So if you want to do it to every single page, like for every single static page like home about contact
‫advertise, you want to design those pages using either the Gutenberg or the Elementor.
‫Then I would recommend you to do it right from here, so you do not have to do every of the changes
‫inside the Blocksy settings.
‫Otherwise, if you are unsure if you will be using the Gutenberg or the Elementor or basically any of
‫the page builder to design all of your static pages, then you cannot do the customization over here.
‫So let me first do the customization to each of the individual page, and then we will be doing it completely
‫on the website so that you can see how the pages are being affected.
‫All right.
‫I wanted to show you the practical way.
‫All right.
‫So first of all, let's just exit out of the theme customizer I haven't changed any of the settings
‫over here.
‫Everything is default.
‫And now let's do the changes over here.
‫So first of all what I'll do I'll go into go back.
‫This is a blog setting.
‫All right.
‫Now what I want to do I want to get rid of the home title.
‫So I'll be just clicking on the Blocksy settings.
‫Click on the page title and I will say that I want to disable this.
‫All right.
‫This is going to be disabled.
‫The title and I will hit on update.
‫Now once this is going to be updated.
‫Now if I refresh this page then you can see that the title is gone from the home page.
‫But on the about page the title is still here.
‫And the reason for that is because I have removed the title from the individual page.
‫Similarly, now if I just go ahead and if I click on the edit with Elementor, it's going to take me
‫to the Elementor editor.
‫Now, I do not want you to install the Elementor right now.
‫I'm just showing you, for the tutorial purposes, like how it's going to work.
‫Then what I do, I just drag a heading and I drop it over here.
‫The heading is going to be edit.
‫And now if I just show you this.
‫Inside this section.
‫I still have got some of the wide spacing from the top, and I also have got some of the white spacing
‫from the bottom.
‫So if I were to click on this arrow, then you can see that this there is some of the white spacing.
‫And what I want to do, I want to get rid of that so that whenever I'm going to be adding any of the
‫hero image or the hero section with the background image like this.
‫So let's suppose that I want to add a hero section like this.
‫Then I do not want any of the white spacing over here.
‫Whether I design this using the Gutenberg or the Elementor.
‫That is actually the second part.
‫But even if I use any other page editor page builder, then I do not want to actually add this spacing
‫on top.
‫So what I will do for that I will click on update.
‫I will update this page.
‫And then I will click on here and I will click on exit.
‫So I will exit out and it says exit.
‫To this post I will click on Apply Leave.
‫And now here I am at the home page again.
‫Now what I will do, I will go into the Blocksy settings.
‫And now in here, if I go down I've got content area, vertical spacing.
‫So what I will do, I will say that I want to not inherit it.
‫Whatever the setting that I will be doing in the Theme Customizer, I will click on custom.
‫And here it says that there is going to be some of the spacing from the top and the bottom.
‫So what I will do, I will say that I do not need any of this spacing from the top and the bottom,
‫and I need it to be disabled.
‫Now if I hit on update, and now if I just click on edit with Elementor again, it's going to redirect
‫me back to the Elementor.
‫And the spacing that was there is now gone.
‫And now I can actually use the Elementor to design this full page.
‫Now, similarly, let's suppose that instead of applying these settings to individual pages, individual
‫static pages that I will be creating, I need a one single rule.
‫Like I want to apply that to each of the pages that I will be creating later on.
‫Like, you can see that I've got this about page and I need that to be applied over here.
‫So what I will do for that I will click on customize.
‫And once I am in the theme customizer, then I will go into the pages.
‫I will say I do not want the page title, I will hide it and I do not want the spacing from the top
‫and the bottom.
‫I'll click on disable no spacing and this is going to be applied to every single of the pages that I
‫will be creating, and I do not have to now go into the Blocksy settings and do the changes to each
‫individual pages.
‫Now this is relevant only if you want to use the page builder.
‫Otherwise, if you want to just like add the content, add the simple heading, then it's up to you.
‫But I would recommend you to do it on the Theme Customizer and design every single static page with
‫the Gutenberg.
‫Now the reason why I'm saying with the Gutenberg and not with the Elementor, let me explain that to
‫you.
‫So now we are here in the home page.
‫All right.
‫I will be now clicking on the edit with Elementor so that I'm taken to the Elementor.
‫And now for the about page.
‫We will be now seeing this on the Gutenberg.
‫We will not be using the Elementor for the about page, but for the home page we are going to be.
‫Let's suppose that we are actually using the Elementor.
‫All right.
‫So now Elementor is a very rich page builder.
‫It's amazing.
‫It's super awesome, and it's really very great.
‫However, there are some cons for that as well.
‫And let's take a look at that.
‫Now, if I am actually in the Elementor editor now, you can see that I can actually design every single
‫of the thing.
‫I can add hover effects, like if I go down, these are the hover effects on the buttons on the images
‫right here.
‫The website looks really very classy.
‫All right.
‫It's the best page builder.
‫In fact, however, the con that I want to share with you is that if you go down, then there are the
‫things that the Elementor offers.
‫But now let's suppose that if we want to add a search box that is not the option over here, we will
‫have to actually buy the Elementor Pro in order to add these kind of things.
‫Similarly.
‫Now let's suppose that if I actually want to add, uh, some of the latest post.
‫All right.
‫So if I just go up, then if I want to add some of the latest posts, like I want to show the five posts,
‫then if I just drag this, it says upgrade, upgrade to the Pro version.
‫But for building a blog website, like all these kind of things that the Elementor offers can be done
‫with the Gutenberg with much more customizations, like very much similar customizations.
‫There are some of the cons for the Gutenberg as well, and we will be talking about that.
‫Like if you care about the design so much and you think that you do not want to show the latest post
‫right down, you can still show the latest post with a shortcode that I will be sharing with you.
‫But let's suppose that if you want to add a search option over here so that that allows the people to
‫search the entire website.
‫So if you want these kind of things on the home page, then using Elementor is not a good choice because
‫you cannot add that, uh, using the, uh, main Elementor over here.
‫However, if you go with the Gutenberg, then you have those options.
‫And there are also some kind of cons with the Gutenberg that I will be telling you right now.
‫So let's take a look at now the Gutenberg that we have over here.
‫Now, what I can do, I can click on the plus button.
‫And these are the things that I can add right here.
‫So if I just go down.
‫Then I have got this block C settings over here.
‫And now here you can see that I have got the search option.
‫So what I can do I can just click on that.
‫It's going to be added over here and it's going to allow now the users to search the entire website.
‫So this is right here.
‫This is the search box added.
‫Now we're going to be styling.
‫Everything's later on in the upcoming lectures.
‫So now if I were to hit on update and if I were to view this page, now you can see that this is the
‫search box that is added to the about page.
‫And now I can type in there anything like alarm.
‫And this is added similarly.
‫Now I can do much more customizations to this particular search as well.
‫Now remember this search widget is only available if you are using the Blocksy theme.
‫All right.
‫So I can just click on the live search.
‫All right.
‫Now I can hit on update.
‫And now I can click on View the page.
‫And now if I just search for alarm then it's going a live search for that.
‫And it's going to show me the search results right over here.
‫So this is a great way to design a very much interactive website.
‫If you are going to be using the Gutenberg, because one of the great things of the Gutenberg is that
‫whatever theme that you are going to be using, if that theme offers some of the extra functionality,
‫then that particular functionality will be shown to you right over here with the name of the theme.
‫So these are the widgets that are provided by the theme that we are using, which is the Blocksy.
‫In case of the Elementor.
‫Elementor does not allow these kind of things.
‫All right.
‫So that is why there are no options for us to add any of the widget for the Blocksy theme.
‫And we cannot build a really great website.
‫Now let's talk about the cons of the Gutenberg.
‫Now, the cons of the Gutenberg are that Gutenberg is not a very much rich page builder.
‫It does not rely on the hover effects animations that you can do.
‫Like if I just go up to the top and if I refresh this page, you can see that there is going to be the
‫counter.
‫These kind of things, these are really very good, but these are good for a corporate website, for
‫an ecommerce website, for any other website, for a blog website, you really do not care about the
‫animations and the hover effects and these kind of things.
‫So that is why for the blog website, I would suggest go with the default page builder that WordPress
‫comes with, which is the Gutenberg.
‫And I won't also want to tell you again that WordPress was basically released because a blogging software
‫was discontinued.
‫So for building a blog website using the default WordPress things is the number one choice, and you
‫should be sticking up with that.
‫And you can add many, many, many functionalities.
‫Now we will be using the Gutenberg for designing the homepage.
‫I will also show you how you can go ahead and how you can design the homepage with the Elementor as
‫well.
‫But first we will be actually designing this page with the Gutenberg.
‫So what I need you to do for that, I need you to exit out.
‫On the home page.
‫Now on the home page, you can see that this is the page that we have already designed with the Elementor.
‫So it tells you to edit with Elementor.
‫So we will say we want to back to the WordPress editor, and we will click on continue so that whatever
‫the contents that is going to be added in here is going to be gone.
‫All right.
‫And now we will refresh this page.
‫This is right here at it.
‫Now I can just click on here on the three dots and I can delete.
‫And this is empty now.
‫And now I will hit on update.
‫So make sure you go ahead.
‫You exit out of the Elementor and you just switch to the Gutenberg for the home page.
‫And then if you want to design it with the Elementor, then you can watch the skip the next section,
‫and then you can watch the Elementor section.
‫But I would actually recommend you to learn this Gutenberg as well.
‫And the reason for that is because let's suppose that now you go into the freelancing world, you get
‫your paying client, and the client wants you to edit a website that is built with the Gutenberg.
‫Then you will not tell your client that, hey man, I don't know how to work with the Gutenberg.
‫How do I, uh, basically do that or do that?
‫Uh, you will have to eventually learn Gutenberg, so why not learn it now so that whenever you get
‫your client and if that client website is actually on the Gutenberg, then you should know how to edit
‫it.
‫So it's a really, really, really plus thing.
‫I personally hate Gutenberg for the corporate website.
‫I do not like it to be very honest.
‫I do not like it.
‫But for a blog website it is really very amazing and you will see it yourself.
‫So from the next lecture of the course, we will be understanding Gutenberg in a much deeper way.
‫We're going to be designing this home page and it's going to look beautiful.
‫Don't worry about it.
‫It's not going to be that much amazing like we built this website, but it's going to be somewhat kind
‫of good for a blog website.
‫So from the next lecture of the course, we will be working up with the Gutenberg.
‫And then I will also show you if you want to use the Elementor then how you can do that.
‫So stay tuned and bye bye.