89 Best Divi Tutorials by Elegant Themes

I purchased Lifetime Access to Divi in early 2019 to redesign my husband’s home remodeling website and create a website for myself. I chuckle (¬‿¬) now how naive I was, thinking that I would create unique and beautiful websites within couple of weeks.

A year later and after many Divi tutorials and tests, I have compiled 89 of the best Divi tutorials by Elegant Themes.

To make the cut, the tutorials had to be:

• practical
• beautiful
• tested
• relatively easy to implement

At the end of this article, I include an Excel file with a list of all 89 Divi tutorials plus 52 more that I considered, but that didn’t make the final list.

The 89 best Divi tutorials are divided into 22 sections. Each section has a table summarizing tutorial information:

• Topic – the main topic
• Code – any CSS, HTML & other code included
• File – whether a downloadable file is included
• Video – whether there is a video to walk you through the steps
• Author – who is the author (included in the Excel file only)
• Year – year published (included in the Excel file only)

Why and how were these tutorials chosen? I selected tutorials that were helpful in my learning and design process. I didn’t include tutorials that just showed off cool stuff that was not practical. Practicability is of the essence here.

*More Info on the 89 Divi Tutorials
Most of the tutorials have been published in 2018 or later, with few exceptions. There were few tutorials released in 2016 and 2017, that I still found useful.

I tried to stay away from tutorials that reviewed and asked you to download plugins to solve design problems, with couple exceptions.

From the 89 Best Divi tutorials by Elegant Themes, 27 were by Donjete Vuniqi, and 47 were by Jason Champagne. Donjete’s tutorials often have ample code sections, and she is able to create Divi magic with CSS. You can learn more about Donjete and Jason at Who is Who at Elegant Themes.

Advice for New Divi Users
If you are starting to work with Divi, keep in mind that it DOES get easier. It is a relief that Elegant Themes is continuously working on improving Divi.

From my personal experience, Divi is NOT easy out of the box. Like with any new program, you still have to put in the time and energy to learn how it works. Surely, you can use one of the pre-built layouts in Divi; nonetheless, you will always have to modify something. Your content doesn’t magically fit every template.

For elemental needs, you can use most programs out of the box. However, in order to WOW with your Divi, Excel, or Photoshop skills, it takes a bit of practice. Therefore, give yourself a break and recognize that it takes a bit of time to become amazing in Divi. Before you know it, you will be amazing. ☜(⌒▽⌒)☞

How to get better FAST using Divi?

1. Figure out what kind of pages you will need on your website.

2. Use the 89 best Divi tutorial list. Pick sections with relevant tutorials to help you start your site.

3. First, try the tutorials with downloadable files, which are easy to test out for quick design ideas and see how they would work on your site.

4. Next, try the tutorials with videos. Don’t just watch them. Try to replicate what you see. That is how you become better fast, and you will identify areas that you need to work on.

5. Review the tutorials with code included. They teach you how, with minimal CSS, you can create absolute magic.

6. Look through free Divi layouts and select sections/pages that you like. Upload a few on your page and go through them to see if you would like to modify or combine them. If you like font choices in one, use it and apply it to sections from other layouts/parts. Don’t be afraid to play around. YOU CAN’T MESS THIS UP. You have a magic wand – the DELETE key.

7. Search Divi community for free layouts or code snippets. Often, if you sign-up for a newsletter, you can receive some great freebies (i.e., layouts, modules). I recommend three Divi design sites: Mark Hendriksen, Josh Hall, and Divi Lover.

8. Don’t purchase solutions hastily (except Divi, of course). The layouts, plugins, and modules you think you need right now you may decide not to use at the end. Utilize free stuff first. Once you have your website in mid-stage and are still thinking about a paid solution to your design challenge, that is the time to shell out cash – not sooner. [̲̅$̲̅(̲̅5̲̅)̲̅$̲̅]

1. Animation

Animations are not only used for entertainment and decoration. They are also used to improve usability. Animations highlight important items, items that should be clicked, and they increase conversion rates.

Although tempting, it is important not to animate too many things on your site. Whenever I see a good Divi tutorial with cool animation, I think about how can I implement it in my project. At some point though, you shouldn’t add any more animations to your site. You could replace old animation with a new one but not keep both.

The important thing is that using animation must be justified. This infographic shows you how you can use animations on your website.

Why are these Divi tutorials useful?

Divi has great animations and transitions that keep your visitor interested. There are scroll effects, transitions, movements, filters, and parallax effects. Many are easy to implement.

