‫whatsup guys and welcome back, so as in the previous video, we actually design this pretty
‫page basically for the mobile devices.
‫So this is what we build right here, OK?
‫And so now in this video, we're going to be talking about how you can go and how you can build the
‫archive page.
‫So this was for basically the tablet.
‫So in this video, we're going to be talking about how you can build how you can basically do the mobile
‫optimisation for the archive page, which is going to be this particular shop page.
‫OK.
‫And this is also going to be this particular archive or basically the category page.
‫And that is also going to be for these search pages, too.
‫So it's going to affect every of the archive pages that we have over here.
‫We're going to be talking about how we can go and how we can design it.
‫So we're going to be starting it from the shop page we are gonna first.
‫Take a look at how our Web site looks.
‫And this is our new Web site is looking on a tablet device.
‫You can see it's kind of better and it seems to be good.
‫So let's just go and let's click over here and let's select iPhone 10 and let's see how does this look
‫on the iPhone.
‫So we're going to go we're going to refresh this and this is how it's looking.
‫So you go down first.
‫You're getting the sidebar.
‫And what we have to do, we have to bring the sidebars to the bottom and first the products.
‫Then here you can see the two products are being shown, which is kind of good.
‫I like it.
‫How cool is it looking?
‫You can see.
‫So there is nothing we have to change over here.
‫And this is also working.
‫So all we have to do for the mobile is to bring the sideburn to the bottom.
‫And that's all.
‫Now let's talk about the iPad, iPad, pro or iPad.
‫And we're going to select this.
‫And this is out the Web site.
‫The look on an iPad.
‫So leave this toolbar menu because this is what we are going to be doing later on.
‫And so this is the side Bar.
‫Now, what you can do is that you can bring this sidebar down below.
‫OK.
‫You can do it this way, or you can just give some more spacing for the sidebar if you need.
‫But I think it's fine.
‫It's fine to have the sidebar at the bottom, but you can see that we are using the infinite scroll.
‫So infinity scroll means that we have to go down, down, down till all the products are loaded.
‫Okay.
‫And then we're going to get to see the sidebar.
‫So what is.
‫Which is really a bad part.
‫But let me tell you one thing, is that sidebar on mobile devices are not pretty much used because everything
‫that you're going to be giving is right over here, only to filter by prices right here.
‫So you can just basically keep the sidebar at the bottom.
‫And that's what I would recommend you on a mobile device, because you already have got this search.
‫You already have got this cart.
‫You already you've got this menu.
‫So these are the things that are mostly used on a mobile device.
‫So I'm talking about your perspective are basically the behavior of the user.
‫So we're going to be designing it that way.
‫So let's just go to let's break it.
‫First of all, you have to go to the shop page.
‫Now you have to click edit for the elementor and you have to select the product archive.
‫Now, if you remember, we created two separate archive pages for the shop page and for the category
‫page for the search page and other tags pages as well.
‫So you don't have to worry for that.
‫And now you have to basically click over here and you have to select mobile.
‫And you can see we're getting first.
‫This particular sidebar and then the normal desktop, then the normal products.
‫OK.
‫So what you have to do is to click over here and you have to go to the advance.
‫And in the responsive, you just have to say that you want to reverse the columns on mobile device and
‫also on tablets.
‫So now you just have to do it.
‫And if you will visit the page, you will save it.
‫And now if you will view your website here, you can see now that this is how it's looking on tablet.
‫And so sidebar is basically was here and now it's here.
‫And so if you select iPhone ten over here, then you can see that first very getting new products.
‫And then we will be getting this particular sabor.
‫So this is how it's looking.
‫same like this, if you will come up here and see that the mobile products are right here.
‫So this is how basically it's going to work.
‫Now, once you've got your sidebar here, basically right down below, all you gotta do is to just select
‫the tablet.
‫And you can see this is how it's looking on a tablet device.
‫So we've got this.
‫And then we've got this.
‫Now, if you needed to be basically full width carrying the folder, then all you got to do is to just
‫select this to be 100 percent.
‫And it's going to take the full page.
‫And now here is going to be your sidebar or what you can do is that you can keep it to be less.
‫You can keep it to be 65 percent.
‫And you can do this the rest.
‫So 65 minus that is gonna be 35.
‫And this is how it's going to look.
‫Seem like this, you can even keep it to be 30 percent say 30 percent was there before.
‫So this this was really very small.
‫Now, if you are okay with it, definitely go over that.
‫Well, if you want to use to 35.
‫You can choose 35 over here and you can see this is how it's looking.
‫So I'm what we're going to be doing.
‫We're going to be keeping it to be.
‫Hundred.
‫And we're going to be keeping it to be hundred two.
‫That's all.
‫So this is out.
‫It's looking on a tablet device.
‫So now what you can do.
‫You can click over here.
‫You can update it.
‫And now you can just go and you can refresh this page and you can just go to the inspect over here and
‫you can select the iPad from here.
‫And if you will go down, go down, go down.
‫You can see that this is right here.
‫The loader is right here.
‫It's loading the product.
‫The products are being loaded and all your products are loaded.
‫And then the side bar is right here.
‫But remember, one thing I'm telling you again, if you have a lot of products, all the products will
‫be loaded and then you can just go to the sidebar.
‫So which is a sad part.
‫So if you have that prettying and you want to show the sidebar, then you can do it this way and you
‫can keep that to be 35 percent.
‫And this one to be 65 percent.
‫And this is outlooking.
‫So now we're totally done with the archive pages.
‫So all you got to do is to just basically click over here, go to your category archive page and do
‫the exact same thing you did with that particular thing.
‫So all you got to do is to just select this and you have to basically go to the advanced and in the
‫responses you have to select, reverse and reverse.
‫And now here you have to select the tablet.
‫And for the tablets, you have to set this to be 100 percent.
‫And set this to be 100 percent true.
‫And now all you got to do is to just hit update.
‫Now, remember, we have already set this to have the reversed column.
‫Oh, I think we did it this way.
‫We did it here.
‫So I'm sorry.
‫I have I have to.
‫I don't have to do it here.
‫I have to tell this to.
‫No.
‫And I have to set this to basically reverse and reverse on a mobile device as well.
‫And if you visit is at the page.
‫If you will go and you will visit the Web site and you will open up any of the product archive page.
‫So let's suppose that you search for Samsung and then you hit enter.
‫Then you will see that this is how looking.
‫And on clicking the inspect, you will see that all the three products will be right here.
‫And then the sidebar, they'll be here.
‫So that's a great thing.
‫So that's all for right now.
‫We are totally done with the archive page.
‫So stay tuned, guys.
‫And babye