Kadence Tutorial: How to Make Your Website Mobile Friendly with Kadence Theme and Kadence Blocks.

hey what's up everybody clifton here with clifton wp welcome back to the channel in this tutorial we're going to be learning how to use the cadence theme and the cadence blocks mobile optimization feature to make our websites look great on any device sometimes this is called responsive editing or mobile optimization but for those of you who may not know what that is that's just basically when you customize your website in such a way that whether someone's looking at it on a desktop or looking at it on a tablet or looking at it on their cell phone the website has a great user viewing experience the reality is that between eighty percent and sometimes ninety two percent of people are going to be looking at your website on the mobile device so it's important that you mobile optimize your website or website designs that you build every single time so that everyone can have a great viewing experience no matter what device they're using and the beauty of cadence is that cadence or cadence blocks will actually do a lot of the heavy lifting for you so if you guys are ready for this tutorial let's go ahead and dive in and learn about some mobile optimization [Music] okay so to follow along with the mobile editing for cadence theme or cadence blocks tutorial here you're gonna need a website that you've built using the cadence theme or cadence blocks and so i am using this ecommerce website so this is a custom e-commerce website that i created a tutorial on and if you followed along with that tutorial you should have a website like this if not any any website will do as long as it's using cadence theme and cadence blocks but this is a most this is a very recently released tutorial so um you can basically follow along if you've been following that tutorial and what i'll do is i'll link to that tutorial in this video somewhere or in the description below so that if you need to go and check out that tutorial it's a good tutorial on how to build this ecommerce website using the cadence theme and cadence blocks free version there's also a pro version coming out very soon so if you're not subscribed to the channel make sure that you subscribe so that you can get notified hit the notification bell so you can get notified when i release that tutorial and many other tutorials so i have a lot of cadence based tutorials coming out because there's just so many awesome things that are going on with cadence today all right so let's go ahead and dive right into the tutorial so here is uh your website and remember when i said that cadence actually does a lot of the heavy lifting when it comes to mobile optimizing your page so let's go ahead and just explore what some of that looks like so if we go over here to the customizer you'll notice that almost in everywhere in the customizer that has to do with a layout you'll find mobile editing options so here is what i mean let's go general for a minute here and just go to layout right here if you look at the layout this hand this handles the max width and the content areas of any website that you're building with the cadence theme and you'll notice that with every almost every option where it's possible you'll have a desktop icon a tablet icon and a mobile icon and what this is allowing you to do is to set different settings for anything that you're customizing here right so for instance this content left right edge spacing as an example and the desktop this is 1.5 rims and you can also change this to pixels or m's or or view height whatever whichever one that you want to use they all work fine and when you toggle between the tablet so you get to see what the tablet version looks like right and if you're not happy with any of this then you can go ahead and make changes to that and you can see what the mobile device looks like so this is what it looks like on the mobile device so already i can see while this text is really big right here so this may not be and while while people can still read it i mean i want them to see this text like this right but you can see without really doing much optimization at all i haven't done it i haven't put anything in from any of anything in there the website actually already looks great on mobile devices so there's some things that we just have to adjust and that's what i'm going to be showing you here in a moment but throughout the customization process of this almost everywhere that you are in cadence whether you're in the customizer or you're in the editing section itself you will see these options and you can go ahead and make your adjustments accordingly so with that let's go ahead and do that right now let me go ahead and set this back to my color palette that i have here go ahead and publish this let's come out of here and all right so here is our website and we're just going to start with the home page and you can follow along if you have the you should you should if you've built this already using the ecommerce tutorial that we released then that's great if not just apply to your own website that you built with cadence or apply it to a starter template it all works the same okay so the first thing you want to do is go to the go to edit page so you're in the editing view right editing interface of the site all right and so one of the things that you'll notice is that whenever you're building a site you should be building your site using the row layout right so rows and sections and those have these toggles for viewing it on a desktop this is a tablet and this is your mobile device your mobile phone okay so you'll notice that depending on which one you're on there are different options for instance if i'm on this row here and i'm looking at the desktop here are my options right here okay for making any structural changes to the structure here for a desktop for a tablet device i now have tablet options and this is what i meant by cadence doing a lot of the heavy lifting here the tablet options are actually pretty amazing you can have a separate tablet background so if you want to set a custom background for tablets you can do that just toggle this on and upload whatever image needs to go there right you can also have no image on a tablet so the customization capabilities here you can have your different overlay for a tablet the customization capabilities here are pretty granular in in cadence and this is this is in the free version okay so same thing if you go to a mobile device you also have spacing for mobile you can set a separate mobile background if you want and you can set a separate mobile overlay so the experience from desktop to mobile device can be very different depending on your choice okay so with that let's go ahead and just customize this first section right here for our mobile devices now before we do that i do want to show you one thing sometimes there is a tendency for what you're viewing here not to look exactly as it would on an actual mobile device okay so because of the spacing and because of how gutenberg operates you know gutenberg's always trying to show you areas where you can add additional content right so by doing that it creates the spacing and that might throw some people off also you may be looking at this and going like for instance let's look at this right here okay so i'm going to grab this row and i'm going to look at it on a tablet so in the editing view you can see how all this looks kind of strange actually it looks pretty good but let's look at it on our cell phone okay so you see how it kind of makes everything look strange i want you to know don't get thrown off by this this isn't really how it looks uh when you're looking at it on uh on an at your mobile device so a good way to test that and a good tool to have is google chrome so if i uh check out this website on google chrome so i'm gonna go open up a new tab here and and what i'm going to do is i'm just going to view this using google's developer tool to access that if you're using chrome go ahead and right click on anywhere on the page and click on inspect you should get this tray showing up for you somewhere it could show up on the bottom or it might be on the right hand side it depends on where you dock it i have mine docked on the bottom so when you're looking at this uh typically it's it opens up uh like this uh let's see here let's turn that off okay typically it'll open up like this so i was already doing some mobile editing before and it opened up in the mobile view this icon right here allows you to select different elements so you can see the details of each element right you can see what what code is behind that and what the classes and id ids are this right here is the mobile component so this will toggle on mobile viewing so if i click on this it's now showing me what it looks like on a cell phone and you can change that here so i can come here and i say well what does it look like on an ipad right and then it opens up to show you what it would look like on an ipad okay so one of the things that you'll notice is if this is i haven't done any mobile editing at all but one of the things that you'll notice is as you scroll through here you can kind of see what this will actually look like and you see that it's actually very different from when you're doing the mobile editing so it's good to have another page open so you can kind of see what this looks like and you can go back and forth and make your adjustments as best as you can and then a third thing you should do is you you can't have an actual mobile device uh with you and just double check to make sure that everything looks good so you can kind of see already without even doing much work on a tablet this looks really good i mean there's some things we can adjust but this looks really good and if i were to look at it on a cell phone so let's go let's look at it on iphone 10 right you can note you will notice that the products actually line up very well they don't they're not squished like it looked over here okay so maybe that may be something that may be fixed later on in gutenberg so that it matches kind of what we're seeing here in google chrome all right with that little sidebar aside let's go ahead and actually start making our changes so the first thing that i want to do let me go back to the desktop view the first thing that i want to do is i want to make changes for the tablet so i'm going to select this go to the tablet and in looking at this i'm i want to adjust the size of this text okay so i'm going to click on the text this is a advanced heading and i'm gonna look over to the right and here you can see your toggles for the for the device that you're on so right now we're on the tablet which is highlighted and the others are grayed out so for this tablet i whatever changes i make now are only going to apply to the tablet view of the page so for this specific element so for this one the font size here i can now make my adjustments right so i can and you can toggle back and forth so i can go here and say okay what does it look like it's 95 pixels here if i go here and maybe i want to cut that down to 75 what does that look like all right so 75 seems to do the trick and that looks great now right and then i'm actually happy with the rest of this so i don't need to make any other changes and that's that's completely done all right and then you just keep progressing through so here we are here right and this is a new row so when i when i highlight this there's a row here and you can always open up the tree to kind of see where you're at so there's a row layout here okay this is the outer row and this is actually fine but this inner row that contains the four columns i may not like the way this is presenting right now so maybe what i want to do is i want to structure this a little bit differently if you look over here where it has the tablet layout you'll see a bunch of layouts that it offers you right so with a click you can actually reconfigure how this lays out so for this one this is currently how it's displaying i may want it to display in a two column grid like this because i have four items so if i click on that now my items are displayed in this table format right two columns one two things on the top and two two benefits on the bottom and that's it i'm done there that looks great for me okay and then you just keep progressing forward um and then so when we look over here let's select this row right this is actually a three column row and in this three column row it's it's saying to me okay uh we have this one here and we have these two over here the text is a little bit jumbled so there may be some more work that we need to do here but we can test out different layouts and here are the layouts that are being offered okay so i could say well let's have everything on its own column so we click on this one and now everything is on its own column okay this looks pretty good right we can also test out different ones so don't be afraid to test so you know this is a bit of a larger column on the desktop so what does it look like like this where we have a larger column up here and then these two laid out this way i actually prefer this this looks a lot better so we'll stick with that okay i'm going to leave the text at the same size it's always good for people to be able to see text and then we can progress through now when we get over here to this popular watches section this uh this this is called the hand-picked block hand-picked products block from woocommerce so if you have woocommerce installed then you have access to this block and if you take a look at the tutorial we did a tutorial that i launched a few days ago you'll see that this one actually comes with its own sort of automatic uh optimization so this is already optimized we don't need to make any changes here okay for this block this looks fine this looks great and so we progress on this looks fine now we're on the tablet this looks fine so the rest of this looks fine all right we don't need to make any more changes on the tablet view now here on the opt-in we might want to make some changes here right because everything looks kind of smooshed so i'm going to go ahead and select that row and i bet this has an inner row because it's typically how i build things here so here's the interval right here and then here are the options so i'm looking at it now and maybe we're thinking maybe this will be better aligned if they're one on top of the other so let's go ahead and do that so now we can see because we're using the gradient to create that overlaying effect at this point it doesn't look like the gradient is actually being aesthetically effective so over here on the tablet background overlay i'm going to open that up i'm going to toggle it on and from here what i'm going to do is i'm going to set change the overlay color first i'm going to make it full opacity and then i'm going to go to the overlay color here and we're just going to set that to this lightest color all right and now we can see right here that this is now created of space so that we can actually see the the offer okay all right so that looks good to me here and we're still able to maintain the outside overlay here from the uh from the outer from the outer row right okay so the outer row has an overlay and the inner row did not so now by selecting this inner row layout and adding a background overlay that matches the outside we actually create a really cool effect all right and with that we're actually done with our tablet editing i mean look at how quickly look at how quickly with just a few point and clicks you now have uh tablet optimized now the next thing that we need to do is optimize for uh people's cell phones so we're gonna go ahead go up here move over to the right select the cell phone and then select the start from the very top select the outer the first row okay so now in looking at this there's a couple of things that are happening here one the model is cut off and i think i'm fine with that if you want to move the model in into the space that's fine but i'm actually okay with it because it's really more about the offer and i really want people to see the offer and we have a solid background here so this is fine but i don't like that the 75 off is broken up into two lines so i'm going to go ahead and select that advanced heading make sure that i'm on the mobile device and that's what's highlighted scroll down to the font size and let's bring this down to so we had 95 for desktop 75 for tablet let's check out what this looks like at 45. okay so at 45 pixels uh this actually looks fine let's increase it just a little bit more to see if it will support it and it does okay i think i like it at 75. i'm sorry at 55. all right and then uh in clicking away everything looks uh great looks fine so i'm going to scroll down now some other options you could take you could actually select the button here and maybe on the mobile device i want the button to be centered okay you can do that if you want i actually prefer to be to the left it's fine there and as we scroll down you can see here this is already automatically lining up beautifully i don't need to make any changes here thank you cadence and then when we come over here to this um to this section everything is actually lining up uh very well so if i select this right here this is actually built in a row so i cannot actually make changes in here if i wanted so if i wanted to have a different mobile background for this i could right so if i wanted to maybe move the model over so let me show you just what that looks like we won't keep that but i'll show you what it looks like so because we built this in a row itself and if we look at the link tree here and there it is right this real layout real layout has uh you know some of the best mobile optimization capabilities here so because we did that i can go here now to this mobile background and i can say set a custom background for this and i can select an image it can be the same image or a different image but let's say it's the same image and i select that image now i can actually use move this image around so if i want to show more of the model there it is right there right so now we can see the model better on the mobile versus it being cut off the way that it was right if i want to move her even further into the frame there she is that's how you can make changes for uh the mobile device this is this is extremely powerful because now you can really really get granular with the customization of your mobile editing so on a mobile device i now know okay people will be able to see the model in addition to being able to see the uh text okay so if we scroll down i'm pretty happy with that we scroll down everything else looks like it's in good place so no need to make any changes there i already know that the handpicked products will doesn't really look like this right because as evidenced by our google chrome we can see what it really looks like so i don't need to make any changes there and here we are so this is the standout section where we're linking to all the all the products all the watch products right so what i want to do here is i want to make this all solid so i'm going to go ahead and select that block okay now that i have the block i'm going to go over to the right and i'm going to set a mobile background overlay that's one color so i'm going to open up the overlay toggle it on right and i'm going to make it full opacity and now automatically it is one color but if you just want to be sure go ahead and click on the color options here and select the color that you want okay so that's the matching color and now everything is visible and looks good i'm going to scroll down some more and we know that this is fine and we're just going to repeat that process over here as well so select the row go to the mobile background overlay turn it on make the overlay opacity full so at 100 select your darkest color for your overlay so that people can see those items all right and let's repeat that for the final one actually this is the final one there we go okay our opt-in here okay our text is too big and there's a lot of padding work happening that's making everything really smushed so this is very very easy to fix we're going to go ahead and select that row and then we're going to select the text making sure that we are on the mobile device option i'm going to come here and i'm going to reduce the font on this one let's reduce it to 16. there we go the 25 obviously too big so let's reduce that to 36 pixels okay that looks great and i'll i'll show you how we deal with the spacing here this this is actually fine and this is all fine so but everything's kind of smooshed in so why is that happening well that's because we have a lot of padding going on here so let's select that row that row layout and we're going to look at the mobile padding and margin and typically what i like to do is on the right and the left i usually set this to 10 pixels on the right and 10 pixels on the left and i'm still noticing that there's still some padding issues here as well so let's select the actual section itself so what we were working on before was the row i'm going to actually now select the actual section you select the section you can tell that you're at the section by looking here it says section or uh if you're looking in your link tree you can see that you selected that section now that i've selected a section i'm gonna go to padding and margin and i'll make sure that i'm on the on the mobile device and then from here what i typically do is i first zero everything out so i can see and then i i can now start bringing things in so let's do 20 pixels on the right and 20 pixels on the left so this looks a little bit better it looks a lot better okay let's try 10 pixels on the right 10 pixels on the left much better okay now the other thing that i want to do here is the spacing that's happening right here there's too much space so first i'm going to make sure that i've selected the advanced heading i'm going to go over here to the right and the first thing i'm going to try is i'm going to match up the line height with the font so we're gonna type 16. so that already looks better then the second thing that i'm going to do open up the spacing settings make sure that you're on the mobile device setting here and on the margin bottom here we're going to put a 5 there and let's try zero okay so that brought it in a little bit closer okay and then i'm going to do the same thing with 25 off 25 off matter of fact i may even test to see if i can go a little bit bigger see how far i can go that looks good right there so 54 pixels and actually at this point i'm very happy with this so this looks good so now that i've made these changes i'm going to go ahead and click on update all right and we're going to close this out and at any time you can just switch back to your desktop view if you want so now let's check to see if our mobile optimization actually worked and this is where your google chrome developer tool comes in handy or you could just look on your mobile phone yourself and check it out you'll be it even looks even better there but let's because we're in the tutorial and i got to show you what this looks like i'm going to do it on google chrome so i'm going to go to a new new tab load up the site and actually let's close this out so you can see how i do it from the beginning i'm going to refresh the page now that i've refreshed the page i'm going to right click anywhere click on inspect and this is already set up for a mobile device but let's just go ahead and toggle this back to the tablet view which is an ipad you can do an ipad or galaxy plus 2 ipad alright so here's what it looks like so i'm going to go ahead and just scroll through make sure that my my edits were maintained right so here is the offer being presented nicely here and as we scroll through we have our alignments done properly we can see our categories set up the way we wanted our watches are presented very nicely so the products present very well and how does the opt-in look opt-in looks very good opt-in looks really good okay great so next then let's take a look at uh the mobile device or cell phone which has a smaller screen so we're gonna use the iphone x as an example and in looking at it i can see that this presents very well i am noticing this is a lot of spacing right here so this is a huge gap and it's up to you to see if you want to see if you want to keep this a lot of real estate so i may want to make this smaller and i'll show you how to do that uh but this is lined up very well our model is in view this is great our categories look really well really good the products are showing up very well but this isn't showing up so let's refresh that all right so i'm seeing that hey our changes here didn't take changes here didn't take so that's fine we'll go back there and take a look at that and then let's look at okay so opt-in looks good so our categories uh didn't get set up so let's go back and let's scroll down to those categories select that row and i'm gonna look here at the overlay settings okay so now that we've selected that row i'm gonna go to the mobile device view so this is what i was talking about sometimes what you see on your section doesn't isn't actually what appears in real life in the real view all right so let's let's make sure that this changes so when i'm looking at it it looks fine here but on the google chrome it didn't look it didn't look correct so i'm going to go over here to the right side and just to be sure i'm going to open this up and i can see here that the normal setup here is clicked on and i did the overlay opacity and i selected the color so perhaps maybe because the actual um whoops let's set that back to where it was okay because the desktop version is the gradient and then i did the mobile version as normal maybe that's creating a confusion there so let's go back i'm going to select this i'm going to click over to gradient okay and on the bottom gradient i'm just going to make the gradient color and the second color be the same all right now that i've done that i'm going to update this to save my changes and then i'm going to go and check on my mobile device to see if that took so i'm just going to switch over refresh actually close this out refresh and then inspect all right you can see now that it did take right it operated correctly so what that tells me is that when you make a change in the tablet in the uh in the backgrounds if you're using an overlay make sure you're using the overlay on your mobile responsive editing which is fine so now i'm going to go ahead and do the same thing for all the others so i'm going to scroll down select the other category row here we'll go over here to the right mobile background overlay switch that over to gradient and just make sure that the second gradient color matches the first one let's repeat it for all the others and this one's fine okay update save our changes click over close out the developer tool refresh your screen then right click inspect and as we cruise through we can see that everything looks fantastic on our mobile device all right so now our home page is mobile optimized now i was talking about this gap earlier on so we can see that there's a lot of space here maybe you don't like this space so let's go ahead and reduce that spacing so if we go over back to our site and we take a look at what's actually creating that spacing so if we grab our let's grab our row here so click on this row then you come over here there are two areas where that spacing could be affected it could be the padding and margin which is at 25 pixels so that's not it and it could also be structure settings where we have a minimum height of 800 here so this height is traveling across all your devices so what we need to do is just set a set a height for each device so maybe on our tablet instead of it being 800 we're going to set this up to be 600 and on our mobile device we're going to set this up to be 400. let's go ahead and update that and then let's take a look and see how that affected our site here so you can see now that we've now reduced the spacing and this looks a lot better right so it now looks much better if you want to increase it more maybe you think it's too close then that's fine but this looks good let's take a look at it on our ipad yeah it still looks really nice still looks really great okay and that is mobile editing using the the cadence theme tool so feel free to do that on every single section you know as you can see the reality of it is is most of your stuff is actually already going to be mobile edited out the gate i just need to get in there and just make some tweaks to everything that you see but for instance if we're to look at this page right now and let's go ahead and inspect it see what it looks like on mobile so we haven't touched anything so we can see on the tablet view it looks very nice right it already looks great if we look at this on cell phone still looks great you almost don't have to do anything all right so it's already set up for you okay ending it here hey if you're if you like this tutorial please go ahead and smash that like button if you are subscribed to the channel thank you very much for subscribing for those of you who have been supporting the channel by picking up cadence or any of the tools i recommend i really really appreciate that thank you so much let me know if you have any questions or comments please put them in the comments section below and then stay tuned because i have more cadence tutorials coming up and we're going to be talking about more e-commerce stuff membership stuff templates dynamic content custom post types there's so much great things about the cadence suite of tools for building websites i do think it's one of the best tools to have in your tool bag if you're a web designer or a person that's just doing this for a hobby you will not be disappointed with cadence so with that i will see you in the next video please remember to subscribe if you're not subscribed hit that notification bell so that you will be notified when i release new tutorials just like this one thank you very much

Channel: CliftonWP

Views: 357

Keywords: wordpress, wordpress mobile friendly, wordpress tutorial, create a website, make a website, how to make a mobile friendly website, how to convert wordpress to mobile friendly, kadence mobile responsive, how to make website mobile friendly, how to make website mobile friendly wordpress, mobile responsive, mobile responsive website, kadence theme tutorial, kadence blocks tutorial, kadence woocommerce, gutenberg mobile responsive, gutenberg responsive, gutenberg tutorial, kadence

Id: Bp3oxyvK_Xg

Length: 34min 0sec (2040 seconds)

Published: Sat Dec 11 2021