How to make Divi Theme Mobile Responsive | 2024 Tutorial
HTML-код
- Опубликовано: 6 июн 2024
- Your Divi Website looks great, but not so great on smartphones? In this video I'll show you exactly how to edit your website. It's really easy! 👇🏻👇🏻👇🏻 Start here 👇🏻👇🏻👇🏻
Do you want to support me? Leave a like, watch another video from me, buy Divi with 10% discount // a hosting plan with 80% discount via the link below. That will help me enormously to create these free videos for you and keep going!
⇒ Software that I recommend:
✅ Hosting & domain ⇒ wp.discount/host/
✅ Best caching plugin ⇒ wp.discount/cache/
✅ Divi with 10% discount ⇒ wp.discount/divi/
✅ Elementor Pro ⇒ wp.discount/elementor/
⇒ Top video's I recommend:
• Yoast SEO vs RankMath ...
• Secure Your WordPress ...
• BEST Mailchimp Alterna...
• How to Migrate WordPre...
• How to Make a WordPres...
I want you to succeed with your website, so lets get started.
⏱️Timestamps⏱️
0:00 Intro
0:23 Use the Developer Tools
1:15 Switch to phone view
1:20 Hide elements for mobile
1:49 Style hamburger menu
3:08 Too small slider
4:46 Too much white space
5:09 Text left and right margin
6:34 Button alignment
7:03 Titles with wrong line height
7:54 Not centered
9:07 Too small columns
10:08 Column background image
10:42 Column not centered
11:46 Add more to your header
Thank you for watching! 😀
✅For tips and tricks on getting the most out of WordPress, don't forget to subscribe: wpressdoctor.com/sub
🧾 Transscript 🧾
Hey guys, what's up? I'm Matt, and in this video we're going to optimize your Divi website to make it fully mobile responsive. It's very easy, so follow the steps and we're gonna start right now. You might be designing your website you're thinking "Well this looks actually pretty nice on my desktop" but you might know that more than 50% of all your visitors come today via your mobile device. Go over here press on your right mouse button and press 'Inspect' over there. You can see your dev tools you go over here this little icon which says 'Switch to mobile devices' right there. And then you can click on minimize this one. Then on the top over here you can change your dimensions from Responsive to iPhone xR for example. And then you scroll to your website and you think like "Oh this is completely not good, it doesn't look good at all". Look at this. Login to your WordPress website. If you're still logging in using /wp-admin/... that's not a very safe way, to please watch my tutorials about securing your WordPress website, because you don't want to get hacked. Then we go to 'Pages' over there and go to edit with Divi, the page you want to modify. So what we're going to do is click on here. We're gonna switch to the mobile device right there. This header doesn't look very good up there. So there are different things we can do, what your client wants. I really like a clean header when I'm scrolling on my mobile device I don't want to see all this. I want to hide this section entirely. I don't like it. So I'm going to
click on it go to the section settings in here,
I go to 'Advanced' go to 'Visibility' and we're gonna disable it on my phones. And maybe you also want to do tablets. And we press on 'Save'. Here we go now it's gone. Then we go to this section. As we can see this icon, I don't like the color of it. So I click on this module setting it's just a normal menu setting. I go to 'Design' I go to 'Icons' in here and I'm going to change the hamburger menu icon color. With my Global colors I have it right there, perfectly press 'Save'. If you also want to change the search icon color, or the shopping cart, this is the place to do it. Now when you click on here you can see the drop down menu. If you want to change these colors, let me scroll up a little bit and we go to the drop down menu right there. Or maybe you want to give it a different color like this. Well I like this. I don't like the line color it is blue right now, so go to my Gglobal colors make it black. That's way more luxury. And the drop down menu text color should be black. And then the drop down menu active color and then change it to the darker version of the background color. So people know where they are. And well that's all we need to change over there. So we're gonna press 'Save'. Then you can see this "Call us" button over there. I don't like it on mobile, so I'm gonna over there go to 'Advanced' 'Visibility' I'm going to disable it on phones. And I'm gonna press 'Save'. Alright that's the header, if you want to see your page just press on 'Save' page. Now to check how it looks you can of course use your mobile phone or just go to here press Ctrl + F5 on your keyboard. Then the slider is way too....
#Divi #responsive
I hope you can fix your mobile responsive challenges with this video! If you have any questions, let me know! 😁
You have taken the frustration out of sections, rows, moduals and make it fun. Thank you! Of course I subscribed. Why wouldn't everybody?
Hi there! You are very welcome, it makes me happy to read your comment, thank you for taking some time out of your day to write me! Thanks very much for the sub, I really appreciate it! Have a great day and take care! 😃
Thank you, buddy, you're a gifted teacher and a delight to learn from.
Hi David! Thanks man, I really appreciate our kind words! I hope my other video's are also beneficial for you. Have a great day and stay safe!
Many thanks, after much searching I found your video and was able to resolve the issues with my mobile page. Much appreciated 😊
Hi there! You are very welcome. I'm glad you could solve your issues with this video. Have a great day and take care! Good luck with the Online Results Business 😁
dang, i'm in love with Divi. Clean interface and easy to learn!
Hi Krista! Thanks for your comment! It sure is a awesome page builder. And its about to get a whole lot faster and even cleaner interface. Check out my Divi 5 test drive video: ruclips.net/video/lzsoo-nTftg/видео.html 😃 Have a great day and take care!
nice video bro
Thanks man! I’m glad it was helpful to you. I hope my other videos are also useful for you! Have a great day and stay safe! 👍🏻😀
thankuiu
Hi Aprende Con Ander! You are very welcome. I'm glad the video was useful! I hope my other video's are also useful for you 😁 Have a great day and stay safe 💪🏼
Thank you so much
Hi Ajayi! You are very welcome. I'm glad I could help you out with this video! Have a great day and take care 😁
Hi Matt and thanks. Have you got this tutorial for enfold too?
Hi there! Thanks for your question. That is a great idea! I will add it to my list of “to make videos” 👍🏻😀 Have a great day and stay safe!
Hi Matt, isn’t it the case that if you use different measurement scales such as “%” for padding, “rem” for font sizes and “em” for line height, when you design in desktop, then most of this work is automatically done for you on down scale ?
Hi there Larry! Yeah you could try this! It will work in some way, but some scales are scaling on screens that you don’t won’t to scale. So some different layers of blocks or the width of your text column for example. On 4K it turns out really really big while on mobile you think it’s to small… it has its limitations 👍🏻😀
Hi Matt. I just watched you and Ferdi comparing Elementor with Divi video. Useful. I'm an Elementor user but have a client site using Divi, so I'm just learning it.
I have an issue I can't fix in mobile view. In the footer there's a section with 5 columns, which looks great on desktop running left to right, one row. In mobile view, the 5 text modules should stack vertically and centrered but they're not behaving. It's putting 2 modules next to each other in pairs, over three rows instead of 5. The last row, a single module is left algning, not centred. I've checked padding, margins, alignment all in mobile view for both row and module settings, nothing seems to fix it. Any suggestions?
I should mention that viewing it in the Divi mobile view, it looks as it should but in the browser or on an actual phone, it's not correct/accurate.
Thanks for todays video, I found it helpful.
I'm quite liking Divi, I think it's the better option for clients that want to make small updates to their own sites, change text, new photos etc...
Just subscribed.
Hi there! Thanks for your comment and questions. In this case I can’t debug the issue as I cannot login to your website. But what you always can do, create a new section in your footer just for mobile devices. So hide it for tablet and desktop and make sure to hide the original section for mobile devices. Then make a new row just 1 column and copy paste all existing modules inside of the new created section and row. Done 😃.
If you have any questions, let the know! Thanks for subscribing by the way, I really appreciate it 👍🏻😀 Have a wonderful day and stay safe!
Hey there! Thank you so much! Best Video out there on this topic I could find! Will check your other Videos soon. You got one more Subscriber + a Like
I have a question regarding mobile view though. Divi's Tablet view will not work on iPad 12.9 for example. Also most people I know use the Pads horizontal, and not like a book. In the Builder you can set a width for the mobile device.... is that just to see how it looks, or is that actually creating the rule, for divi to start "tablet" mode? What is the easiest way to make sure that the Page looks great on FullHD + UHD + Smartphones with different Screen sizes?
I am a total noob with CSS, but my friend GPT really got me rolling and teaching me a lot. Would you always use:
@media screen and (max-width: 1000px)
.....
For each device and each setting?
Have a lovely weekend and good luck with you channel!!!
Hi there! Thanks for your extensive question and kind words! I’m glad I could help you out. Well it’s true that the responsive settings of Divi native are not that great. I actually make sure it fits on tablets and phones, all other sizes will work automatically. If you need many more options and sizes you can take a look at this plugin: wpressdoctor.com/diviassistant and go to the “Divi responsive helper” plugin 😀
Thank you for the fast reply!@@WPressDoctor . Do you leave the Phone and tablet resolution in divi untouched? I could not find new statistics on browsing with tablets. Which tablet was used the most? horizontally or vertically? In 2021 51% of the tablets were running android.... so first assumption to just go the ipad was wrong. Well I just pick the largest phone and tablet to be sure, that everything will be covered.
I watched the introduction Video about Divi Assistant, but I must say for 80$ /Year the features where a bit underwhelming.... Thanks for the hint anyways. Cheers Mate
Yeah I just use mobile and tablet settings. Well on that website you have to go to another plugin called “Divi Responsive Helper”, not the Divi Assistant.
Hi Matt! Is there any way to add currency exchange module in a wordpress divi website?
Hi there! Thanks for your question! Yeah sure that is no problem I guess. Are you using WooCommerce or is it just a table or…
Wha am I missing? Although I choose mobile settings only, the desktop always changes too! 😫😫😫😫
Hi there! Thanks for the question. That is not supposed to happen! Are you on the latest version of Divi?
I’m having the same issue too. Just wasted 2 hours of work and spent 5 hours fixing it.