Although Divi is pretty much self-explanatory, there are a few tutorials that I utilize in almost all my Divi projects. They offer versatile tweaks that will make your work process run smoother and create a better user experience for your visitors. Enjoy!
Updated 2019-10-17
👉 Free course: Create a Stunning Website With Divi (Complete Video Tutorial)
✅ Change Stacking Order on Mobile Devices
Screenshot from elegantthemes.com
Divi is a responsive WordPress theme which means that the columns are stacked on top of each other in mobile devices. By default, the columns are sorted from left to right. In this guide you will learn how to change the order of the content for mobile visitors.
✅ Create Beautiful Footers with Divi Builder
Screenshot from divilover.com
Update 2019-10-17: Divi 4 is released! This means that you can create both custom global headers and custom global footers with the powerful Divi Builder. Just update Divi to the latest version and use the Theme Builder.
Create global custom footers with Divi Builder
Create global custom headers with Divi Builder
Would you like to to use the Divi Builder to design your footer but not having to insert it into every page and post manually? In this tutorial, you learn how to create stylish footers in the Divi Library and display it on all your pages and posts. A nice solution while waiting for the Theme Builder update.
Are you still using Divi 3? Here is a guide on how to create custom footers with Divi Builder in Divi 3.
✅ Make your Divi Website Load Faster
Screenshot from elegantthemes.com
A slow website will scare away your visitors and Google will punish you with a poor position in the SERP. Ideally, your website should load in about 1 second. Here’s a complete tutorial on how to speed up the loading time on your website.
✅ Display the Featured Image Caption in Posts
Screenshot from victorduse.com
When you add a Featured Image in a WordPress Post, you can enter a caption that should appear below the image. For some reason, Divi doesn’t display your caption. A few lines of code in single.php will solve the problem and your captions will be displayed.
✅ Optimize your Divi Website for Mobile Devices
Screenshot from elegantthemes.com
Here’s a complete review of Divi’s mobile customization features. Not bad at all, given that a majority of all internet traffic comes from mobile devices.
✅ Image Sizes, Dimensions and Formats for Divi
Screenshot from elegantthemes.com
If you use oversized images, your website will be slow; if you use too small images, your website will look bad. Choosing the right image dimensions is especially important in Divi as it does not utilize the automatic image scaling from WordPress.
Update: Since version 3.27, Divi now supports WordPress native responsive image sizing (SRCSET) which is great news for all Divi users. Read more »
Here’s a complete tutorial with all sizes, dimensions and formats you’ll ever need.
✅ Fix the Most Common Technical Issues
Screenshot from peeayecreative.com
Stuck with a spinner? Unfortunately, not all computer problems are solved by rebooting your computer. Here is a nice tutorial to help you solve the most common technical problems you may encounter with Divi and the Divi Builder.
✅ Pixels, Percentage or …? All Divi Sizing Formats
Screenshot from elegantthemes.com
When you specify sizes (height, width, margin, padding, font size etc.) in Divi (and in CSS in general) you can use many different formats, eg 10px, 5vw, 100vh, 2em, 22% etc. Some dimensions are relative and some are absolute. But what does it really mean and when should you use which format? Here is a complete tutorial to sizing formats in Divi.
✅ Use a Blurb as a Fixed Click-To-Call Button
Screenshot from agirlandhermac.design
Make it easy for your customers to contact you. Simply nail a blurb module in the corner of your page to let your visitors give you a one-click-call.
✅ Fine Tune your Web Design with Media Queries
Screenshot from elegantthemes.com
It’s really easy to create different design settings for mobiles, tablets and desktop screens with the Divi Builder. But sometimes, these three device sizes are just not enough. This is when Media Queries can come in handy. Use CSS to take control over how your site appear on different screen sizes – pixel by pixel.
That’s all for today!
I hope that you enjoyed this post. Subscribe to VictorDuse.com on YouTube and join our Facebook group for more crisp content on WordPress and web design.
👉 Related post: Learn Divi responsive design in 10 minutes
👉 Free course: Create a website from scratch with Divi
Nice!!!
I have just migrated from BlueHost to SiteGround, and now want to streamline and optimize my websites as much as possible. Your “checklist” is excellent. I’ll follow you, as I just subscribed to PeeAye, which got me here.
Nice website design, by the way.
Thanks Chaz, that’s really nice to hear! Good luck with your Divi projects.