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:
- 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̲̅)̲̅$̲̅]
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.
You can use Animations to:
- Create movement
- Entertain visitors
- Draw attention
- Highlight important elements
- Improving usability
- Decorative purposes
- Improve workflow
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.
|1||How to Create Section Divider Scroll Effects in Divi||Animation||No||Yes||No|
|2||Elegantly Hiding Your Copy Below Section Dividers in a Stunning Design with Divi||Animation - Borders||No||No||No|
|3||How to Create Flip Cards with Any Module in Divi Without a Plugin||Animation - Flip Cards||Yes||No||Yes|
|4||How to Apply Colliding Animations to Design Elements with Divi||Animation - Flow||No||No||Yes|
|5||Design a Unique Feature Section in Divi with Icons Animated by Circle Counters||Animation - Icons||No||No||Yes|
|6||How to Create Circle Counters that Animate on Scroll with Divi||Animation - Modules||No||Yes||No|
|7||How to Combine Animations and Parallax in Divi for Unique Designs||Animation - Parallax||Yes||Yes||No|
|8||How to Toggle Divi Transform Properties on Click (with jQuery)||Animation - Transform||Yes||Yes||Yes|
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.
|9||Free Divi Blog Post Layout Pack Will Take Your Builder Powered Articles To The Next Level||Blog Posts||No||Yes||Yes|
|10||How to Create a Reusable Divi Layout Block for Gutenberg Blog Posts||Blog Posts||No||No||No|
|11||How to Design a Scrollable Recent Posts Widget Area in Divi||Blog Posts||Yes||No||No|
A website without buttons is like a room without a door. Buttons are crucial because they tell visitors where to go. They indicate objectives and lead to the next steps. To help visitors move from ‘one room to the next’ as to speak, you have to make buttons not only self-explanatory but also appealing.
It is vital to adhere to some universal design rules to make sure that buttons look clickable. Usability guru, Steve Krug, would say that when you are designing your buttons, you should stick with conventions. You do want to keep the visitors interested and keep your design fresh, but don’t overthink it. A button should look like a button and no less.
This infographic, explains how you can utilize buttons on your website.
You can use Buttons to:
- Help navigate
- Convert users
- Perform an action
- Inform visitors
- Improve SEO
- Indicate states (clicked, hover, etc.)
Why are these Divi tutorials useful?
Divi makes it easy to style buttons and make them functional. However, there haven’t been too many cool button tutorials by Elegant Themes. One place to look for inspiration is to look at the free Divi layouts.
I like tutorial no. 12 because, although there is no downloadable file, the five button-designs are pretty original and can be modified further for your needs. I am always on a look-out for new button styles, but I don’t want too much heavy coding.
I do wish this tutorial had a downloadable file as there is a bit of busywork in setting up the subtle animations. One thing that is helpful is the newly released Divi Global Presets, which let you save your designs to reuse throughout your website consistently.
Tutorial no. 13 is helpful because you can download the file and learn how to place your buttons in precise positions. That is one area that is often tricky to master (e.g., absolute, fixed, relative), and if you have a file to get started, it is more efficient.
|12||5 Creative Divi Button Module Designs & How to Make Them||Buttons||Yes||No||No|
|13||How to Position Buttons Absolutely to Create Unique Button Layouts in Divi||Buttons||No||Yes||No|
If you want to read more, email me for a password to see the protected content or you can get the content via ebook/paperback.
You can also
Other areas of web design covered:
4. Contact Info.
8. Hero Section
9. Hover Effects
15. Social Media
19. Divi Features
21. Must Sections
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.
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. (~‾ ▿ ‾)~