‫Welcome back, my dear students.
‫And now in this lecture of the course, we will be designing the hero section using the Gutenberg for
‫our home page.
‫So let's just go ahead and let's get started.
‫Now what I want you to do is to just imagine how we build a hero section using the Elementor.
‫So first of all, what we do is that we add a container or a section, and then what we do, we add
‫the elements inside it.
‫Or if you say the widgets inside it, and then we go into the settings of that section or the container.
‫And then we add the background image.
‫And after that what we do, we add the overlay on top of it.
‫And then voila our section our hero section is completed.
‫Then similar approach is going to be applied.
‫If you want to design a hero section using the Gutenberg.
‫So let's just go ahead and let's add that now for the Gutenberg.
‫If you are going to be using the Gutenberg, then how you're going to design that.
‫First of all you have to click on this plus.
‫And once you have clicked on that then you have to go down.
‫And you can now see that we have got this design tab.
‫So in this design tab there are going to be all of the elements that you can use to enhance your design
‫and how you're going to do that.
‫First of all we have to add a section like we add in the Elementor.
‫And that section in the Gutenberg is actually called a group.
‫So what we will do, we will click on this group.
‫And that is going to be added.
‫Now here it says what is going to be your layout for your group.
‫So what we will do, we will say that we want to add a one single column like all right.
‫And inside that column you will be adding the heading.
‫And we will be adding the text.
‫We will be adding different types of things.
‫All right.
‫So what we will do we will click on this.
‫And that group is now actually added.
‫Now what we will do is that we want to actually add a background image.
‫So how are we going to add the background image?
‫First of all, we have to add some text in it so that we can compare everything.
‫So what you can do is that after selecting the column or the layout, you have to click on Add block.
‫And this is going to show up a pop up like that where we will select.
‫We want to add the heading.
‫If you do not see it you can search here.
‫So let's click on the heading.
‫And that heading is going to be added.
‫Now what we will do we will write here the travel blog.
‫Like let's suppose that this is the heading.
‫Now we want to actually see how everything is happening.
‫So for that what I would recommend you is to click on these three dots that says Document overview in
‫the Elementor.
‫It's actually the navigator.
‫Now I'm comparing everything with the Elementor so that you can basically, uh, get a better idea.
‫All right.
‫So what you need to do is to click on these three dots.
‫And now you can see that we have got a group.
‫And inside we have got a heading.
‫So this is now our section.
‫And inside here we have got a heading.
‫So this group is actually holding this heading.
‫All right.
‫Now what we want to do we want to add a paragraph after that.
‫So we will just click on the plus.
‫We will click on paragraph.
‫That is also going to be added.
‫And now what we can do we can go to the Lipscomb and we can copy the first paragraph.
‫So let's go down.
‫Let's click on Generate Lorem ipsum and let's copy the first paragraph.
‫And now let's come up here and let's paste this.
‫Now this is our first paragraph.
‫Now if I click on the navigator again then this is my group inside here I've got the heading.
‫And inside here I've got the paragraph.
‫Now in the Elementor.
‫What we do is that after we have edit the elements or we have edit the widgets, we want to now apply
‫a background image.
‫So what we can do for that we can click on this group or we can right click on that section in the Elementor.
‫And once we click on this group there is going to be the options that will be given to us.
‫If you do not see this option, click on this button right here that shows the settings and these options
‫will be given to you.
‫So these options are basically the stylings that you can do for this particular group that we have over
‫here.
‫Now here you can work with the layout.
‫How much of the width is going to be everything.
‫Where would you like to align them to the center left, wherever you want to do it.
‫Similarly, you can also style this in the styling tab.
‫So first of all what we will do, we will click on this styles and we will be taken into the styles
‫tab.
‫Remember the styles tab is also in the Elementor as well.
‫This is kind of like that.
‫Then what we want to do we want to apply a background image.
‫So we will click on the background image.
‫It says upload or open the media library.
‫We can click on open the media library.
‫We can drag our image.
‫And now we can drop the image.
‫And that image is going to be added.
‫Now let's suppose that we want to use this image as our cover image.
‫We can click on select.
‫And now this is actually applied as the background image.
‫So this is how you can see that everything is working so far.
‫All right.
‫So now once we have actually added the background image, now what we want to do, we want to apply
‫a background overlay on top of this so that the text can be visible.
‫All right.
‫And we also want to change the text color to white as well.
‫But before doing that we first have to apply the background overlay.
‫And on the Gutenberg you may not have that option.
‫So they may the WordPress may add this background overlay option in the future.
‫But at the time I'm recording this lecture there is no option for that.
‫And that is why you have to create another group in order to add the background overlay and how we're
‫going to do that.
‫Let me share with you.
‫So first of all, what we will do, we will create two groups.
‫One is going to hold the background image.
‫The other group is going to hold the background overlay.
‫And inside that group there is going to be our title.
‫Then there is going to be a paragraph.
‫So let's just go ahead and let's see how we can do that.
‫We're going to keep these over here.
‫All right.
‫We will click on this group.
‫We will now click on this plus button.
‫And we will say that we need a group.
‫All right.
‫That group is actually added.
‫Now we will say that we want this group to be actually a one single column.
‫And that group is now added.
‫And now if we click on the navigator we have got a one group which is this.
‫And the other group which is this that we have just created.
‫So now what we will do.
‫We will open this group.
‫We will bring this heading and we will add it inside this group.
‫This is not added inside here.
‫So we need to bring this and drag this over here a bit.
‫Just bring it up to the group so that this shows, uh, the line is going to be showing up here.
‫All right.
‫So just see it.
‫The line will be shown over here.
‫Now when I drag this heading and I bring it up on the group, then you can see that there is actually
‫a line that is showing that this will go inside this group.
‫All right.
‫So once I drop this then inside this group I've got the heading.
‫Then I bring this paragraph.
‫I drag this and I add it below here.
‫If I just go down, it's going to be added right outside the group.
‫But I want to add it inside the group.
‫So I'll just bring it and drag it over here and I'll leave it.
‫And now inside this group I have got every of these things.
‫And inside this group, this group is now empty.
‫So now what I will do is that I will place this group inside this group.
‫So I'll just drag this and I'll bring it up to the top.
‫And when you will bring it up to the top, it will just go here.
‫So you do not need to do that.
‫Just when you bring up to the top, just hold your mouse over here.
‫All right.
‫To this title, to this group title and then leave it.
‫And once you do that now this group is actually now the subgroup of the main group that actually holds
‫the image.
‫So if we now select the parent group which is the main group.
‫And if you now click on the settings of that, we have got a background image.
‫And if you now click on the second group which is this group.
‫And now if you click on the styles and if you click on the background, now you can add a background
‫color on top of it.
‫So now let's suppose that I want a gray background color which is going to be added on top of the image,
‫which is the image which is behind this group.
‫Now I will click on here and I will work with the transparency.
‫So now I will drag this.
‫And this is by far the best.
‫But however, if you are using a cover image, then I would suggest using the plain black colour rather
‫than using the uh, this one, the greyish one.
‫So I'll be sticking to the black.
‫And now I will click on here and I will work with the transparency a bit.
‫So this seems perfectly fine to me.
‫Now we are fully done with our background or the hero section.
‫Now what we will do, we will click on our heading.
‫So just click on that and then you have to go into the stylings for this heading, which is going to
‫be added over here.
‫You can now work with the text.
‫We will change that to white.
‫We will now click on the paragraph and we will now work with the stylings.
‫And we will change that to white as well.
‫And now you can see that this is how the this hero section looks like now.
‫It's still ugly, but we're going to do the changes right now.
‫So first of all, what we need to do we need to click on the update.
‫And once this is going to be updated.
‫Now if we click on the view page now you can see that this is how it actually looks like.
‫So this is our now section.
‫Now what we want to do is that we want to make it to be full width.
‫All right.
‫So that it takes the full width of the page.
‫And how are we going to do that.
‫We have to click on the edit page.
‫And once we are here now, we have to click on the navigator again.
‫This is our group and this is our group.
‫So what you need to do is that you need to click on this group.
‫And once you will click on this group.
‫Now here you can see that we have got this option over here that says if you need it to be full width
‫or what.
‫So first of all we will select our main group.
‫All right which is this which is holding the other group.
‫And once we have selected our main group we will click on this icon that says align.
‫We will click on that.
‫And here it says wide width or the full width.
‫We will say that we need it to be full width.
‫And once we're done with that now we can hit on update.
‫And once we're done with that now we will click on view page.
‫And once we do that now you can see that the parent container is now in the full width.
‫However, the second group which was there that holds the overlay on top of it is now actually not full
‫width.
‫So what we will do, we will click on the edit page again.
‫And now we will click on this navigator.
‫We will click on this group.
‫This is the one that we have already done.
‫Now we will click on the second group.
‫It shows this.
‫And now we will click on this align.
‫And we will say that we need this to be full width.
‫And once we do that now we can hit on update.
‫And now we can click on view page.
‫And now you can see that this is how it actually looks like.
‫So now this is.
‫That we have done till here.
‫Now what we need to do, we need to add some of the padding from the top and the bottom so that it just
‫covers some of the page.
‫And then we were going to be doing some other things.
‫So let's just go ahead and let's click on edit page.
‫Now when you are actually working with the Gutenberg uh, and you are designing the page, I would recommend
‫you, uh, just press control or command and then uh, basically hold that and then press minus so that
‫your screen gets zoomed out a bit and you do not have to basically view the page again to see the changes.
‫Otherwise it's going to be really much hectic for you to go to the page again and then view the page.
‫So that is why I would recommend you to do that.
‫But since I already have a much bigger screen, I'll be setting this to reset and this is pretty much
‫fine for me.
‫But if you have, if you are building the website on a laptop, then you can press control and hold
‫the command or control and then just press minus so that it just, uh, zoom out the screen a bit.
‫All right.
‫Now what we want to do, we want to actually add the padding.
‫So how are we going to add the padding.
‫We have to click on the document overview which is the navigator.
‫We will now select our second group.
‫So the padding that we will be adding to the second group it will be automatically applied to the first
‫first group as well to not apply to the first group.
‫Otherwise there is going to be the overlay.
‫Uh left.
‫All right.
‫So let me show you.
‫If I just go into the first group and then I click on the stylings and then I go down, and now you
‫can see that I have got the padding which is top and the bottom padding.
‫If I increase that, then you can see that this is the image over here.
‫The padding is over there, but the overlay is right here.
‫Because from the inside of this group the padding is being applied.
‫So what I would recommend get rid of the padding from the first group.
‫Select the second group that holds the overlay.
‫Then go into the styles.
‫Then go down and add the top and the bottom padding so that it looks good.
‫Now similarly, you can go up to seven, but if you want to add the padding in the pixels, then you
‫can click on this icon that selects set Custom size.
‫So once you select Use Size Preset or select the custom size, this is going to be turned into REM,
‫which is actually the sizing pixels.
‫And what you can do is that now you can further increase that.
‫So you get much more uh, of the spacing.
‫So now what I'll be doing is that I will be actually clicking on here, and I will change the value
‫into pixels so that I can add the value in pixels.
‫And now I will increase this till I get a perfect spot.
‫And this seems like perfect to me.
‫And now what I can do is that I can hit on update.
‫This is going to be updated.
‫And once the page gets updated.
‫Now if I click on view page.
‫Now you can see that this is how it actually looks like.
‫Now I want to say one thing.
‫This Gutenberg might seem a little bit confusing to you right now, but do not worry.
‫I would recommend you to rewatch this lecture after this is done so that you can better understand that.
‫After that, what we want to do, we want to bring this text into the center so that it looks good.
‫So what we will do, we will click on the edit page.
‫And once we are in here we will click on this overview.
‫Again we will open our group.
‫Open our group select our heading.
‫This is edit.
‫And now we will actually align the text into the center.
‫Now you can see that this is added.
‫Similarly.
‫We will also change the heading level to one.
‫And the reason for that is because this is actually the main heading, the first heading of our website
‫home page.
‫All right.
‫Similarly then we will click on the paragraph and we will also align this text into the center.
‫And this is how it looks.
‫Now if you want you can also make this heading to be a much more bigger size.
‫So you can click on that.
‫Then we have got the size.
‫You can select small medium, large extra large triple uh double XL.
‫Or if you need a custom value then you can click on here.
‫And it's going to show you the value in pixel and whatever you want to select.
‫You can do that.
‫So I will just select the Excel value from here.
‫I think this is perfectly fine.
‫Now you can see that our hero section is almost done.
‫But there are some things that I want to do and that is let me show you.
‫I will be going ahead and I will be updating the page.
‫And now I will be viewing the page again.
‫Now you can see that there this, uh, of the paragraph that I have added, it's so much big and that
‫is why I need it to be right in this much area, like the one that we did with our corporate website.
‫So if I were to show you, you can see that the logo is here, but the text that we have over here is
‫only in here.
‫And this looks much more better, much more crispier.
‫So I want to go with that.
‫So how I'm going to do that?
‫For that, what you need to do is to go into the page editor, select your group, the main, uh, the
‫parent, the child group that is holding your content.
‫And once you have selected that, then you have to come up here and you have to tell, like how much
‫of the, uh, the sizing, the weight, the width of the, of your content is going to be.
‫So now here in the content value, let's suppose that I add 800 pixels and then I just go ahead and
‫I hit on update.
‫And now if I refresh this page.
‫You can see that now it it is actually looking much more better.
‫And after that what I want to do, I want to add a search over here.
‫So for that I will go back to the home page.
‫And now I will click on the plus.
‫Uh, but before adding that first of all, make sure that you have your group selected.
‫Then click on the plus and you have to go down where you see this Blocksy settings.
‫All right.
‫And in here we've got this advanced search.
‫If you click on that it's going to be added.
‫To search is added.
‫Now you can see that the search is added right after this overlay.
‫So if you click on this navigator over here then you can see that the search is actually added in this
‫group but not in this group.
‫So if we open up this group then this group is right here.
‫So what we want to do is that we want to drag this search and drop it right after the paragraph.
‫And this is going to be now added inside our this group.
‫All right.
‫So this is now our search.
‫Now what we want to do is that we want to design this or we want to work with the settings of that.
‫So first of all we have got this input height.
‫You can work with that.
‫We have got the live results which is going to give the live results.
‫We have also got the taxonomy filter.
‫So which is going to allow the users to select the category and then search.
‫I do not want to add that, uh, it looks kind of bit ugly, but if you want you can do that for the
‫travel blog.
‫It's not really necessary to add that.
‫So I'll just uncheck that.
‫And then I've got this, uh, search through criteria, which means that whether you want to search
‫the post and the pages or just only the post, I want only the post.
‫So I will uncheck that.
‫And now we will go into these stylings.
‫So we have got the margin.
‫We do not want to work with the margin.
‫We have got the border radius.
‫If you need it to be rounded you can work with the border radius, increase that and this is going to
‫be turned into rounded.
‫Similarly we have got the input font color which is going to be right here.
‫So I'm going to be adding the font color to be white.
‫And the focus, which means that when the person will click on that and enter the value, enter the
‫search results.
‫Then what you want the focus color to be so you can choose anything.
‫I want to keep it to be default.
‫Then we have got the input border color, which is going to be this which is actually the white border.
‫All right.
‫So you can click on Advanced Search.
‫And then you can go in here and you can I want to actually add the border color to be white on the focus.
‫So if I just click on here you can see that it turns into the focus mode which means that this is actually
‫focused now.
‫So for the focus I need the border to be actually white.
‫So I will click on white.
‫And now if I click on here you can see it turns it remains into the white color.
‫Then I've got the background color.
‫I do not want to add any of the background color.
‫It looks good without the background color.
‫After that we have got the icon color.
‫So the icon color I need it to be white.
‫And the icon color is now white.
‫All right.
‫So once you're done with now the button color, then what we will do is that we will keep every of the
‫settings to be default.
‫And now we will click on update.
‫So let's update the page.
‫And now once the page gets updated.
‫Now if you go back to the website and you refresh this.
‫So now we are done with the search.
‫And now let's suppose that if I search for lorem it's going to search for that.
‫These are the results.
‫Everything is working fine.
‫Even if I hit on enter then it's going to give me the search results for the alarm.
‫Or if I just search for the alarm right here, then there is going to be post being shown.
‫I can choose any of the posts and it's going to redirect me to that particular post.
‫So our hero section for this blog page is now ready.
‫Now from the next lecture of the course, we will be actually adding the other things.
‫Uh, I will show you.
‫Like.
‫Let's suppose that if you want to show some of the top destinations you want to show them, uh, like
‫this, if I go down, then you can see that for the meet the team.
‫Uh, just keep this thing in mind, like how we design this.
‫Now, let's suppose that instead of this team members, you want to show the destination name.
‫And then right there, you want to show a button like view the destination view all post or view.
‫Just simple view.
‫So the person can click on that.
‫And by clicking on that he will be redirected to that particular destination.
‫So let's suppose that if you want to design something like that, then how we can design that.
‫We're going to be learning that from the next lecture.
‫Now before ending this lecture, I just want to say one more thing.
‫Uh, I am basically teaching this Gutenberg lectures in a very slow pace.
‫And the reason for that is because you are learning this for the first time.
‫So it will take some time for you to get a good grasp on the Gutenberg.
‫But you should know and keep this thing in mind.
‫It will really help you in the future.
‫So that is why you should know how everything is actually working.
‫I would also recommend if there are any of the confusions, go ahead and rewatch the video and also
‫implement while watching the video so that you can really understand how each and every thing is actually
‫working.
‫Now, from the next lecture of the course, we will be working up with the top destination design.