One thing that Divi does not include out of the box is a popup overlay. Fortunately, there are several third-party plugins that add this feature to Divi. These plugins allow you to create your popups with the Divi Builder to create something that’s uniquely yours and tailored to your audience.
In this article we’ll take a look at two popular Divi overlays plugins, Divi Layout Overlays (also known as Divi LOL) from Be Superfly, and Divi Overlays from Divi Life. We’ll help you decide which is best for your website’s needs.
Note: The Divi Overlays Plugins you find below may contain an affiliate link. Thank you for supporting us, and the community. Happy shopping! 😃
Divi Layout Overlays (Divi LOL) makes it easy to build mega menus and overlays with the Divi Builder. Overlays can be triggered, so you have control over when they open, and it includes a cookie so you can have them open only once. You can have multiple overlays on a single page, with each one having its own trigger.
- Creates full screen overlays
- Creates Mega Menus
- Two triggers: automatic and time delay
- Three transitions: instant, slide, or fade
- Customize background
- Customize close button
- Cookie for one-time popup
- Multiple overlays on each page
Prices range from $25 for a single site to $45 for unlimited usage.
Divi Layout Overlays (LOL) Examples
To get an idea of what Divi LOL can do, here are a few examples from the Divi LOL demo page. This is the first demo. It shows a contact form in a full-screen popup over a black background.
Here’s an example of a clean and simple call to action. It even utilizes border and shadow effects. This one uses a semi-transparent overlay.
Here’s a contact form over a gradient background. This one has a styled close button to match the colors in the popup.
Divi LOL also creates mega menus using the Divi Builder. Here’s a mega menu with two different sections to show a CTA and page navigation. Each section has its own background. It stays open until you click the X.
This mega menu shows CTA’s to two different shop pages. I like the styling that sets it apart from the page under it.
This mega menu displays a video, CTA, and includes a full-width bar that displays a message. This is an excellent way to provide an offer.
Divi Overlays makes it easy to create modals, overlays, and full-screen popups using the Divi Builder. You can use text, images, buttons, any other modules, menus, and widgets as triggers. Trigger them to appear by time, scroll delay, exit intent, or URL.
- Anything can be a trigger
- Four automatic triggers: time delay, scroll delay, exit intent, URL
- Uses custom post types
- Creates modals
- Creates full-screen overlays
- Creates popups
- 11 animations
Prices range from $15 for a single site to $129 for lifetime unlimited usage.
Divi Overlays Examples
To get an idea of what Divi Overlays can do, here are a few examples from the Divi Overlays demo page. This is one of the animation demos. This is Fade and Slide. Here, it’s in mid-transition.
Once it’s complete it covers the full screen. It places the content over a black background, allowing the website to just barely show through. Click the X to close the modal.
This example uses a nice green background. This is in mid-transition, which are shown both on open and on close. Its transition animation is called Door. It opens from the center outward and closes inward from both sides. Here, it’s starting to open, showing the background behind it. It will show the content after the transition is complete.
This one is Content Push. It pushes the content to one side and slides the overlay into place. This one is also in mid-transition. It shows the content during the transition.
This one is Slide Down. It comes down from the top of the screen. It also shows the content during the transition.
This is Content Scale. It slides from the bottom.
This one is Genie. It creates an hourglass shape as it appears. It shows the content after the transition is complete. I think this is my favorite.
Here’s a look at a few of the overlay demo designs that show what the overlay can do. This one’s a login overlay.
Here’s a multi-step optin. The optin includes multiple pages. I like that orange overlay.
Here’s an example of an overlay with a pricing table.
This overlay contains a shopping cart. This is excellent for allowing your visitors to pay for their purchases without actually leaving the shop page.
This example shows a slideshow in a popup. Visitors can view multiple images of different products, services, locations, etc., without them getting in the way of the page design and without them having to leave their current page.
This example uses a subscribe form in a popup. This allows you to create the most common type of popup, the newsletter subscription, and trigger it any way you want to. What I like the most about this is the popup can include any other modules along with the optin form, allowing you to create beautiful optin CTA’s.
Both Divi Layouts Overlays (LOL) and Divi Overlays are excellent plugins for creating overlays for Divi websites. Both provide full-screen modals and include several trigger options. Overlays are helpful for showing email and newsletter forms, contact forms, shopping codes, CTA’s, and lots more.
Divi Layouts Overlays (LOL) is useful for creating complete pages as popups to show images, CTA’s, forms, etc. It has a few triggers and transitions to make them look great. I think its greatest strength is the ability to create mega menus with the Divi Builder. You can have multiple overlays on the same page, so you’re not limited in how you use the popups. I also like that it has a cookie, so you can disable it for visitors that have already seen the popup.
Divi Overlays is great for showing complete pages in popups. Show shopping carts, forms, galleries, or any other Divi modules or layouts. It’s especially good if you want to use literally anything as a trigger. You can also use automatic triggers. It has lots of animations to choose from, so your overlays can open with style.
Both Divi overlays plugins are great choices. Both have their advantages, both are easy to use, are designed and coded well, and both have price-points that work for their specific feature-sets.
We want to hear from you. Have you tried Divi Overlays or LOL? Let us know what you think about them in the comments.