As a long-time Divi user, learning Divi 5 has been a priority for me for over a year now — and with the official release scheduled for February 26th, I’m going to talk a bit about what I’ve learned over my next few blog posts. Click and Repeat uses Divi for all of the websites we build and have since Elegant Themes developed it (check out the original Divi announcement post in 2013!).

Why?

Because Divi makes it incredibly easy for our clients to maintain or tweak the sites we build after launch. The interface makes it simple to do things like change out text or images with minimal training. That means after we build the sites, our clients have the option of updating things like their class schedule or about information themselves, if they want to… and we’ve heard over and over on sales calls that not knowing how to make changes on their own website was a top frustration for dog trainers. Divi makes that easy.

The Benefits of Divi 5

But for people used to previous versions of Divi, Divi 5 comes with enough new features that it can feel a little overwhelming. It comes with a new user interface, relocated controls, an overhaul of how colors and other variables are managed, a new system for building responsive sites, and more (I wrote about the 3 biggest changes for existing Divi users back in September).

The primary driver for Divi 5, as I understand it, was rebuilding the code from the ground up to make everything faster and allow Elegant Themes to offer the latest web design developments within Divi — things like clamp functions for better mobile responsiveness and the loop builder to allow more customization for blog posts and other post types.

But the addition of all those new features and capabilities comes with a steep learning curve. So what’s the best way to go about learning Divi 5?

Learning Divi 5: Planning My Approach

I generally agree with Ania Romańska’s approach in her recent webinar, Divi 5 Roadmap: From feature overwhelm to confident workflow—the best way to really learn Divi 5 is to build a new website using it… But that if you start there, without learning at least a little about the changes, it’s likely to be a slow and frustrating process.

Elegant Themes provides regular blog posts on each new update as they’re rolled out to help you learn what they are and a bit on how to use them. But there are so MANY changes, and they change things in such a fundamental way, that keeping up can feel a bit like chasing your own tail: anytime you think you’ve caught it, it gets away from you all over again.

So here’s what’s worked for me so far:

Step 1: Learning Divi 5’s Interface

As I mentioned in my last blog post, the new interface in Divi 5 is a significant change from the look and feel of Divi 4. For me, starting by simply learning where things live now was an important first step. Relearning how to save your pages and exit the builder, navigate between containers on the page, and create consistent styles were key.

Taking the time to relearn how to do all of the things I have always done in Divi 4 let me begin to appreciate the benefits of Divi 5. Things were faster, smoother — each interaction had been re-thought. And while not everything was perfect out of the box, Elegant Themes has continued to make tweaks and edits that have gone a long way to getting it right.

Step 2: Learning Divi 5’s “Language”

One of my biggest takeaways from Ania’s presentation was her advice to think in “containers” and nested structures in Divi 5 — instead of in rows and columns, like we were used to in Divi 4.

I’ve always talked about Divi as “boxes within boxes” when I teach others how to use it. However, I’ve always looked at it in terms of rows and columns because that’s how Divi 4 was structured.

In Divi 5, one of the biggest changes is in the new layout options. For each row, you choose if you want to use a flex, grid, or block-based container (though Divi is still calling these rows).

But Divi 5 also introduces the option of building rows within other rows, and a new container type called a group module that “groups modules” so that you can treat multiple modules like a single element when setting layout properties.

As a long-time Divi 4 user, wrapping my brain around how these new pieces interacted, what they enabled, and when to use which features took a bit of time.

And I’m definitely still learning! For me, however, this was the single biggest “new feature” I needed to understand before being able to build in Divi 5.

It wasn’t the only one, however.

The other major shift in learning Divi 5 was learning the new way that Divi 5 enables more consistent styling.

I found the presets feature in Divi 4 buggy and frustrating; instead I was a frequent user of the “extend styles” and “copy paste styles” features. In Divi 5, design variables and presets allow you to build out an entire design system and apply styles that refer to each other.

Taking the time to understand how these features work and incorporating them into building a website makes for a better, more consistent website. And consistency in web design is a key part of a professional and cohesive looking website.

Step 3: Learning to Optimize Divi 5 Designs

Despite the push for “mobile-first” design in the industry as a whole, Divi 5 IS still a desktop-first based builder. The last major shift, in my opinion, when learning Divi 5 is understanding what that means… and what you should do about it.

Divi 5 comes loaded with a ton of new features designed to make Divi more responsive (at speed). It carried over all of the old capabilities of Divi 4 (if sometimes still a little buggy) and added a ton of new features.

The two biggest additions are the option to use new units of measurement (like Clamp functions) and the ability to add new breakpoints. Clamp allows fonts (and other elements) to resize dynamically as your browser size changes — with the ability to “clamp” the size changes within a given range. And new breakpoints allow you to control how all of the various styling options within divi will look on many more screen sizes.

Step 4: Trying to Keep On Keeping Up

Once you’ve learned those new structural changes, learning Divi 5 becomes a matter of just trying to keep up with new features.

One of the up-and-coming game changers, for example, will be the new menu functionality and use of the new canvas features to build out mega menus. Designers will have much more granular control over how menus work and what they look like on different screen types. But that feature (as of right now) is only partially released — Canvases came out a few weeks ago and the new menu modules (dropdowns and links) were just released; Elegant Themes has promised there’s more to come.

The founder of Elegant Themes, Nick Roach, has demoed work he’s doing on the new full theme editing features too — easily one of the features I’ve personally anticipated most.

More Changes Ahead…

Divi 5 is still evolving. Some features are polished. Some are brand new. Some are still on the roadmap.

But the foundation is there — and understanding that foundation will make the difference between frustration and fluency.

(If you’re a client reading this and thinking, “I’m glad someone else is figuring that out,” that’s exactly the point. Our job is to stay on top of these shifts so your site stays fast, modern, and easy to manage — without you having to rebuild your workflow every time Elegant Themes releases something new.)

Our biggest takeaway?

Divi 5 is powerful. But like any powerful tool, it works best when there’s a plan behind it. Learning it’s new capabilities allows for better websites that feel faster and can be customized to an even greater degree than before… which is why we’re making the effort to learn all it’s ins and outs, so we can best leverage them for our clients.