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

In this video you are going to learn how to use the Kadence Theme and Kadence Blocks Mobile Optimization Features to make your websites mobile friendly and look great on any device.
Enjoy!
📺REFERENCE TUTORIAL VIDEO FOR THIS TUTORIAL
Kadence Tutorial: How to Create an E-commerce Website in WordPress with Kadence.
• Kadence Tutorial: How ...
Timestamps:
0:00 How to Mobile Optimize Your Website with Kadence
2:36 Overview
8:13 How to Use Google’s Chrome Developer Tool for Mobile Optimization
10:28 How to Mobile Optimize Headings
11:39 How to Optimize the Row Layouts for Tablets
12:37 How to Mobile Optimize with Kadence Column Layouts for Tablets
14:28 Mobile Optimizing for Tablet Backgrounds
16:16 How to Mobile optimize for mobile Phone Screens
18:21 How to add separate backgrounds and overlays in mobile devices
22:52 How to mobile optimize headings for mobile phone screens
25:17 How to Verify and See your actual Mobile Optimizations
32:47 Thank you and Subscribe for the Kadence Pro Version!
🧰TOOLS I USED IN THIS TUTORIAL
✅ WordPress CMS: FREE
✅ Gutenberg Block Editor: FREE
✅ Kadence Free Theme: FREE
✅ Kadence Blocks: FREE
✅ Domain & Hosting by Siteground: cliftonwp.com/host
🧰 FAVORITE WEBSITE BUILDING TOOLS
✅ Kadence Theme Pro - cliftonwp.com/kadence
✅ Kadence Blocks Pro - cliftonwp.com/kadence-blocks
✅ Kadence Conversions - Kadence Pro Bundle - cliftonwp.com/kadence
✅ Domain & Hosting by Siteground: cliftonwp.com/host
✅ WordPress CMS: FREE
✅ Gutenberg Block Editor: FREE
✅ Kadence Free Theme: FREE
✅ Kadence Blocks: FREE
🏆RECOMMENDED EMAIL MARKETING PROVIDER
✅ Mailerlite: cliftonwp.com/mailerlite
🏆 BEST HOSTING COMPANY
✅ Siteground: cliftonwp.com/host
✅ WP Engine (Premium managed hosting): cliftonwp.com/wprocket
🏆 BEST PRO GUTENBERG BLOCK PLUGINS
✅ Kadence Blocks: cliftonwp.com/kadence-blocks
⭐ RECOMMENDED PRO WORDPRESS THEMES
✅ Kadence Premium Theme: cliftonwp.com/kadence
✅ Astra Pro: cliftonwp.com/astra
⭐RECOMMENDED PRO FORM PLUGINS
✅ Gravity Forms cliftonwp.com/gravityforms
✅ Fluentforms : cliftonwp.com/fluentforms
🏆 BEST SPEED PLUGIN
✅ WP Rocket: cliftonwp.com/wprocket
⭐ BEST WORDPRESS PAGE BUILDER
✅ Beaver Builder: cliftonwp.com/beaver-builder
⭐ BEST COMING SOON PLUGIN
✅ SeedProd: cliftonwp.com/seedprod
AFFILIATE DISCLOSURE
Please note that any links within this video and its description may contain affiliate links which means that if you click on one of the product links and purchase a product, I may receive a small commission. The commission does not increase the price you pay for the product and you can always purchase directly from the source. By using my affiliate link, you are supporting the work of the channel and I thank you for that.
Lastly, All of the opinions in this video are my own. I did not receive any compensation for making this video. Thank you for watching and thank you for your support!
#cliftonwp #kadence #kadencepro #kadencetutorials

