Divi Plugin Highlight – Divi Overlays

Divi Overlays is a plugin for Divi by DiviLife a third-party Divi development company by community member Tim Strifler. It allows you to easily create popups using the Divi Builder. It isn’t just a modal. You can create full-screen overlays, and add any type of content you want in the overlay using the Divi Builder, and then trigger it with anything on the page including buttons, links, images, etc. You can adjust the background colors, font colors, and select the opening animation.

Overlays can include forms, pricing tables, shopping carts, videos, images, download links, maps, and much more. You can even set it to open an overlay when the page loads. They allow you to display additional content without having to wait on the page to load.

The ability to use the Divi Builder of course means you have access to every module and setting to create your overlay with. This means you have access to close to 40 modules and you can use shortcodes from other plugins. With access to this amount modules you’re only limited by your imagination.

Download: Divi Overlays Download

In this overview I’m taking a look at version 1.1, which includes some new features that were requested by customers. At the end I’ll cover a few of the features you can expect to see in version 2.0. For the examples I’m using the multi-purpose wireframe kit vol. 1. Let’s dig in…

Installation

Upload, install, and activate the plugin as you would any premium plugin. Once it’s activated you’ll need to enter your license key. Go to Settings and select Divi Overlays Activation in the dashboard.

Enter the API key and email (from your account at DiviLife) and select Save Changes. Now you’re ready to start creating overlays.

Add New Divi Overlay

The overlays are created separately from your content and then opened from your content using simple codes.

To create an overlay, go to Divi Overlays and select Add New in the dashboard. From here you can select to use the Divi Builder. This works the same as any normal page or post using the Divi Builder, including special Divi plugins and modules, and you can even run A/B testing using Divi Leads. They even work in a global module. You can also import and export your overlays.

Choose the overlay animation and settings from the dropdown box in the upper right corner. Under the Divi Builder is a selection for the background and font colors.

A few settings are added to the right side. A box called Divi Overlay Animation includes a dropdown box where you can choose from 11 animations. This determines how the overlay appears on the screen.

A checkbox is added to prevent the main page from scrolling when an overlay is on screen. This keeps the user in the same location on the screen so when they close the overlay they know where they are. This is especially helpful if they clicked one of many buttons to open the overlay. This way they know which button they clicked on and don’t lose their place on the screen.

I’ve added a video module and selected Genie for the overlay animation and selected to prevent main page scrolling.

Now that I’ve created the overlay I can use it on a page. To do this, go to Divi Overlays in the dashboard and select Divi Overlays to see the list of available overlays. To use the overlay copy the code you want to use and paste it into the proper location. Let’s take a look at how to do that in detail.

Links are created using the CSS ID. Copy the CSS ID and add an opening <a id= and closing </a> tags as shown in the example.

In this example I’m using a landing page. I want to add a trigger to the text, the app store logo, to the phone image, create a button, and place a link within the menu.

Text Link

Copy the Content Shortcode and paste it into a code or text module (any module that accepts shortcodes) on your page. I pasted it into a code module. You can place as many Divi Overlay shortcodes within this module that you want. It doesn’t matter where you place the module. I recommend that you test to make sure the module doesn’t affect your layout.

I want to use the text WATCH A DEMO as a link to open the video. To do this, copy the CSS ID from the list of overlays in the dashboard screen.

Paste the code into your text module and format your text like this:

<a id="overlay_unique_id_211154">WATCH A DEMO</a>

In this case the text is already embedded within some HTML, but that’s okay. Just make you place the code in the correct location within the HTML.

The text is now blue to show that it’s a link.

When I click the text I’m presented with the video that I placed a link to within the overlay. The overlay is opened with the animation that I chose.

Image Link

There are two ways to add the CSS ID to an image. The method you should use will depend on how the image is placed within your content. Here are two examples:

Text Module

I wanted to make the app store image clickable, but rather than take you to the app store I wanted it to provide some options and information. This requires a new overlay, which also requires a new shortcode within the code module.