The new scroll effects of 2020 made a number of smooth animation possible. Although, for me, it is still hard to grasp the three positions and what they really mean. That is why tutorial no. 1 and no. 6 are helpful because they have a downloadable file.

Simple parallax is still very stimulating to visitors. Most websites have backgrounds, pictures, and titles, and adding a little bit of movement makes it more dynamic. I absolutely love tutorial no. 7 which combines animations and parallax into a unique hero design.

Tutorial no. 5 has a unique way of animating icons with Divi counters in a blurb. There is no downloadable file, but I will try creating one soon for you all to download. I love how this tutorial combines different Divi modules together to make a unique design.

Using CSS is a more light way of creating animations than using JQuery or JavaScript. However, tutorial no. 8 although it does use JQuery is pretty neat and easy to implement by transforming animations on click.

2. Blog Posts

Blog posts are the heart ♥ of a website. Through posts, you communicate and interact with your visitors. Blogs keep your site current, drive traffic, and improve SEO.

If your website doesn’t have updated content, it becomes static and eventually drops in Google ranking. By constantly adding new content, your website manifests a beating heart.

You can use Blog Posts to: 

• Communicate relevant content
• Connect with visitors
• Inform and educate
• Drive traffic
• Build an online identity
• Establish authority
• Improve SEO

Why are these Divi tutorials useful?

These three tutorials help you get started setting up an attractive blog layout. There are not many functional post designs that have sections and headings nicely separated into modules.

Tutorial no. 9 offers three free blog post layouts to get you started setting up an article or blog on your site. In my opinion, it is always easier to modify a template and make it your own rather than to start from scratch. 

Tutorial no. 10 show you how to create a scrollable post section in a widget, which is great for larger sites. 

In addition, if you are interested in creating a two-column newspaper layout for your blog, you can download my two-column layout. 

Other areas of web design covered:

4. Contact Info.
5. Filters
6. Fonts
7. Footer
8. Hero Section
9. Hover Effects
10. Icons
11. Images
12. Lists
13. Navigation
14. SEO
15. Social Media
16. Tables
17. Tooltips
18. Videos
19. Divi Features
20. Modules
21. Must Sections
22. Other

Conclusion

Divi page builder by Elegant Themes is a tool that can be used by users across a broad spectrum of skills.

As a novice, you can use the Divi builder by utilizing the free layouts designed for specific industries. You can create content and assets to fit a layout and be done within a couple of days/weeks.

As a beginner, you can use Divi out of the box and modify small sections in the free layouts and create minor additions from scratch. You can easily use some of the downloadable files listed in the 89 Divi Best Tutorials by Elegant Themes and modify them to your needs. You would apply branding and consistent typography and be done in a couple of weeks.

As an intermediate user with some HTML and CSS skills, who is familiar with WordPress, you can create websites from scratch, modify sections, layouts and follow YouTube tutorials and step-by-step instructions to create unique sites. It may take you a few weeks or a couple of months to research and incorporate modern designs, create and obtain assets to fit your one-of-a-kind needs.

As an advanced user, you are not afraid to incorporate more advanced HTML, CSS, Javascript, etc. You want all the bells and whistles and are not satisfied with a cookie-cutter look. You will take your time to design a site representing your brand and incorporate all the things you want. It may take you a few months to create a unique, modern, and top-of-the-line content and website.

As an expert, you use Divi to create websites for yourself and others fast. You like using the tool to speed up the design process and to deliver sites to your customers in a way that they can take over and modify. You know your way around PHP, Javascript, and can take on and resolve most issues, but speed is essential to you, and Divi can help you do things fast.

What took me so long to get my websites live was the fact that I was also in the process of jumping levels from a novice to an advanced Divi user. I wanted all the bells and whistles on my site. I wanted all the cool things I saw on the internet. ﾍ(=￣∇￣)ﾉ

I wanted to learn everything in the process and create awesome looking websites. I took the time to go through all the tutorials because, at one point or another, I needed to create something along the way.

Use the 89 Best Divi Tutorials by Elegant Themes to get you started and as references for future needs in your web design. You will get better and faster once you try to create things from scratch and modify sections from templates.

*Time to get to a certain level of skills is relative to the amount of time you put in. If you are a full-time, part-time, or seasonal employee who does things on a side or a full-time parent who takes care of a family, it may take you longer to get where you want. If I have devoted full-time to this process, it would probably take me 20% of the time that it actually took me.

However, you know how life is, dinners have to be prepped, kids need a driver to practices, family, and friends want to talk, and money has to be made in the meantime.

So don’t get frustrated, just keep going, one day at a time. You will get there, and it will be faster and easier. I promise. (~‾ ▿ ‾)~

♥

Download