Пікірлер: 91

  • @sail4horizon
    @sail4horizon2 жыл бұрын

    Clifton, that was really great. I've never seen anyone do as good of a job explaining it as you did there. Definitely a subscribe from me!

  • @CliftonWP

    @CliftonWP

    2 жыл бұрын

    Thank you so much! I appreciate you watching and thank you for the Sub!

  • @yashwantraikwar1432
    @yashwantraikwar1432Ай бұрын

    Thanks Clifton, you saved my lots of time ❤

  • @FaheemMarketer
    @FaheemMarketer6 ай бұрын

    Nice tutorial Clifton! Keep up the good work!

  • @OlexDesign
    @OlexDesign2 жыл бұрын

    Great tutorial - as always - thank you! What would be interesting to see is how you approach editing viewports for tablet landscape, small desktops or large tablets. In many cases the 3 viewports Gutenberg offers are not enough to make a site work well throughout different viewports.

  • @thepurpleufo
    @thepurpleufo2 жыл бұрын

    The Greatness of Clifton just goes on and on. Best tutorials, comes across as such a nice guy, and *so* generous. Thank you sir.

  • @CliftonWP

    @CliftonWP

    2 жыл бұрын

    Thank you! Thank you! Much Appreciated!

  • @inspiredtothrive
    @inspiredtothrive2 жыл бұрын

    Dropping gems early this morning!! Keep it up. You’re adding tremendous value to those who need this information. 💪🏽

  • @CliftonWP

    @CliftonWP

    2 жыл бұрын

    Thank you Brother!

  • @constancephoto6512
    @constancephoto65122 жыл бұрын

    Thank you! Great Kadence theme and block tutorial as always. You detail and carefully explain all the great features Kadence provides for making my sites mobile friendily - that would take me hours (days) to uncover.

  • @CliftonWP

    @CliftonWP

    2 жыл бұрын

    Thank you!

  • @KrystalKnapp
    @KrystalKnapp Жыл бұрын

    Clifton, your tutorials are the best! 🙏🏼

  • @CliftonWP

    @CliftonWP

    Жыл бұрын

    Thank you Krystal!!! I appreciate you!

  • @StanleyDay
    @StanleyDay2 жыл бұрын

    AWESOME!!! This was an absolute lifesaver. Keep up the great work Clifton.

  • @CliftonWP

    @CliftonWP

    2 жыл бұрын

    Thank you Stanley! Glad it helped!

  • @adventure4you519
    @adventure4you5192 жыл бұрын

    As always a very helpful tutorial. Thank you for taking the time and sharing it with us.

  • @CliftonWP

    @CliftonWP

    2 жыл бұрын

    My pleasure! Thank you for watching!

  • @drhenry24
    @drhenry24 Жыл бұрын

    Clifton, you're the man! This helped so much and right when I was getting frustrated trying to figure out some things with the way my website was displaying on mobile. Thanks!

  • @CliftonWP

    @CliftonWP

    Жыл бұрын

    Thank you David! Glad you found the video helpful!!! Thank you for watching!

  • @stevestapelberg9163
    @stevestapelberg91632 жыл бұрын

    At last! - an easy to understand tutorial on mobile optimization using the block editor. I have tried to work with the block editor numerous times in the last 18 months or so, and because of the difficulty in trying to do mobile optimization ... I returned to page builders each and every time. This at last gives me the knowledge of how to do it. In fact, I've also been looking at another block editor, and this just gives me a nudge in the direction of Kadence. Thank you Clifton, much appreciated. Subscribed and looking forward to more goodness.

  • @CliftonWP

    @CliftonWP

    2 жыл бұрын

    Thank you, Steve! Glad this was helpful! I appreciate you watching and I appreciate the sub!

  • @unpluggedfreedom1
    @unpluggedfreedom1 Жыл бұрын

    Your videos are great. Ive been learning a lot and been loving Kadence

  • @CliftonWP

    @CliftonWP

    Жыл бұрын

    Thank you! I appreciate you watching and very glad that you find the videos helpful!

  • @cindybrewty9013
    @cindybrewty90132 жыл бұрын

    Another great tutorial. Especially on the mobile optimising. And you have such a calming voice & tone which makes it so much easier to understand. Thank you again.

  • @CliftonWP

    @CliftonWP

    2 жыл бұрын

    Thank you Cindy! I appreciate you watching! More to come!

  • @artseajody
    @artseajody2 жыл бұрын

    Wow! I've watched several tutorials and yours finally made me understand how to mobile optimize my new travel blog! The Chrome Inspect tip was a game changer for me. Thanks!

  • @CliftonWP

    @CliftonWP

    2 жыл бұрын

    Thank you and You are very welcome! I appreciate you watching!

  • @kozmicmotivation
    @kozmicmotivation10 ай бұрын

    Hi Clifton! Your teaching style is awesome - it's like learning from a friend. Big thanks for sharing your knowledge! I'm hitting that subscribe button without a doubt. Looking forward to more of your cool stuff!

  • @CliftonWP

    @CliftonWP

    10 ай бұрын

    Thank you so much! I appreciate you watching and thank you for subscribing!

  • @clarinejenkins4457
    @clarinejenkins4457 Жыл бұрын

    so very helpful, I can't thank you enough!!

  • @CliftonWP

    @CliftonWP

    Жыл бұрын

    Thank you so much Clarine!

  • @tfisher
    @tfisher Жыл бұрын

    Wow. Very clear and well presented. New Subscriber!

  • @CliftonWP

    @CliftonWP

    Жыл бұрын

    Thank you Thomas! I appreciate the sub! More to come! 🙂

  • @SoloTravelBlog
    @SoloTravelBlog2 жыл бұрын

    Amazing video, dude. Thanks a lot for posting it!

  • @CliftonWP

    @CliftonWP

    2 жыл бұрын

    Thank you so much!

  • @NEERAZDHAMI
    @NEERAZDHAMI7 ай бұрын

    Thank you buddy thanks a lot 🙏 😊

  • @njvanheerden2157
    @njvanheerden21572 жыл бұрын

    Very well done thanks Clifton. Subscribed.

  • @CliftonWP

    @CliftonWP

    2 жыл бұрын

    Thank you so much! I appreciate you watching and thank you fo the Sub!

  • @azzar0
    @azzar02 жыл бұрын

    thanks alot duuuudd !!! i just got my 1st customer with kadence u convinced its BEST THEME OUTHERE ! very easy and easy learning curve ... THANX ALOT MAN !

  • @CliftonWP

    @CliftonWP

    2 жыл бұрын

    You are very welcome Andrei and congratulations on getting your 1st customer! That is HUGE!!!! Keep going and wishing you more success on your journey! I appreciate you watching!

  • @KaiBuskirk
    @KaiBuskirk2 жыл бұрын

    Good One! Thanks!

  • @CliftonWP

    @CliftonWP

    2 жыл бұрын

    You're welcome!

  • @kennymanchester
    @kennymanchester10 ай бұрын

    You do have a gift for teaching Clifton. This is another real example of how to for Kadence. I am trying to match up some of the mobile styling and control features in the latest version of Kadence. I still haven't got the hang of finding the stuff I want quickly. I know it's there, but a lot has moved around since you made this helpful video. Is there any trick that I'm missing? Thanks again!

  • @rogeriomendesschneid
    @rogeriomendesschneid Жыл бұрын

    Thanks for recording.

  • @CliftonWP

    @CliftonWP

    Жыл бұрын

    You are very welcome! Thank you for watching!

  • @fin31428
    @fin31428 Жыл бұрын

    Brilliant..!

  • @CliftonWP

    @CliftonWP

    Жыл бұрын

    Thank you so much!

  • @Whitenoise541
    @Whitenoise541 Жыл бұрын

    Thankyou for your help ❤

  • @CliftonWP

    @CliftonWP

    Жыл бұрын

    You are welcome Ricky!

  • @major5maximus
    @major5maximus2 жыл бұрын

    Man, I looked for hours trying to change the layout but no one had a good answer until now. I was trying to adjust the layout within the post layout settings. Big mistake. Thank you for taking the time to make this video

  • @CliftonWP

    @CliftonWP

    2 жыл бұрын

    You are very welcome! I appreciate you watching!

  • @symmarketim4064
    @symmarketim40642 жыл бұрын

    thank you sir, it is a very good educational video.

  • @CliftonWP

    @CliftonWP

    2 жыл бұрын

    You are most welcome!

  • @sheikhnasim3048
    @sheikhnasim30482 жыл бұрын

    IF We Want Two Coloum For Product Layout In Mobile Right Now It Showing One Product...How To Do That....

  • @StephaneGirard-tennis
    @StephaneGirard-tennis Жыл бұрын

    Hi Clifton and thanks for your videos, I built my website with it and I'm glad with the result. Only one question : how is that possible to show picked-up products on homepage on 2 columns on mobile ? I can't do that, but archive pages show 2 colums on mobile so I guess it can be possible on homepage. Thanks for your answer, and best regards from France ;)

  • @kreativimpressionz8377
    @kreativimpressionz83772 жыл бұрын

    Love your tutorials. They are so very easy to understand. Could you kindly talk something about affiliate marketing or how to create such website? Thanks.

  • @CliftonWP

    @CliftonWP

    2 жыл бұрын

    Thank you! Appreciate you watching and will add your suggestion to the queue!

  • @dinukakularathna2824
    @dinukakularathna28242 жыл бұрын

    Wow. Very Useful Video & Good Explanation. I have a question. How to show Two products in a row for Mobile device. I edited "Mobile Columns Layout" as Two columns in Customize. After It show two products in a row only for Shop page. How to show 2 products in Home page for mobile devices? Thank You Clifton!

  • @ZephyrOfficial
    @ZephyrOfficialАй бұрын

    How do we make the hand picked products section appear as 2 column on mobile and control the spacing between the products.

  • @ramkhak
    @ramkhak2 жыл бұрын

    Hello. Thank you very much for your video. It helped me a lot. Could you help me solve the sidebar issue? The fact is that in the mobile version on the store page, a sidebar with a product filter is displayed at the end of the page. And I don't understand how to display the sidebar at the top of the page. Sincerely, Ramil.

  • @hosammohamed7107
    @hosammohamed7107 Жыл бұрын

    thank you for your tuts, but when i change something on tablet or mobile view it applied on the other views as well. idk why it's happing

  • @dustinlowman8323
    @dustinlowman83236 ай бұрын

    Hey Clifton! I have a question for you. So I’ve been trying to figure this out now for about a month or so. I have the full lifetime Kadence. My issue is getting the hero section to look good. Let’s say from your video how to made it look on the mobile version…. Is there a way to still incorporate the girl let’s say at the top and then have the call to action right under her? How do I get it where it optimizes and I can make the hero how I want for the mobile. I cannot figure this out what so ever. I’ve looked at I feel every KZread video I can find hoping to find this answer. Please help. Or point me in the right direction. I absolutely have to find this answer. Thank you. I love your your channel!!

  • @three16official
    @three16official2 ай бұрын

    im having so much trouble with the mobile version the BG image as well as text (on Mobile) is very narrow and I cant find a way to adjust the row's width

  • @MAKUvisuals
    @MAKUvisuals Жыл бұрын

    Thanks for the video man, helps a lot. Issue I'm currently experiencing - when editing/customizing in the MOBILE view, this ALSO changes the desktop view/layout. Super frustrating, and wasting hours trying to figure it out. How can one make layout changes and any other customization exclusive to the chosen view? TIA

  • @CliftonWP

    @CliftonWP

    Жыл бұрын

    Thank you MAKU! When editing in mobile view, depending on the module, you will want to make sure that you have the correct view port / screen size icon selected. Sometimes it doesn't effect the editing view when selecting a screen size, so you have to make sure that it is the viewport /screensize you have selected that you are making your edits in. It's happened to me a few times. 🙂

  • @HaifengZhu-pn3uq
    @HaifengZhu-pn3uq Жыл бұрын

    hi, how do I add filter in Kadence? i want visitors on my site can filter my posts by categories

  • @diogordo_2970
    @diogordo_29702 жыл бұрын

    What’s the score on pagespeed

  • @fabrictexture4767
    @fabrictexture4767 Жыл бұрын

    Is that good to scale and fix the image px size to specific device isn't it??? For image optimization . Kindly make tutorial on image optimization etc, Best cache lightweight free plugin ? Best optimize lightweight free plugin? . Or as you like and most importantly at your convenience . Stay Blessed

  • @paulwelburnphotography
    @paulwelburnphotography Жыл бұрын

    Love this video, very well explained, thank you. I have a question...in a row I have 2 sections, on the left there's some Header Text, the right section is blank (looks great on a desktop and tablet device). If I change to the mobile view, the section with the text stays at the very top of the screen with the blank section below it. I've tried hiding the blank section to effectively show just one section in the row so I can align the text in the the middle of the screen. However, this doesn't work, is there a workaround?

  • @CliftonWP

    @CliftonWP

    Жыл бұрын

    Thank you Paul! I appreciate that. From what you have described, it looks like you are doing everything right. If you have no content in that second/blank column, then it will collapse when you view it on the frontend. Just make sure you do not have any padding, margin or a spacer in the second column and you should be good to go! I hope that helps!

  • @kidslife4145
    @kidslife41452 ай бұрын

    My primary menus aren't visible on mobile device

  • @aloSolo
    @aloSolo5 ай бұрын

    Can you please create a blog

  • @user-yk4hf9ve2m
    @user-yk4hf9ve2m2 жыл бұрын

    Hello. Thank you for the video. I have a question. how to set up mega menu for mobile version? It is not displayed correctly, I do not know how to solve the problem. Thanks

  • @CliftonWP

    @CliftonWP

    2 жыл бұрын

    Thank you @Снежана Коверга. Do you have a Mega menu already set-up? Mobile options will depend on what is in your Mega Menu. If you have a link I can see, post it here. Check out this mega menu tutorial for some mega menu tips: kzread.info/dash/bejne/hnqD0dVpkrewqdY.html

  • @Virtual360Gallery
    @Virtual360Gallery Жыл бұрын

    Hey I have a gallery set to three image column. However, when I switch to tablet or phone mode, it's still the same gallery type but not optimized for mobile. Is there a way to change the gallery type for mobile or how do I male a gallery good for mobile?

  • @CliftonWP

    @CliftonWP

    Жыл бұрын

    Thank you! The advanced gallery block from Kadence automatically resizes to accommodate the screen viewing it. If yours is not doing that, I recommend reaching out to Kadence Support. so they can take a look.

  • @imAishax
    @imAishax2 жыл бұрын

    There is no mobile icon on my website what's the problem?

  • @lisajonasson2808
    @lisajonasson2808 Жыл бұрын

    Thank you! :) I have a question. When I make changes in the mobile view, they also apply on how it looks on a computer :/ What am I doing wrong? :( //Lisa

  • @CliftonWP

    @CliftonWP

    Жыл бұрын

    Thank you Lisa, when you make changes in mobile view, its very easy to accidentally, tweak changes that apply to the desktop view, thinking that you are in mobile view. I do it all the time. 🙂 This is because sometimes the settings are applying to the desktop view and the preview is in mobile view. You'll have to make sure that your changes are being applied to the mobile view only.

  • @AteekSheikh
    @AteekSheikh2 жыл бұрын

    Great Detailed Tutorial. Question: Is there any way to add "Out of Stock" badge in Kadence?

  • @CliftonWP

    @CliftonWP

    2 жыл бұрын

    Thank you Ateek! Yes, if you are using Woocommerce, this is a setting in your Woocommerce inventory management options that can be found when adding products.

  • @AteekSheikh

    @AteekSheikh

    2 жыл бұрын

    @@CliftonWP No there isn't or at least I'm not able to find.

  • @serpantinthewild
    @serpantinthewild2 жыл бұрын

    You can actually get a mobile view by reducing the window size of the browser to a rectangle, but don't know if it's accurate

  • @Ahmad_Sandhuu
    @Ahmad_Sandhuu Жыл бұрын

    for some reason my website is not showing properly on mobile with kadence theme (website logo is all over the place and menus are also destroyed)

  • @CliftonWP

    @CliftonWP

    Жыл бұрын

    Thank you. Can you post a link so I can take a look?

  • @natalieheblesnunez1869
    @natalieheblesnunez1869 Жыл бұрын

    im not seen the "block" part in wordpress editor

  • @CliftonWP

    @CliftonWP

    Жыл бұрын

    Thank you Natalie! Can you tell me specifically what you are looking for and I will see if I can help?

  • @cvalencia31
    @cvalencia312 жыл бұрын

    Question, how do you hide things in mobile view? I have a button on my desktop view that I don't want to have in a differnet location. How do I do that?

  • @CliftonWP

    @CliftonWP

    2 жыл бұрын

    Hi Cesar! The best way to hide something in mobile is to place it inside of a section or row. Then in the Row/Section visibility option to the right, set the toggle on for mobile which will hide it in mobile view. I hope that helps! Cheers!

  • @cvalencia31

    @cvalencia31

    2 жыл бұрын

    @@CliftonWP thank you so much I'll give that a try.

  • @cvalencia31

    @cvalencia31

    2 жыл бұрын

    @@CliftonWP oh finally figured it out. I had to duplicate the entir row and then just made one row visible on desktop and the duplicate visible for mobile. Essentially making 2 versions. Thanks!