10 Essential Tutorials for all Divi Users

✏️ 2019-08-06 | Divi | 3 comments

Browse the 10 best Divi tutorials that will make your web design work process more smooth and fun.
Skribent: Victor Duse
By Victor Duse

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

✅ Change Stacking Order on Mobile Devices

Change Stacking Order on Mobile Devices with Divi

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

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

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

Display the Featured Image Caption in Posts

Screenshot from divimundo.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

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

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

Fix Common Technical Divi Builder and Divi Theme 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

Divi CSS 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 

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. 

Ps. Are you looking for a more advanced button that will trigger a contact form instead? Well, there’s a tutorial for that too.

Read more

✅ Fine Tune your Web Design with Media Queries

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.

Summary

That was 10 essential tutorial for Divi. Follow Elegant Themes, Divi Lover, Pee-Aye Creative, A Girl and Her Mac and ofcourse DiviMundo for more tips & tricks. Feel free to share this post on sociala media if you enjoyed it.

Related posts

3 Comments
  1. Nice!!!

    Reply
  2. 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.

    Reply
    • Thanks Chaz, that’s really nice to hear! Good luck with your Divi projects.

      Reply

Submit a Comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.