‫Welcome back, my dear students.
‫And now in this lecture of the course we will be adding the destination section.
‫So let's just go ahead and let's get started.
‫Now to add the destination section you have to click on the edit page so that you are taken to the edit
‫page over here.
‫And now we will be adding our new section.
‫Now every time you want to add a different section, I would recommend adding a group so that you can
‫name that.
‫So we will actually rename this group to be our hero section, so that next time when we are editing
‫this page, it makes us really easy to understand.
‫So what you need you need to do for that is to click on these three dots.
‫And then you can see that we have got this rename.
‫So you can click on the rename.
‫And you can say that this is the hero section.
‫All right.
‫And now you can click on save.
‫This is now added.
‫Now you can click on here so that it just collapse.
‫Now what we want to do we want to add another group.
‫So we will click on the plus.
‫After that we will go down and we will click on groups.
‫So that's one of our group is added.
‫After that we will click on one layout because we want to add the heading first.
‫So we will click on this.
‫And now we will click on Add block.
‫Now we will click on the heading and we will say are my favorite destinations or anything you want to
‫do right now.
‫What I will do I will click on here Align Text and I will align this to the center.
‫I will keep this to be heading two because this is already the heading one, which is the main heading.
‫Now for every single heading that you want to add, you can keep it to be the heading level two.
‫Once we have added the heading now what we want to do, we want to add uh, some of the images right
‫here, the background image.
‫On top of that we want to show the name.
‫And then we want to show the button.
‫So we want to show it like this.
‫Like this.
‫All right.
‫So how are we going to do that.
‫Let's just go ahead and let's see that.
‫First of all we want to add columns.
‫All right.
‫And in those columns we will be then adding the background image.
‫And we will be adding the buttons as well.
‫So we want it like that.
‫So how are we going to do that.
‫First of all you have to click on this plus.
‫And then you have to go down and you can see that now we have got this columns.
‫And if you click on that you can see that now the columns are actually added.
‫And you can decide like how many of the columns you want to go with.
‫So first of all, we will say that we want to actually add a one single column.
‫And this is now going to be added.
‫Now, once the column is actually added, then what you can do, you can click on add block and then
‫we will be adding.
‫A cover image.
‫So how are you going to do that?
‫You can click on Browse all and then you can go down.
‫And this is actually the cover.
‫So you can click on that.
‫And now here it says choose your image for the cover.
‫So we will click on the media library.
‫And now we will choose any of the image.
‫So let's suppose that the first image that I want to add is going to be Paris.
‫I will click on that.
‫I will select the image.
‫Now that is added.
‫And now I will name this to be Paris.
‫And after that I also need to add a button as well, so that the person can actually click on that to
‫view all the posts related to the Paris.
‫All right.
‫So what I will do I will click on outside.
‫And now here is actually the plus.
‫And if I click on that then I've got some of the options.
‫So now I will click on Browse all.
‫And now I will go down and I will select that I want to add a button.
‫So where is the button.
‫Here is the button I will click on that.
‫The button is also added.
‫Now I can click on that and I can add the text to the button.
‫So let's suppose that I want to add the text which is going to be view all right like view post if you
‫want to add view post view all post whatever you want to do that.
‫And after that we have got the width settings.
‫So I will say that I need it to be 100% width for the button which is added.
‫After that I need to go into the styles.
‫This is actually the fill and this is the outline.
‫So I'll select that.
‫I need it to be outline.
‫All right.
‫And you can see that this is how it is.
‫Now what we can do is that we can style it.
‫So we will go into the text and we will select this to be white.
‫And for the background.
‫Now you can see that there is actually a hover effect that is added here by the default.
‫But now when we will actually change the color, like let's suppose that I need the background color
‫to be.
‫Let's just keep the background color to be transparent.
‫This is right here.
‫It's turning blue.
‫There is no option for us to manage that.
‫We can manage that from the theme customizer.
‫So let's go down.
‫This is actually the border.
‫Now this as you can see this is actually a gray border.
‫Now let's suppose that I need that border to be of white color.
‫Then you can see that the white color border is already applied.
‫So now what you can do, you can click on the background.
‫And let's suppose that if you select this to be this one then this is going to be already applied.
‫There is no hover effect.
‫And now if you click on update.
‫And now if we refresh this then you can see that we have got this right here.
‫It's being shown and this is how it is.
‫So what I would recommend you is to click on the background and get rid of the background.
‫The Gutenberg right now is in the early stages of the development.
‫WordPress is continuously updating it.
‫So hopefully in the future they will add the hover effects.
‫But WordPress is actually a really slow in terms of updating, like it can take maybe two years or maybe
‫one year for them to add the hover effects.
‫So that is why it can take longer.
‫However, I did tell you before that the hover effects are not actually added in the Gutenberg.
‫So what you need to do is to hit on update, and once you're done with that, then you can refresh this.
‫This is actually the default, uh, hover effect that is being applied by the theme.
‫So what you can do you can click on the customize.
‫And now once you are in the customize then you have to go into the general.
‫And once you are in the general then you have to go into the buttons.
‫Then you have to go into the design.
‫And then you have to work with this, uh, color right here.
‫So on the hover you can now say that I need that to be black.
‫And now when you will bring your mouse, you can see that now it's actually black.
‫All right.
‫So you have to do these kind of things with that.
‫Now I'll say that I need it to be black.
‫So this is how it is now.
‫I'll be going ahead and I'll be publishing the changes.
‫And now let's click on cross.
‫Let's go back to this.
‫And let's also select the text color.
‫And let's change that to white.
‫So that right here it is actually gray.
‫It should be actually white color the text color.
‫And now let's just go ahead and let's hit on update.
‫Let's come up here and let's refresh.
‫And now you can see that this is how it actually is.
‫All right.
‫So now we are fully done with our design for the first column that is going to show the destination.
‫Now we want to do a little bit more things.
‫And then we will be actually adding the other columns like we want to actually design it something like
‫this that we did in the previous project for the media team.
‫Like you can see that this is the one.
‫And then we added two more.
‫So it's better to actually design the first one.
‫Then you can duplicate this again and again, and then you can do the changes so that you do not have
‫to do the changes to three of the columns or three of the blocks.
‫So let's just go ahead and let's do some of the little bit tweaking.
‫So I'll be going back to the editor.
‫This is the heading.
‫Now I'll be doing some of the changes instead of using the large one.
‫Let's suppose that I want to go with the XL.
‫And this is how it is.
‫Now you can see that, uh, we have got some of the spacing over here between this and this button over
‫here.
‫So if I were to go to the navigator, then inside the navigator you can see that I have got first the
‫heading or a paragraph.
‫And after that I have got a button.
‫So I've got basically two blocks.
‫Now what I want to do, I want to basically get rid of some of the margin that is already applied to
‫this particular paragraph.
‫So what I'll do, I'll click on the paragraph.
‫Now I'll go into the block settings.
‫And now in here I'm going to click on the dimensions.
‫So let's click on the plus.
‫There is actually the margin.
‫If I click on that then the margin is actually added.
‫And now if I bring my mouse to this and you can see it shows me that there is a default margin that
‫is added to this particular heading.
‫So what I'll do, I'll just decrease that margin so that there is no margin between this paragraph and
‫this button over here.
‫And it looks really clean and simple.
‫Now once you are done with that, then you can see that this is actually our column which is now fully
‫designed.
‫And now if you are going to duplicate this column then we're going to get the other column over here.
‫So let's just go ahead and let's do that.
‫I'm going to be clicking on these three dots to this column not the columns.
‫This is actually the columns tab that is holding all the columns.
‫This is actually a one single column that is in this columns.
‫All right.
‫So what I need to do I need to click on these three dots to the column.
‫And now I will click on duplicate.
‫And now you can see that I have got two columns.
‫Similarly if I were to just click on these three dots and if I were to click on duplicate, then now
‫you can see that I have got three columns.
‫And now if I hit on update.
‫And now if I go back to the website and I refresh, then you can see that this is how it is.
‫We have got the heading, the image and everything and it's looking pretty -- good.
‫So let's just go ahead and let's work with it.
‫First of all, we have to say that if someone clicks on the Paris, then we want them to be taken to
‫the Paris link.
‫So what you can do for that?
‫You can go into the destination, go to the Europe and copy the link of the Paris.
‫So I'm going to be copying the link.
‫And now you can click on the button and you can click on the link.
‫And you can now paste the link.
‫All right.
‫And then you can hit on enter.
‫And this is going to be added as the link.
‫So that if anyone is going to click on there he's going to be redirected to the Paris.
‫Now let's just go ahead and let's quickly design this one.
‫So I'll be clicking on the second column, select the cover.
‫And now we have to first change the image.
‫So how you're going to change the image.
‫You can see that once you click on this cover there is going to be a top bar which is going to be given
‫to you.
‫Now there is one more thing that you can do.
‫Like if this top bar is confusing you and you do not get to see it often, then you can click on these
‫three dots and here it says top toolbar.
‫So if you just select this there is going to be a top toolbar over here.
‫It's up to you if you want it this way right here or if you want it right at the top.
‫So I'll be just keeping it to be default, but it's really good to add it over here.
‫All right.
‫So I'm going to be unchecking this so that I get to see it over here.
‫Now here is going to be the replace option.
‫So I'll be clicking on this replace here it says open the Media library I can click on that.
‫And now let's just go ahead and let's choose any other image.
‫So this time now let's suppose that I want to select this Dubai.
‫So I'll be clicking on the Dubai image I'll click on select which is.
‫Added.
‫And now in here I've got this focal point picker.
‫So I'm going to be bringing this focal point picker to this.
‫Uh, I guess this building is known as the Burj Al Arab, I guess.
‫So I'm going to be bringing that here.
‫And this is right here.
‫Now I'm going to be changing the text to.
‫Dubai.
‫And also I'll be changing the link colors as well.
‫So let's click on the link and let's go into the destination middle East.
‫We've got UAE and we've got Dubai.
‫Now I'll be copying the link address.
‫And now let's just go ahead and let's paste in the link address and let's hit on enter.
‫This is going to be added.
‫And now let's just go ahead and let's do the same with our last one.
‫So I'm going to be clicking on replace I'm going to be clicking on the Open Media Library.
‫And this time we're going to be choosing.
‫Let's suppose that I want to go with the Malaysia or the Turkey or let's just select this Malaysia and
‫I'm going to be clicking on select which is added I'm going to be changing this to be.
‫Malaysia.
‫All right.
‫Now let's click on the button.
‫Let's just select this and let's go to the website.
‫And now let's copy.
‫The Malaysia destination link.
‫Let's just come up here and now let's paste this.
‫Now you can hit on enter.
‫And this link is also going to be added.
‫Now you can go ahead and you can hit on update.
‫Now this section is pretty really simple.
‫And you can also design with the Elementor as well.
‫So now we have got the link.
‫If you click on this here it's going to redirect us to the Dubai page.
‫So everything is fully done.
‫Now I think I need to increase the size of this top destination because we are using it pretty much
‫bigger size in here.
‫So I'm going to be selecting the top destination and I'm going to be selecting this to large Excel.
‫Excel looks good.
‫So now there is one more thing that I want to do.
‫And as you can see that at the bottom there is no spacing.
‫So I need to add that spacing.
‫So what I'll do I'll select this top destination group I'll click on that.
‫And now I'll be going into the stylings and in the stylings I need to go down.
‫And here it says the padding.
‫So I need to actually add some of the padding from the bottom or the margin from the bottom.
‫So I'll just click on this margin options and I'll say that I need to apply it at the bottom.
‫So I'll just select that and then I'll increase the margin bottom.
‫So I think this much is fine.
‫I'll be now going ahead and I'll be hitting on update.
‫And now let's just go ahead and let's refresh.
‫And this is actually the margin.
‫This is how it is now looking which is looking really much clean.
‫So now we are fully done with this.
‫This section was really very easy.
‫You can easily design this with the Elementor.
‫Now we're going to be going ahead and we're going to be adding our.
‫Let's suppose that we want to show the recent post down below something like that so that it looks good.
‫Our homepage looks good.
‫We're going to be doing that from the next lecture.
‫So stay tuned.
‫And by.