Divi Overlays 2.0 is Here— Automatic Triggers, Exit Intent, Close Button Customizations and More!
Today I’m thrilled to introduce Divi Overlays 2.0! Since it’s launch back in February, Divi Overlays has become an extremely popular plugin in the Divi community, and by far our most popular Divi plugin here at Divi Life.
What is Divi Overlays?
Since launch four months ago, Divi Overlays has become the easiest way to create beautiful full screen overlays, popups, modals, light boxes, etc. on your Divi website. The best part is you use the Divi builder to create it. This means that you can add any content imaginable to your overlay using the dozens of built in modules in Divi. And, you can combine it with other plugins to create even more amazing things. Using the Divi Builder also means you have an entirely new layer of your website to create on; a full edge to edge canvas (not just a tiny modal window). Divi Overlays lets you create amazing things that were never before possible without custom coding.
So What’s New in Divi Overlays 2?
With over a dozen new features and enhancements, there’s A LOT to be excited about with this new version. We’ll start with the fun stuff— the new features. Then we’ll go over the enhancements/improvements. 🙂
Trigger Your Overlays or Popups Automatically
By far the most requested feature(s) for Divi Overlays has been the ability to trigger overlays automatically (without a click trigger) and I’m excited to announce that Divi Overlays includes a suite of automatic triggers! Now you can trigger your overlays, popups, or modals automatically with your choice of several different new triggers.
Here’s what’s included:
- Timed Delay: trigger your overlay automatically after a specified timed delay (or on page load)
- Scroll Delay: trigger your overlay automatically after the user has scroll a specified amount of the page
- Exit Intent: trigger your overlay or popup immediately before the user clicks the back button, exits the window, or types in a new URL.
All of these automatic triggers are amazing, but our favorite is exit intent! Exit intent triggers (commonly referred to as exit popups), are a favorite among some of the top internet marketing experts. And the reason is because they work!
Here’s what it looks like in action:
These automatic triggers are extremely easy to set up, and can be done so in just a few clicks. Also, automatic triggers are turned off on mobile by default to help you avoid getting any “interstitial mobile popup penalties” from Google.
Trigger Your Overlay from the URL (Link Directly to It)
The “URL Trigger” feature technically isn’t brand new in 2.0, but was included in a previous version. However there was no announcement for it, and was only mentioned in the change log (do people look at those? 😉 )
The URL Trigger allows you to trigger the overlay from the URL by adding /#overlay-1234 (replace 1234 with the overlay id) to the end of the URL.
So say you have a contact form in an overlay, instead of having a traditional contact page. Now you can link people directly to your contact form via the URL Trigger. Extremely useful, and requested by lots of customers!
Link From Overlay to Overlay
This is a really cool new feature that opens up a lot of opportunities of what you can do with Divi Overlays when you combine the plugin with some creative and outside the box thinking. With this new feature, you can connect a string of overlays. For example, you could have an exit intent popup that asks the visitor if they’d like to learn about XYZ by attending a webinar. Then, rather than try to cram the webinar registration in the overlay, or have to reload a new page, simply link to another overlay with the webinar registration form. I’m excited to see what other creative uses our customers will come up with!
Here’s another example:
(RoyalCommerce Divi Child Theme shown above)
New Close Button Customization Options
Now you can customize the close button without touching any CSS. You can change the size, color, background color, background radius, or hide the main close button all together.
CSS String Input Field
If you’ve been using Divi Overlays then you know that setting up click triggers is as easy as adding the unique overlay ID to the CSS ID of any element on the page. So with the button module for example, all you need to do is paste the unique overlay ID text into the module’s CSS ID field in the advanced tab.
This works for a lot of modules. However, there’s some modules that have multiple different aspects to it, but yet only one CSS ID field for the entire module. For example, the full width header module has multiple buttons you can add, but only one CSS ID field. This means you can’t have multiple buttons open different overlays. The same goes with the slider module.
Now in Divi Overlays 2.0, you can copy and paste a CSS string directly to the overlay edit screen to individually target one small aspect of the page. This means you can now set just one full width header button as the overlay click trigger. 🙂
Setting overlays has always been easy, but now it’s even easier with one less step! Previously, you had to add the content shortcode to the page you wanted your overlay on. Now that step has been completely eliminated! Simply create your overlay, and set your trigger (whether that’s a click trigger, URL Trigger, Automatic Trigger), and you’re done! This now means that Global Overlays are automatic!
Here’s a few other enhancements:
- Smooth Scrolling on Mobile for Overlays
- Divi Overlays API key and API email now hidden, so clients can’t steal your credentials!
- Unique overlay ID and Menu ID (for click triggers) added directly to the overlay edit screen
- fixes to certain animations
20% Off all Purchases and Upgrades!
To celebrate the launch of Divi Overlays, we’re offering 20% off all new purchase and upgrades! (including Lifetime License purchases and upgrades!!)
Let us know what you think of Divi Overlays 2 in the comments below! Any features you’d like to request? We’re constantly trying to improve Divi Overlays and make it one of the most powerful tools in your Divi toolbox! 🙂