‫hey whatsup guys and welcome back.
‫So in this video, we're going to be doing the mobile optimization.
‫Now, that was the most awaited video right now.
‫And so you can see that as we are totally done with the Web site.
‫There is nothing that we need to do.
‫And so we will be now working with the mobile optimizations.
‫So now let me tell you the mobile optimisation rule.
‫So what you were doing, the mobile optimization, you first have to do the inner part.
‫And once you're done with the inner part, then you can go and focus on this particular part.
‫OK, because that's the most important thing.
‫Now, let me tell you one thing.
‫You can see that when we go down, this header is fixed.
‫And that is because we used a template for the header and the template came with a functionality that
‫told that basically told the elementor hard to fix this header.
‫So if you go and you just go to the main section using the navigator, are we here you click the
‫header, which is a main section.
‫And now you go to this particular thing and then you go to the emotion effects.
‫Now here you can see it's basically sticky to top.
‫Now, if you just select it to be none.
‫And now if you go and you just hit update.
‫And now if you will visit the website.
‫Now, here you can see that the header is still over here.
‫So this is the one thing that I wanted to show you because that was the most important right here.
‫So we're going to be just using the sticky over here and we're going to be hitting update right now
‫so that, you know, that this is actually sticky to the top.
‫So now let's come to the point where we were talking about the mobile optimization.
‫So the mobile optimization is basically done with just like you have to first do the inner part.
‫And then what you are.
‫Once you're done with the inner part, then you have to focus on the header and footer.
‫And then you can design that particular thing for any mobile optimization.
‫So let let's just count how many pages we have that we need to do de mobile optimization for.
‫So we've got the homepage.
‫We have got the archive page.
‫And we have got the particular single product page that's going to be right here.
‫So we also want to do this.
‫And we have got the card page.
‫So card page will be automatically designed because this is basically the fukamachi stuff.
‫And these are usually design and also the proceed to check out page will also be design, except for
‫the heading that we have to change.
‫And VRT, my account page.
‫This will come in the one single column just like Dashboard recent orders.
‫This, this, this.
‫So we don't have to worry about this as well.
‫And the last one is the specialist over here.
‫So wish list will be also designed.
‫But we have to do some joffre changes for this title and other stuff.
‫So let's go to let's get started.
‫First of all, we will be getting at starting with the homepage right here.
‫So now for the homepage, all you got to do is to click edit with elementor and you have to shift to
‫the mobile device.
‫And we have to see what are the things that we need to change.
‫And hopefully there will be so many.
‫So now once you're right in here, all you got to do is to first get rid of the navigator.
‫And then let's switch to the mobile device.
‫And here it is.
‫This is how basically it's looking.
‫So you go down, you go down.
‫And this is how basically everything is looking.
‫Now, the one thing I would recommend you guys is to first make sure that this header is basically not
‫sticky on a mobile device and a tablet device.
‫And that's really recommended now.
‫Do it for right now.
‫Or what you can do is that you can first do it.
‫That we don't want to stick it to any of the mobile device or any of the device.
‫We will be talking about this header later on when we are doing the header optimization for the mobile.
‫So now once you do that, all you got to do is to basically refresh tis page and you will be basically
‫able to view the full page so that you can decide how you should be editing.
‫Now, let's switch to the mobile device.
‫And I can see this is how basically it's going above.
‫So first of all, all we got to do is to click edit slides.
‫And here we have to work with the stalling over here and we have to break for the title.
‫So the very first thing we're going to be doing is after increasing the font to just basically a size
‫over here.
‫You have to go to these slides again and you have to make sure that you said the content vid to be at
‫least 95 percent or 96 percent.
‫And once you're done with that, all you got to do is basically said the padding to be zero.
‫So that's the content that we have is fully aligned to whatever it should be.
‫Now, once you're done with that, all you got to do is to work with the typography again.
‫And now you can decrease it like how much you need.
‫So we've got I think this one is totally perfect.
‫We've got one stop shop and now you can work with the height.
‫So how much height you want.
‫So we're going to be keeping it to be like this much because we need to keep are slated to be not very
‫big.
‫But in a normal size.
‫And you can see this is how it's looking.
‫So I'm going to basically make my text to be really very small so that the is always open should also
‫be in one single line.
‫So.
‫Said this to Terry and Ian Seas for 30 pixels.
‫It's totally perfect.
‫Now we've got this one.
‫So this one is also something that you need to do.
‫So, Freddie, mobile device, what you can do is that you can first try to make it perfect.
‫And if it doesn't get perfect, then what you can do is that you can get rid of this particular background
‫that is coming.
‫So first, we'll try to make it perfect.
‫If it get perfect, we'll stick with it.
‫If it doesn't, we're going to make sure that we remove it.
‫So first, we'll just keep it here and now we will select pretty clear one.
‫We're going to go to the style.
‫We're gonna set this to be small.
‫Just like that.
‫And now for the padding over here for a margin, basically, you have to uncheck this.
‫Now you have to decrease it to that.
‫You basically go to the perfect spot and a trade here.
‫And so if you think this is looking cool, this is looking good, then definitely use it.
‫If you think that this is not looking good.
‫Then what you can do is that you can get rid of that particular featured category.
‫Seemed like this.
‫This is you can see the spacing is very much more on a mobile device.
‫So you can select this section.
‫You can go to the advance.
‫You can just set your custom margin for the mobile device so you can set it to be 50.
‫I guess so 50 is fine.
‫So we've got featured categories right here.
‫Now we've got this particular divider.
‫So for divider, I think the width to be I need it to be very much bigger.
‫Like so.
‫And you have to go to the margin and you have to bring this to more top.
‫So we're going to keep it minus 50 right here.
‫And I think it's perfect right here.
‫Now we've got this particular thing, so we don't have to do anything or be here and we go down and
‫this is right here.
‫So we've got this thing to be perfect, but we've got this thing right here and we need to do some changes
‫for this particular thing.
‫So let's click over here.
‫Let's go to the advance.
‫Let's select the padding.
‫Let's change this to 25.
‫And now it's kind of looking good.
‫So we've got this particular thing
‫Everything seems to be good now for the animation part.
‫I would recommend you to not use it.
‫Basically, the motion animation on a mobile device.
‫It totally depends upon you if you want to use it.
‫So what you can do, you can just uncheck it and you get uncheck it on a mobile device and it will not
‫be effective on a mobile device.
‫So you can do it seem like this if you need first.
‫This pretty cool a title above and then the image, you can do it that way.
‫You can just click over here.
‫And then you can reverse the column under the advance and the response if you can reverse to column
‫on a mobile device.
‫And now we've got first this.
‫Then we have got this particular icon.
‫This particular basically the image.
‫So this is basically a great thing that you can do.
‫What I would highly recommend you, if you are basically using first the image and then be content.
‫OK.
‫Now we've got this particular thing.
‫And for this, you can just do the exact same padding that we did.
‫You can send this to 25 from every side.
‫And it's perfect.
‫And this image right here in this.
‫This image, you can see this images right here.
‫So you can just work with it.
‫Like how the image should be coming right here.
‫So we're going to go we're going to go into motion effects and we're going to deselect this on mobile
‫device.
‫And we're also going to deselect this on mobile device because we don't want to use it right on a mobile
‫device.
‫Now we've got this particular latest products.
‫So we're going to go and we're going to use that.
‫Now, the best way to do it is to just go above and select this particular heading.
‫Now, I don't know which heading is it that we need to work on.
‫So the best thing you can do right now is to go to the navigator.
‫And this is basically the heading, which is the main heading you, which is basically the Bagnold money.
‫Right.
‫So because this is above and then this is right here.
‫So you can copy it.
‫You can now come up here and you can go down and you can paste these style.
‫OK.
‫It's right here.
‫Seems like this.
‫You can go above right here.
‫You can copy the second heading.
‫You can uncheck this so that you can see that we are selecting the appropriate heading right here.
‫He can select the setting and now you can copy it.
‫You can now go down.
‫And now you can just.
‫Right.
‫Click over here and you can paste these style.
‫And that's all it.
‫It's.
‫It's already done.
‫So like this, you can go to the divider.
‫You can increase the width fit.
‫And now you can make this to be up a little bit.
‫So we're going to keep it to minus 50.
‫And it's perfect.
‫The slider is perfect.
‫Now for the slider mobile optimization, you can definitely go to the slider plug in and you can see
‫how much you need on a mobile device.
‫Now, let's talk about this one.
‫So for this particular thing, all you got to do is to just change the font size.
‫So you have to select this font and you have to go to this style and you have to select this style and
‫you have to just keep.
‫It's like how much you need.
‫So are you going to be keeping it to be this much?
‫Now, she's the font family you can see, because I showed the website to my brother and he said that
‫the Monserrat is really very.
‫Both want and you should be using something else, so, yeah, let's just click over here now and let's
‫work with the minimum height and we're going to decrease the minimum height to be OK.
‫This is fine.
‫This much is fine.
‫And for the men, you can just for him it is click over here and now you can do the exact same thing
‫that we did.
‫So you're going to copy.
‫You're going to come here and you're going to paste the style simile this.
‫You're gonna copy it from here and you're going to paste the style over here so that this is right here.
‫And the image also gets changed.
‫So you're going to want to have to go back to this right here and you have to select the image.
‫So we basically choose this BMW image, right.
‫So for the image, this is right here for him.
‫So now we've got this one.
‫So for this one, we're going to be using the exact same strategy we did over here.
‫So you have to select this right here and this is right here.
‫And you have to select the first heading.
‫You have to copy it.
‫And I you have to go down and you have to paste the style over here seem like this.
‫You have to copy the second heading style.
‫And you have to go down and you have to paste these style over there as well.
‫And it's right here, sell products.
‫So now you can record the divider over here, you can increase it and you can very quickly margin.
‫You can just keep it to be minus 50.
‫Now, basically, this is really very easy and you don't have to do pretty well much stuff.
‫And this is right here and now here you can see that they are selecting two columns and wonderful.
‫But we are getting two columns and one, two, three rows over here.
‫And this is being affected because we have selected on the desktop the five columns and one row.
‫So five products are being shown and they are getting from the database.
‫So now how to prevent this on a mobile device?
‫Because we need to just show only one single list.
‫Or if you need four, you can just add before.
‫But this is actually one extra that is coming.
‫So let's suppose that if you need only four letter word that if you need only to overhear what you're
‫going to do for that.
‫So for that, what you have to do, you have to basically duplicate this.
‫OK.
‫And now you've got two products.
‫OK.
‫So the first product is going to be specifically related for the desktop devices.
‫So what you can do.
‫You can just come up here and then you can go to the responsive.
‫And you can say that we want to hide this on mobile device.
‫And this will be hidden on a mobile device.
‫Then what you can do is that you can click over here.
‫And for the columns over here, you have to select the desktop.
‫And inside the desktop, just select two.
‫OK.
‫And once you will select two, you will see that there will be just the two columns and one row.
‫So they will be automatically two products.
‫And now if you will click over here and you will select Mobile, you will see that there are now two
‫products over here and there is nothing extra product.
‫And now what you can do, you can go click over here.
‫And then you can go to the responsive.
‫And you can hide this on desktop and the tablets that this is only available on a mobile device.
‫Now, also, let's suppose that if you need four columns, just like if you need four products being
‫shown one, two, three and four.
‫Then what you can do is that you can switch to the desktop mode again and you can select four from here.
‫And here will be four products being shown.
‫And now you can switch to the mobile again.
‫And now here you can see we've got four one, two, three and four.
‫And now there are four products being shown.
‫So it totally depends if you need one, if you need two, or if you need four or how you need it.
‫So I'm going to be switching to two because I just need a one single roll on a mobile device.
‫And now you can switch to the mobile device right here.
‫And you can see we've got the mobile device and now we can go ahead.
‫You can hit update and now you can view the Web site on a mobile device yourself.
‫Like, how is it looking?
‫And seems like this.
‫You can also switch to the mobile from here.
‫You can select, inspect.
‫You can click over here.
‫This is switched in the mobile device.
‫You can select the size of it so you can select a large mobile or medium.
‫Now, I would recommend to choose a medium or you can select iPhone 10 or whatever you want from here.
‫So this is only Web site is looking on iPhone 10 like here you can see how cool is it looking to go down.
‫And everything is perfect.
‫So now Harry can see that as we are done with the mobile optimization, let's move up to the tablet
‫and let's see how dusty it looks on a tablet device.
‫So on a tablet, you can see it's right here.
‫All you gotta do is to click over here, basically click at slides and you have to work with the content
‫with.
‫And you have to basically said this to at least ninety five percent.
‫Okay.
‫And for the 95 percent, I didn't think so.
‫We need to change any of the title or anything over here.
‫You can see everything is aligned.
‫So what you can do, you can first basically just keep keep the padding to be zero and you have to set
‫the height to be just like that so that this is actually the perfect type.
‫Seem like this.
‫You can work with this pretty color heading and you can do the exact same strategy that we did over
‫here.
‫All you got to do is to click over here and you can set the heading size.
‫And this is right here.
‫So this is already design.
‫This is already here.
‫So we don't have to change anything else over here.
‫Now, let's talk about this header.
‫This divider.
‫And we have to basically make it to be a little bigger right here.
‫That's all.
‫And let's talk about this one.
‫So we've got laptop, desktop, mobile and clothing.
‫Now, this is you can see this is not coming the perfect way.
‫So what you can do is that you can set this to 50 percent and you can set this to 50 percent as well.
‫Seems like this.
‫You can come up here and he can set this to 50 percent for your tablet and he can set this to 50 percent
‫as well.
‫And this is how you can see it's looking.
‫So we've got laptop, desktop and mobile and clothing.
‫Now, what you can do is that you can come up here and you can go to the padding and you can set some
‫of the panning from the top.
‫Right and other stuff.
‫And you can keep it to be 20 pixel and you can even increase it if you need it to be just shrink.
‫More on a tablet device.
‫So I'm going to be keeping it to be 20 so that this is much perfectly designed.
‫Now, once you have got it all, you've got to do it to work with this one self for this one.
‫We're going to click over here and we're going to set the padding.
‫So we're going to send you padding to be 15 pixels and it's perfect.
‫Or let's choose it to be 20 pixels.
‫And this is also cool.
‫Similarly, this you can now go to detail and you can decrease the size of it like so.
‫And everything is perfect.
‫Seems like this.
‫We're going to do the same with this one.
‫We're going to first select this one and we're going to get rid of the tablet optimisation.
‫Are we here?
‫Tablet effects on a mobile, on a tablet and some like this.
‫We're going to just do the exact same thing that we did over here.
‫So we selected twenty pixels panning from each side.
‫So we're going to set twenty pixels and everything is perfect right here.
‫So we don't have to change.
‫But you can see that the title is right here so you can keep the exact same font size.
‫So you can just keep it a little less than that.
‫So you can just do it right here.
‫Now you can say we're done with it.
‫Now let's talk about this one.
‫So this is already designed.
‫This is already design.
‫This is already designed to.
‫This is already design.
‫This is right here.
‫Now, you can see we're basically showing the computer products right here.
‫Basically, the desktop products.
‫If you click over here and then you click over here, you can see that the columns are being shown.
‫And these are actually five products being shot.
‫So if you select five columns, you will see that the five columns will be too much to be shown on a
‫tablet.
‫But if you want to show it, you can select five.
‫And you can read it.
‫Or what you can do is that you can just go and you can get rid of it.
‫You can click over here and you can just basically.
‫Go to be responsive and you can hide this on tablet as well.
‫OK.
‫And on a tablet device, you can go and you can create another one.
‫So you can duplicate it.
‫OK.
‫We have got another one.
‫And now for this one, you can basically show it so you can go to the responsiveness and you can show
‫this on a tablet and you can hide this on mobile one.
‫So this is specifically for the tablets.
‫And now you can go to basically the desktop one and you can select four columns.
‫And now you can go back to the tablet one.
‫And now here you can select four from here and here will be four products being shown for these sale
‫products.
‫So this is what you can do.
‫And now we are totally done with the tablet optimization.
‫So now let's go ahead and let's refresh this page
‫And let's view this page on a tablet device and let's see how does our Web site looks on a tablet.
‫So we're going to select a pad.
‫This is how it's looking.
‫We go down and this is how it's looking.
‫We've got everything perfectly aligned.
‫So congratulations, guys, on doing the tablet optimizations as well.
‫And so in the next video, we will be doing the other optimization.
‫Other pages optimization, too.
‫So stay tuned.
‫And babye.