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 ⇒ https://wp.discount/host/
✅ Best caching plugin ⇒ https://wp.discount/cache/
✅ Divi with 10% discount ⇒ https://wp.discount/divi/
✅ Elementor Pro ⇒ https://wp.discount/elementor/

⇒ Top video's I recommend:
   • Yoast SEO vs RankMath vs All In One S...  
   • Secure Your WordPress Website 2024 | ...  
   • BEST Mailchimp Alternative ⚡2500 subs...  
   • How to Migrate WordPress Website With...  
   • How to Make a WordPress Website in 20...  

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: https://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 /wpadmin/... 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