Now when I click the app logo I get an overlay with links to two different app stores. For better UX/UI I would change the graphic for the button, but this shows the potential of providing multiple options while keeping the content clean. For this example I set the overlay backgound to white with an opacity of 90 and the font color to dark gray.

Image Module

In the above example I added the code to the HTML because the image was placed within the text module. Another option is to place the image within an image module and use the CSS ID in the Custom CSS tab.

In this layout the mobile phone is in an image module. I’ll add the CSS ID so it will open the video overlay.

In the Link URL use #open-overlay (or similar text with the # symbol). Now I can click the image and open an overlay.

Button Link

Adding the overlay link to a button is the same as adding it to an image. Remember to add the shortcode to the code module.

Add the # text to the button’s URL. I used #open-overlay as before because it’s descriptive (and I stole it from Tim Strifler, but don’t tell him that).

Add the CSS ID code to the Custom CSS tab.

And that’s it! The new button now opens the contact form.

Menu Link

To create a menu link, copy the Menu ID and go to Appearance, Menus, and select the menu you want to add the link to and load it. (See this article How to Create Custom Menu Structures in WordPress for more information).

Select Screen Options in the upper right corner and check the box labeled Link Relationship (XFN).

Select Custom Link. Add the # symbol as the link, add the text you want it to display, and select Add to Menu. Paste the Menu ID into the Link Relationship field and save the menu. Be sure to assign the menu to a display location under Menu Settings if you haven’t already. In this example I’ve set it to Primary Menu.

The menu item now appears within the menu structure. Clicking it will open the overlay. This has the advantage of providing a CTA (call to action) within the navigation structure and it site-wide.

Widget

The plugin also includes a new widget area. The difference in using the widget and any of the other methods is where you place the shortcode. Rather than placing the shortcode within modules over and over you can place it once, making it global. You can then trigger it from any item on any page, from the sidebar, the main menu, or the footer menu.

This is the page I’m using from the multi-purpose wireframe kit vol. 1. I want to make the button clickable so it will open the video in an overlay. I added my shortcodes to the widget area (by placing them within a text widget) and added the CSS ID to the image on the page.

The shortcodes in the widget work without the widget even being visible. I didn’t have to place a sidebar on the page or any widgets in the footer. It just works because this new widget area loads behind the scenes. If you drop other widgets in this widget area they’ll display in the upper left corner of the page. Shortcodes do not display as text by default, so the widget can remain invisible.

Closing the Overlay

Overlays can be closed with either the X in the corner, by clicking the background of the overlay, or by hitting the escape key.

Another option is to add a close class to a link within the overlay. Using this method you can create a close button or text. This allows you to add a cancel button to your CTA or make the close button more visible.

The close class looks like this:

class = “close-divi-overlay”>No Thanks

Coming in 2.0

Here are a few features to look forward to:

A time-delay feature will allow the overlay to open based on a set time after the page has loaded, allowing the reader see your content for a specific amount of time before automatically opening the overlay.

A pixel feature will open the overlay based on the number of pixels they’ve scrolled or the percentage of the page they’ve scrolled.

Another option will open the overlay when the reader selects the back button or places the cursor over the address bar.

Documentation

Documentation is provided at the DiviLife website. It includes an overview and examples of the various ways you can use the plugin. Documentation includes text, video, and sample code.

Pricing

Divi Overlays is a premium plugin. It costs $15 for use on a single site, $29 for three sites, $59 for unlimited sites, and $129 for the lifetime unlimited license. Each of the license’s include all of the core features and documentation. The first three include one year of updates and support, while the last one includes lifetime updates and support.

Final Thoughts

Divi Overlays is a great way to create overlays using the Divi Builder. The Divi Builder allows you to add virtually any type of content to the overlay using the Divi modules or shortcodes from other plugins. It’s difficult to imagine an overlay that Divi Overlays can’t create. It does take a couple of steps to add code where needed, but it’s easy to do and the documentation steps you through it. The payoff far outweighs the few minutes it takes to learn to use it.

We want to hear from you! Have you tried Divi Overlays? Let us know about your experience in the comments.

Featured Image via brickclay / shutterstock.com