‫In this lecture of the course.
‫We will be now doing the mobile optimization for our website.
‫So let's just go ahead and let's get started.
‫All right.
‫So now I have actually opened up this particular website that we have been creating throughout this
‫section on my mobile device.
‫And now let's just go ahead and let's test it out and let's see how it's going to work.
‫So I'm going to be going ahead and I'm going to be opening the website.
‫So now first of all you can see that we have got this cookie policy and everything which is working
‫fine.
‫So I'm going to be going ahead and I'm going to be clicking on accept.
‫And now this is our website.
‫Now by looking at this it seems to be already designed.
‫Let's just go ahead and let's see, uh, if there are some of the changes that we need to do and then
‫we're going to be changing it on the customizer.
‫So this is our home page.
‫And if we go down now you can see that this is our search which is working fine.
‫Everything seems to be working fine.
‫This is our top destination.
‫Our columns right here.
‫The three columns that we created, it is working perfectly fine.
‫And if we go down then we have got the recent post.
‫So if I go down, everything seems to be perfectly working right here.
‫Now here.
‫This is a thing that we need to do.
‫This is the change that we need to do.
‫This is the subscription form.
‫We need to make sure that this comes right under this about the travel blog.
‫So we need to work on that.
‫And then we go down.
‫We've got our footer which is also working perfectly.
‫Now if we go up to the top then we have got this menu over here.
‫So we need to change the color of the menu as well.
‫If we click on that, this is the menu that pops out and we have got the menu doesn't is not fully aligned
‫for the mobile devices.
‫So we're going to take a look at like how we can create a menu specifically for the mobile device.
‫Or if we want to use the same menu how we can use that.
‫So this was our home page.
‫Let's just go ahead and let's open up our about page and let's see how is it.
‫So the about page is already designed as well.
‫We've got the image working perfectly fine.
‫The heading then we have got the text.
‫And if we go down we've got the what I like to do.
‫This is also design.
‫And then we have got one to advertise.
‫And if we click on the view plans it's going to take us to the advertise page.
‫And this page also seems to be designed already.
‫So the only thing that we need to do is to work with this.
‫Subscribe one.
‫This is the one that we need to work the about the travel blog.
‫Uh, this is the column which is just like coming side by side.
‫We need to work with that.
‫Now let's just go up to the top and let's take a look at another page.
‫So I'm going to click on the logo.
‫I'm going to go down and let's just open up any of the destination page.
‫So if I were to open up this Dubai, if I click on here, it's going to redirect me to the destination
‫page.
‫And this destination page is also design already.
‫So we do not need to do any of the things.
‫Like if I were to go ahead and if I were to just click on the home, it's going to now redirect me back.
‫So everything seems to be already designed.
‫There are some of the changes that we need to do, and we're going to be doing that right in this particular
‫lecture.
‫So let's just go ahead and let's get started and let's open up our website.
‫So now the very first thing that we need to do is to first of all go to the home page.
‫And let's start from the home page and the top the header.
‫So first of all what we want to do is that we want to say that we want to create or we want to show
‫the same menu that we have on this page.
‫We want to show that on the mobile device.
‫So what we will do for that we will go into the menus.
‫And now we will select our main menu, the header menu.
‫We will click on select and we will say that we want this same menu on the mobile as well.
‫So we will select this.
‫If you want a different menu you want to create it yourself.
‫You can create a new menu.
‫And then you can select its display location to be the mobile menu.
‫But I want the same menu.
‫So I will click on the mobile menu.
‫And now I will save this.
‫Now once I have saved this, if I just go back to the website.
‫And now if I refresh the page.
‫Now if I click on here, you can see that we have got home about categories destinations.
‫I can click on any of the destination and it's going to take me to that particular destination.
‫So it seems like it's working.
‫Let's open up any of the single post.
‫And this is how the single post as well.
‫So this is also working.
‫Now what we need to do is that we want to let's suppose that we want to show.
‫The sidebar as well.
‫So on any of the posts, like if I open up this post how to get a Ferrari, then you can see that I
‫have got a sidebar over here.
‫However, right here, if I just go down then I have got the post as well, but right down below I do
‫not have got the sidebar, so if you want to show the sidebar then what you can do for that, you can
‫just go into the customize.
‫And then you can go into the sidebar.
‫Then you can go down and you can say that the sidebar visibility is also going to be on the mobile device
‫as well.
‫And now if you publish the page and now if you go back to the website.
‫And now if you refresh this.
‫Now if I just go down.
‫Then you can see that I have got the sidebar as well, so it's totally up to you if you want to show
‫the sidebar or not.
‫This is how you can go ahead and you can do that.
‫The other thing that we wanted to do is that if we go down.
‫Then we have got this trending now.
‫So if I just click on edit you can see that this is not available.
‫This is not yet visible actually on the mobile device.
‫So if I just select this to yes.
‫And then I just hit on publish.
‫And now if I go back to the website.
‫And now if I refresh this.
‫You will now see that it will be there.
‫So if I just go down.
‫Then you can see that I have got this trending now as well over here.
‫Now let's just go ahead and let's take a look at this one.
‫This is the one that we want to align.
‫We want to make it look good.
‫So what we will do is that we will go to our chrome and we will click on Edit Footer which is this one
‫edit.
‫And right here you can see that this is the columns layout for the desktop.
‫So what I will do is that I will say that for the mobile device I will click on here.
‫This is going to convert it now into the mobile.
‫And now I will say that for the mobile device I do not need it like this.
‫In fact I need it to be stacked.
‫I will click on here.
‫And now this is going to be stacked.
‫And now if I just hit on publish.
‫And now if I were to go ahead and if I were to refresh the page on my mobile device.
‫Now if I go down.
‫You can now see that this is stacked.
‫And I've got this subscribe right here.
‫All right.
‫So now everything seems to be perfectly designed except we have got this one, the menu that we have
‫over here.
‫We need to work with that as well.
‫So we're going to select the mobile from here.
‫And then we're going to go up to the top.
‫And now we need to select our main row the header the header one.
‫And we are going to go back inside the header.
‫So we've got this trigger over here.
‫All right.
‫In the header which is now the mobile menu.
‫So if you just click on here it's going to show us like how you want it.
‫What is the icon size.
‫What is the style you want.
‫So you can select simple outline solid if you want a solid one I want the simple one.
‫I kind of like it.
‫All right.
‫And if you also want the label you can do it as well.
‫And this is going to be a menu label over here as well.
‫But I do not want the label.
‫So I want to I want to hide it.
‫All right.
‫And then I will go into the design.
‫Now this is actually the default state.
‫So I will say that initial design is going to be white color.
‫And now you can see that this is how it is and this is how it's working.
‫So for the hover if you want.
‫Now usually hover effects aren't really uh working on the mobile device.
‫So if I were to share with you like if I just select on hover to be black.
‫And now if I save the changes, I publish the page.
‫And now if I view this and now I refresh the page.
‫And now if I refresh the page.
‫You can now see that this is here.
‫And if I click on it, the hover effects aren't that much reliable on mobile devices.
‫It's just there.
‫Now here we've got this categories.
‫So if I just click on here you can see that the hover effect is being effective.
‫All right.
‫This is turning into blue.
‫Now let's suppose that I do not want that to happen.
‫So if anyone just clicks on there and brings his mouse I do not want that to happen.
‫So what I can do for that I can actually click on this mobile menu.
‫It's going to take me there.
‫This is the dropdown.
‫You can change it.
‫You can change it to.
‫Plus this is going to be converted into plus like that I need it to be like this.
‫All right.
‫And then I'm going to go into the design.
‫And here is the hover effect.
‫So I'm going to say that I need the hover effect to be a little bit kind of bit gray.
‫All right.
‫So now if I click on here it's going to open up that particular submenu over here.
‫So this these are the changes that I need to do.
‫The rest of the changes seems perfectly fine to me.
‫So now let's hit on publish.
‫And now let's view the page.
‫And now if I open this up, if I click on here, this is how it looks.
‫Everything seems to be perfectly fine.
‫Now similarly for the mobile devices as well.
‫Like let's suppose that if you want to incorporate the search functionality as well.
‫So you can go into the header and we are right now in the tablet and mobile header.
‫And you can say that I also want to add the search.
‫So you can just get this search all right.
‫And you can drag and drop it over here.
‫And there is going to be a search bar over here as well.
‫So if you click on that the search is right here.
‫If you want to add the search functionality as well you can edit like this as well.
‫And this is how it is working similarly.
‫Now let's talk about the transparent header or the sticky header.
‫So if I were to go into the headers, if I click on the global header and if I go down then I should
‫have got this sticky functionality.
‫All right.
‫So this is now the sticky header which is enabled only on the desktop.
‫So now if I enable this on the mobile device as well.
‫And now if I go down you can now see that the header is there.
‫So you can decide if you want the sticky header to be sticky on the mobile devices as well, or if you
‫want it only on the desktop, and you can do it kind of bit like that.
‫Now let's just go ahead and let's hit on publish.
‫And our website seems to be ready for the mobile device.
‫Now let me share with you.
‫Like, let's suppose that if you have uploaded a very big logo and it's taking the full size and you
‫want to resize this, then you can just click on the mobile over here.
‫Then you can click on the logo.
‫You can just basically like let's suppose that if you need a different logo on the mobile device, you
‫can upload it for your mobile device.
‫Uh, if you need a different, uh, margin and padding for the mobile device, you can do that.
‫If you need a different height for the mobile device.
‫You can do that from here.
‫But I personally think that the sizing that they are using for the mobile device is pretty much perfect
‫enough, and it looks really very great.
‫So if you need a different type of things for the mobile device, you will have the option inside the
‫theme customizer for everything.
‫So if I let's suppose that I just go ahead and I say that okay, I do not like this right here.
‫All right.
‫I can just go into the design.
‫And here in the padding right here, we've got 50 and 50 from the top.
‫Now let's suppose that I want to increase it on the mobile device.
‫So I can just say that I needed a 100 on the mobile device.
‫And this is going to be 101 hundred.
‫So it is totally up to you how you want it.
‫I'm going to be keeping that to be 50 for the mobile devices, and it's perfectly fine.
‫Now let's just go ahead and let's take a look at the tablet one.
‫So I'm going to be going ahead.
‫I'm going to be clicking on publish.
‫And I'm going to switch to the tablet.
‫And this is how the website looks in the tablet mode.
‫So the same thing that we need to do if we go down we've got this.
‫This seems to be already designed, but I still want to work with it.
‫So I'm going to click on edit.
‫And now for the tablet devices I can either select this to be like I need it in two columns.
‫Or I can say that I need it to be fully stacked.
‫I kind of like the fully stacked one.
‫So I'm going to be going ahead and I'm going to be switching that.
‫This is the trending one.
‫If we go down, we've got the footer.
‫This is also design.
‫If we go up to the top we have got our author box, we've got our single post, we have got our hero
‫section which is also designed.
‫If we click on the logo we're going to be taken to the logo.
‫But now what we want to do is to work with this menu over here.
‫So we're going to go back and we're going to go into the header.
‫And this is our search trigger for the tablet devices.
‫So I'm going to click on this trigger.
‫And for the tablet I'm going to go into the design.
‫And I'm going to say that I need it to be white.
‫And I need the hover to be grayish.
‫And if I click on here you can see that this is how it looks.
‫So let's see if the link colors hovers are also working and the hover effects are also working fine.
‫So let's just click on here.
‫And now let's go down.
‫This seems to be good already.
‫However we just need to do some of the changes with this one.
‫This seems to be good already.
‫Everything seems to be working perfectly fine if we go into our destination.
‫Like let's suppose the categories, the activities page, it's going to take us to the activities page.
‫And now this is our activities page.
‫If we go down, everything seems to be designed perfectly fine.
‫So yeah, everything seems to be perfectly fine.
‫Let's go into the about page.
‫Let's see how does the about page.
‫So this is our about page.
‫This seems to be also designed perfectly okay.
‫The only thing that we need to do is to work with that thing, which is like if I go into the about.
‫Now I go down then.
‫This is right here.
‫The image.
‫I need to align it perfectly.
‫So I'm going to go ahead and I'm going to hit on publish.
‫And now I'm going to click on cross.
‫And now let's just go ahead and let's click on the home page.
‫And let's click on the edit page over here.
‫All right.
‫So now we are taken to the page that was designed using the Gutenberg.
‫And now let's see if we can mobile optimize our this particular page.
‫So there are two things that I want to say about the Gutenberg.
‫And that is Gutenberg is really a smart editor.
‫But there is also a con for that.
‫And I will be sharing with you right now.
‫So the reason why I'm saying this Gutenberg is really a smart editor is because Gutenberg is going to
‫adjust its layout, whatever the block that you are going to be adding in here, adding from here,
‫it's going to automatically adjust whatever the design you have created for the mobile device as well.
‫And it may look good now, it may look good.
‫There can also be a scenario where it doesn't look good, so if it doesn't look good, then this is
‫the con of the Gutenberg.
‫And that is you can not do the changes using the plain Gutenberg, and you have to rely on the extra
‫CSS customization to do the extra customization.
‫Otherwise, if the design looks good on the mobile device, then you are good to go.
‫But at the time I'm recording this lecture, uh, this particular feature is not yet added in the Gutenberg
‫for the extra mobile optimization.
‫Like as in the previous sections, the way we were customizing our pages using the Elementor, we added
‫custom padding, custom margin.
‫We added custom colors, custom hover effects.
‫These kind of things aren't really yet supported by the Gutenberg yet.
‫And that is why I was saying in the previous lectures that if you want to build a blog website now,
‫usually blog websites has a really clean and simple design and you want to build a blog website, then
‫using Gutenberg is the number one choice because it is best in terms of blogging.
‫Otherwise, if you need a really rich website, then going with the Elementor is much better compared
‫to the Gutenberg.
‫So anyway, let's just go ahead and let's see the issue that we were getting.
‫So right here you can see that this is the preview mode.
‫So if I just click on here, it's just going to show me that this is actually the desktop mode.
‫And if I just click on the tablet mode and now I go down.
‫Now this is my tablet mode.
‫So this is how the website will be viewed on a tablet.
‫So on a tablet, the way the Gutenberg is showing is pretty -- good.
‫It's looking amazing.
‫But if we go up to the top and if we visit the website and now if we click on customize over here and
‫we tell our theme to show us the tablet version by just clicking on here that the theme is showing like
‫this.
‫So this is how it's being shown.
‫However, if we say Gutenberg then this is how it's being shown on the Gutenberg.
‫Now I do not have a tablet, so I can really not share the screen, but let me just go ahead and let
‫me open up this website and let me just click on inspect.
‫And let's select the device.
‫And let's select iPad air.
‫So on an iPad air, you can see that this is how the website is going to be.
‫If you just click on here and if you say iPad Pro, this is how the website is going to be on an iPad
‫Pro.
‫And was there another one?
‫Now I really do not know any other tablets.
‫So I guess this one.
‫This is a laptop, I believe.
‫Surface Duo.
‫What is this anyway?
‫So I think this is the one that is going to be effective.
‫Now let's make it a little bit smaller tablet or yeah this is a tablet one.
‫So if I just click on here it's any of the tablet that is like very old version tablet that if you are
‫using then the website is going to show like this, which is going to look perfectly okay because this
‫is going to show then the mobile layout.
‫But let's suppose that if someone is actually using an iPad Pro or iPad air, then this is how the layout
‫is going to be.
‫This image is fine, this image is fine, but this image is not being shown.
‫It's right over here.
‫So what I will need to do, I will need to go to my home page and I will need to switch to the mobile
‫device.
‫All right.
‫So I can see how it's being shown on a mobile device.
‫Then I go down.
‫Now you can see that the Paris is right over here.
‫I need that to be somewhere over here at least, so I can see the Eiffel Tower.
‫So what I can do, I can just click on this cover and you can see that now the left and the top, this
‫focal point is set in the center.
‫So now if I just go ahead and if I change this over here for the mobile, it's also going to be changed
‫for the desktop as well.
‫So that is why Gutenberg says that whatever you are doing, make sure you choose a design.
‫You find a design that is fit for all screen size.
‫All right.
‫Do not just do the customs one because I'm not that smart.
‫All right.
‫So this is something that you need to do.
‫Otherwise it's a really great, uh, page builder in my opinion, not that much, but for a blog website,
‫100%, it's super awesome.
‫So I'm going to be dragging this focal point, and I'm going to be just like bringing it up till here.
‫And this looks kind of good.
‫Good.
‫So now if I hit on update and now see this, I changed the focal point.
‫And now I just go back up and I say that I okay I need to see the desktop.
‫So I click on here I go down.
‫Whoa.
‫What was that.
‫This blog hasn't encountered an error so I'm going to refresh this.
‫And I'm going to go down.
‫And now if I click on here, you can see that now the focal point is changed over here.
‫And it's right here.
‫So this preview mode that is being here is only for you to see how the website is going to be.
‫But Gutenberg says that whatever the changes you are doing, make sure to do the changes that you that
‫you think that will also look good on a mobile devices as well.
‫So this is something that you can do when you are designing the website with the Gutenberg.
‫All right.
‫Now we are fully done.
‫And now let's just go to the blog.
‫You can see that this is how the Paris was, the Eiffel Tower was.
‫So I'm going to go ahead.
‫I'm going to refresh this.
‫And now you can see that this is how it looks.
‫Everything seems to be perfectly aligned.
‫So that was all about the mobile optimization.
‫Now we are completely done.
‫We are 100% done.
‫You want to do any of the theme changes?
‫You can do it in the customize.
‫You want to do it.
‫Any of the page static page change that you did with the Gutenberg, Gutenberg is going to already do
‫that for you.
‫So now I hope that you love this section.
‫You understood the Gutenberg.
‫Now there was a reason for me to add the Gutenberg in this lecture is because I wanted to share with
‫you how it's work.
‫This is basically a foundational editor that comes by the WordPress.
‫By the default.
‫It is something that is made by the WordPress.
‫All right.
‫So that is why I wanted to explain you how it works.
‫And it's not like people hate Gutenberg.
‫It's just a really simple basic editor.
‫And eventually when you will be stepping out in the freelancing world and you will be getting the clients,
‫it's really important for you to know Gutenberg because you never know, like, uh, maybe, uh, 10%
‫of the websites are actually built with the Gutenberg that are based on WordPress.
‫But let's suppose that if 10% of those clients come to you, then you should know how you can actually
‫edit it.
‫So now, congratulations on completing this blog website.
‫We have built a really beautiful blog using the Gutenberg, using only WordPress, no third party plugins,
‫we just use a newsletter or other plugin, but other than that we just use only WordPress, so it's
‫a great achievement.
‫I just want you to tap on your shoulder.
‫Super, super.
‫Congratulations!
‫Now from the next section of the course we will be working up with the e-commerce website.