How to Optimize Divi 4 for Mobile with the Visual Builder
In this tutorial, I walk you through how to optimize your Divi 4 website for mobile using the Visual Builder. I often use custom CSS and media queries to adjust the responsive setting on my Divi 4 websites but the visual builder provides some very handy built in features that particular new designers to Divi are unaware of.
In this, I walk you through how to make padding, margins, text and images to look great on mobile and tablets as well as how to adjust the Divi 4 sections, rows and modules to be more responsive. Enjoy!
Are you ready to BUILD and GROW your web design business?
I've created a FREE 10-STEP ACTION PLAN to help you fast-track your web design success.
Josh,
Awesome tutorial. I especially like the max-width trick. Thanks so much!
Jason
Thanks, Jason! Glad it helped. That little trick has helped me tremendously for some time now 🙂
Awesome tutorial Josh! When will you use the max width tip vs manually making adjustments in design?
Thanks, Ben!
I generally use max-width when I want to limit the width of any text section or graphic section. So pretty frequently just because I find it easier to update across all pages. And you could go one step further and make a max-width class that applies to several areas of the site incase you need to make site-wide changes 🙂
Hope that helps!
Great tutorial. Don’t forget though, you can set max width of a row through native divi features, you don’t need to use CSS to achieve that 🙂
Hey Paul, yeah it’s interesting because there is a max-width feature on SOME modules but not ALL. Like the code module, video modules, etc. I’ve found this trick to be very useful because every module as a Main Element area. I’ve also found that the max width feature is automatically set to percentage which defeats the purpose on mobile. I think you can change it to px in the settings but sometimes px revert back to percentage.
Thanks Josh. Another really useful tutorial!
Thanks, Eddie! Glad it helped. Really appreciate the donation as well 🙂
Sweet tip Josh thanks! – Slowly making the transition to Divi for some client sites and things like this really help to Bookmark for both me and my team!
AWESOME! Thanks for the feedback, Ashley 🙂
You are doing a great job here, Josh.
I have learnt a lot from this video especially the image overlapping.
Thanks.
Awesome to hear, Sola! Thanks so much for the note.
a huge compliment for your awesome tutorials > just a few missing and I’ve watched them all
I am German – living in Barcelona, already 56 and my ears are not the best anymore 🙂
your pronunciation for a non native English is excellent !!!
and I also feel the fun you have from time to time … click … clack … done
I am new in Divi (app. a year), haven’t done too many things here yet but your tutorials already opened some doors which is highly motivating to continue …
expect a donation by PayPal soon (well deserved!!!) and I am thinking about to pre-order the maintenance plan … the €197 price point > got if from Jon Loomer?
🙂
Great work.. Thanks for the video.. very helpful ..
Keep sharing ..
Thanks Kalpana!
Great video
I could not follow completely though simply because in visual builder I just don’t have the features you are showing. I do not see the option to choose between tablet and smartphone. I have as far as I know the latest update of Divi (3.17.2). Any thoughts on this?
The options might look a little different now but as long as you click the mouse icon and go into responsive settings you should be good!
Hi, great video, so helpful! Just one question. How do you optimise a site that has a full-width header with a transparent menu? I’ve tried changing the menu colour on the mobile but it cuts off most of the slider on the mobile version on this site http://word-bomb.com/. What’s the best thing to do in this case?
Hey Yvette, I think I know you mean…in that case I’d adjust the margin top or top of the slider on mobile to push it down below the header!
These features no longer exist
It’s all still 100% relevant with the new versions of Divi. You can find even more mobile adjustments within each module.
You don’t know how many times you have saved this non-web designer in charge of a huge school website! Thank you!!