‫hey whatsup guys and welcome back.
‫So as in the previous video, we actually design this Web site.
‫And now you can see that this Web site is fully done and there is nothing that needs to be done over
‫here because we had designed archive pages.
‫We've also designed our taxonomy pages with the custom fields.
‫So you can see this is design and other way along with this, which is coming from the database.
‫And this is also coming from the database from each of the property like here.
‫And if any property does not have it, then that's going to show the default template like so.
‫And if any property has just the description and it doesn't have any background image along with the
‫map, then it is going to show like that.
‫So we have designed these particular templates.
‫Now you contact us, you guys, you know about it.
‫So we're not going to be doing that, particularly in this video.
‫Now, you're also done with the search form as well.
‫So in this video, we're going to be waking up with the mobile optimization because that is what we
‫should be doing.
‫So let's just move ahead to the all properties.
‫And you can see this is how it's looking.
‫And now we're going to be working up with this one first.
‫Then we're going to be moving towards a single property.
‫And then we're going to be moving towards our home page.
‫And then we're also going to be moving towards, ah, this particular template right here.
‫And we're going to be also making sure that this is mobile optimized as well.
‫So let's just get started.
‫And let's go to our all properties and let's see how does that look on a normal device.
‫So this is all basically it's looking on a device like that.
‫We've got the archive properties.
‫We've got this right here.
‫The header needs to be done as well.
‫Along with this, which is right here, and we have got the archived properties.
‫So you can see when we go above.
‫This is how it's going to look.
‫We've got this we've got these right here.
‫So we're going to be making sure that it breaks like that.
‫But you can see that this toolbar is coming.
‫And because of this top bar, this is how it's looking.
‫So I would highly recommend you to basically copy the link and then go to a window where you were not
‫logged in and out once you do that.
‫Now you have to basically click, inspect, and then you have to visit that.
‫And then you will see that it is going to be perfect.
‫And now menu will move above.
‫Over here, you can see there is no spacing.
‫So that spacing was because of the top bar that was coming.
‫OK.
‫So you have to just neglect that.
‫Now you can see this is what we have to design.
‫We have to sign this.
‫We have to design this.
‫This is how its looking.
‫We go down and this is working perfectly.
‫So we have to show one single property like that and everything is designed like that.
‫This is also designed since we have used a premade template right here.
‫Anyway, let's just go in and let's get started.
‫First of all, we're going to be going ahead.
‫We're going to be moving towards our properties in a normal moveinto ahead of your actually logged in.
‫And we're going to go ahead and we're gonna start working up at it.
‫So let's just go out and let's take a look at the loop, because we have to make changes in the loop
‫first and then we're gonna be moving forward.
‫So what you have to do, you have to go to the loop over here.
‫And now, once you are in here, all you have to do is to select the responsive mode and set it to mobile.
‫And then when you will set it to mobile, you will see that this is out.
‫It will actually give you like what it will look on a mobile device.
‫And what you have to do is to select this column and set 50 percent here.
‫Select this column and said 50 percent here so that it just comes side by side.
‫And same goes with this guy right here.
‫So you need to select it to be 50 and 50 right here in this.
‫That's all.
‫And you are now done with your template.
‫And now what you have to do is to just hit update and it hits save and close.
‫And once you're done with that, all you have to do is to open up the properties right here again in
‫the incognito window, which should be right here.
‫And now you have to reverse this and you will see that it will be done like so.
‫And this is LB's looking and there is nothing you need to do right now.
‫So our archive pages, I'm almost done.
‫Now, what you have to do is to work with this guy right here.
‫So for that, what we need to do, we need to just go ahead and we need to come up here to the elemental
‫to property again.
‫And now here what we are going to be doing.
‫We're going to be going back to the property page.
‫And what we have to do, we have to work with this guy.
‫Right.
‫So you need to come up here and you need to go to the property archive page.
‫Now, once you are in here, all you have to do is to select a mobile device.
‫And you can see it's right here and now on a mobile device.
‫You can select this title.
‫You can go to this style.
‫You can go to the typography and make sure that the mobile is selected hot here.
‫And now you can keep it a little small like that.
‫So it's going to be like that.
‫And now it's totally perfect.
‫So you can see this is how it's looking now.
‫Don't worry about it.
‫So this is really a bit small right here, but you don't have to worry.
‫Basically, all the devices will be much more bigger.
‫And so this elementary is showing the device that is a bit smaller.
‫So if any way, any way, if you think that you want to add much bigger prices in here.
‫And this is just very small.
‫Then what you can do is that after you were done with this, all you have to do is to go back and any
‫here you have to go to the loop property again.
‫And now you have to select this mobile device again.
‫And here you can see that it did.
‫This is a bit smaller.
‫Right.
‫So you need to select this column and you need to go to the advanced and let's see what padding and
‫margin we have added.
‫So we have added hundreds and hundred from the left and right in the normal desktop window.
‫Now you need to go to the mobile again.
‫And here you need to uncheck this.
‫And now we're going to be keeping it to be 50 and 50 from this side.
‫So it totally depends how much you need.
‫So I'd recommend you to have it at least for 75.
‫If if if you think that 50 is basically not good.
‫And then you can go ahead and you can hit, save and close.
‫And now when you will visit the website, you should probably see it perfect.
‫So let's just go out and let's go to the property archive page.
‫Now let's just get one on.
‫Let's move up to the mobile device.
‫Now you can see that everything works in a better way.
‫So if you think that you will be adding more bigger prices, then you need to adjust it that way.
‫So now you can see that we are fully done with it.
‫Now, what you can do is that you can work with the header right here.
‫So we're going to be clicking up to the header right here and we're gonna be taken to the header.
‫And he can see this is hidden.
‫And this is right here coming like that.
‫So what you can do is that you can come up here to this column and you can said this to 25 or just keep
‫it to be 50.
‫Right.
‫So we're gonna be keeping it to be 50.
‫And we're going to be keeping this guy to be 50 as well.
‫Like, so now you can see these are like that.
‫And now what you can do is that you can select this column.
‫This inner section right from here.
‫And then you need to go to the advanced and where its says the responsive.
‫You need to reverse the column on the mobile device.
‫So this should be many should be right here.
‫And the search icon should be right here.
‫And now you can align this to.
‫Right even as well if you want to.
‫So we're going to be aligning this, too, right?
‫And it's fully done and it's working like that.
‫So if you want to incorporate these search, you want to add it.
‫Definitely you can add it like that.
‫And now we are also done with the header as well.
‫Let's go down.
‫Let's go down and see if there is anything we need to do.
‫So this is also fine.
‫Everything is perfectly fine and we don't need to do.
‫But here you can see this is right here.
‫So if you need the Eddo right over here, you can definitely edit with the column.
‫You can send this to 80 percent and you can set this to 20 percent.
‫And then when you are done with that, all you have to do is to just hit update.
‫And now let's just go to let's verify our Web site on the mobile device.
‫So we're going to hit enter.
‫Now we're going to go ahead and we're going to hit inspect.
‫So we've got our search.
‫We've got our menu right here.
‫And we've got everything perfectly coming like that.
‫So everything is fully done and you don't have to worry.
‫Let's suppose and let's choose any different type of phone over here.
‫Sorry, I choose iPhone six, seven or eight that mostly phones have.
‫And this is how it's going to look.
‫I'm like this.
‫Let's just go to let's choose it to be iPhone five or S e.
‫And this is how it should be looking.
‫But what do you have to do?
‫You have to when you are choosing this thing, you have to basically refresh your page again so that
‫your Web site gets loaded.
‫And so on an iPhone five and SC, you can see what is happening, this is going very big right here,
‫right?
‫So what you can do for that, you can move it to the elementor you can come up here.
‫You can set this photo right here and now.
‫Verity's this.
‫Right.
‫You're going to have to click this testimonial carousal and read it.
‫Sees the event.
‫Right.
‫So free mobile you're going to keep its word to be a little less than that like so on 300 pixels and
‫then you're going to want to have to hit update and you're fully done.
‫So now when you will go to the properties right here and then you mean you will refers to speech.
‫You will see that it will be fully done and you don't have to worry at all.
‫So there's LB's looking on an iPhone five.
‫Let's move up to the pixel two and pixel two is fully amazing.
‫So now we are fully done with our mobile optimization.
‫Let's move up to our tablet optimization entity.
‫How does that look?
‫So we're going to go ahead.
‫We're going to switch to the iPod.
‫And this is how it's look on an iPad, which is perfectly okay.
‫So it's perfect.
‫You don't need to do anything, change any change on an iPad.
‫And it's perfectly fine.
‫I'm like this on an iPad pro.
‫This is how it's looking.
‫And you don't have to worry, too.
‫So it is totally perfect on an iPad and you don't have to do any change.
‫Let's just move up to the four K.
‫So on a four K LCD, it's going to look like that on a laptop.
‫It's going to look like that.
‫But since I'm using a very bigger laptop, bigger Mac right here, you can see that this is a bit bigger.
‫But if you're using a small device, a small laptop, you should probably see your website in this manner.
‫Right?
‫You should be seeing the archive.
‫And then he should be seeing one single line of post.
‫You can even increase it if you want to.
‫Depends on the size.
‫Like what size it is.
‫So mostly laptops are in that particular size.
‫Right.
‫So with that resolution, so totally depends on what resolution your web, your laptop is.
‫And this is how it will look like.
‫So now I think we're fully done with the archive.
‫It's the single and the.
‫We're also done with the header and the footer as well.
‫So in the next video now, we will be talking about a different one and we'll be doing the mobile optimization
‫for that.
‫babye.