Welcome to the first Feature Update of DIVEMBER! Since we started DIVEMBER last week, we promised not only Divi tutorials and Divi freebies, but also new features to some of our existing Divi products, as well as some new product launches too.

Today we’re happy to announce Divi Overlays 2.9! 🥳

This update is awesome, in a lot of ways! We have some really cool new features to show you, but also some performance updates too.

NOTE: Make sure you read the update notice at the bottom of this post for updating existing sites from previous versions to the latest Divi Overlays release.

New Divi Overlays Popup Animations are Here

Since we launched Divi Overlays in early 2017, we’ve had the same animations as part of the plugin. They’ve remained virtually untouched, and no new animations have ever been added.

Today that all changes.

We’ve added 50+ GORGEOUS animations to the plugin! But here’s the best part, the animations are 100% PURE CSS!

By using only pure CSS animations, we’ve made Divi Overlays more efficient and less resource intensive, so overall it runs more smoothly and quicker. Plus, it’s more consistent across all browsers.

Additionally, by removing the old Javascript animations, we’ve made the plugin signicantly smaller. In fact, the plugin size has decreased by over 85%! 🤯 😍

You can see a list of all the animations in the toggle below, but really you need to see them for yourself. We’ve updated the Divi Overlays Demo website so you can see them in action. We will also soon be adding an animation demo page to preview every single animation.

As you can see from the list above, there’s a lot of animations! Rather than all the animations added in one giant list. We’ve added them to categories, for easier organization.

Then, once you click on the category toggle, you can choose the exact animation.

Adjust the Divi Popup Animation Speed

You can now adjust the animation speed for full control! Not all popups are created equal, and you shouldn’t be forced to use the same animation speed across all types of popups.

For example, with Divi Overlays, you can create exit-intent popups that will trigger when the user is about to leave the website. Speed is crucial for grabbing their attention, and a super snappy animation speed can be the difference of converting them to a lead or customer, or having them leave your site forever.

On the flip side, you may have some click triggered popups for displaying team member bios on your about page. If a user is drilling down into the bios of your team, chances are they’re staying for a while, and a slower animation speed might make more sense and be less abrupt and aggressive when viewing multiple popups in a row.

Separate Entrance & Exit Animations + Animation Previewer

With this new Divi Overlays update, you can also set the entrance and exit animations separately! Unleash your creativity with Divi Overlays and choose completely different animations (and animation speeds) for the popup entrance and exit.

You can do a quick simple fade in for the entrance, then do a nice slow roll out for the exit animation. The choose is yours.

Plus, we also added an animation previewer. With all these new animations and controls, we wanted a way for you to be able to see a simple example of what the animation does without having to save it and preview on the front end of your website.

Enable Popup Background Blur with a Click

In addition to the new gorgeous animations, we also added another visual feature that’s been on our list for a while: background blur.

Blurring the background has become very popular in all different aspects of visual design. For example, Apple has added background blur to many different places throughout iOS.

It’s a simple yet powerful feature. Not only does it look gorgeous, but it also keeps the focus on the content of the popup too.

Exit Intent Popup with Background Blur

Video Popup with Background Blur

Various Other Improvements & Enhancements

In addition to the exciting features mentioned above, Divi Overlays 2.9 also includes a bunch of other enhancements that improve the plugin performance. From the way that Divi Overlays filters shortcodes, to a new cache functionality, you’ll be impressed with new performance of the plugin!

You can view the full changelog here.

Updating from Previous Versions of Divi Overlays

NOTE: If you’re updating an existing site from a previous version of Divi Overlays to Divi Overlays 2.9+, make sure follow the instructions below.

This is a big update, and it’s always best to practice safe update steps:

1. Backup your site first! (or better yet, update on a staging site first to test)
2. Update, then clear ALL caches:
   1. Clear your cache plugin If you’re using one (WP Rocket, SG Optimizer, etc)
   2. Clear your server cache if you have hosting that includes it (WP Engine, Flywheel, Siteground, etc)
   3. Clear Your Divi Cache it it’s enabled (Divi Theme Options > Builder > Advanced > Static CSS File Generation > “Clear”)
   4. Clear your CDN/Cloudflare Cache if you have it, & any other caches you have on your site.

So what do you think of these new features and enhancements? Let us know in the comments! And if you have any feature requests we’d love to hear them!