Creating Global Overlays with Divi Overlays

*This tutorial is no longer necessary, as the Global Overlays feature has been deprecated as of Divi Overlay 2.0. Now, the plugin will automatically add the content to the background of the page anytime a click trigger is present, or when an automatic or URL trigger is set.

—————————————————————————————–

This article shows you how to allow your overlay to be triggered from any and all pages, without having to manually add the content shortcode to each individual page. For more information on creating overlays or setting triggers, please refer to the Getting Started tutorial.

So what’s the benefit of setting an overlay as a global overlay? Divi Overlays works by adding the content of the overlay to your page via the content shortcode that you paste on your page, and then it loads it in the background when the page loads. This allows the instant loading of the overlay when you click the trigger. It’s a beautiful thing. No delays, no loading scroll wheels. However, sometimes you want an overlay to be triggered from a navigation menu link, or a sidebar or footer, which means the overlay needs to be added to essentially every page. And rather than adding the content shortcode to every page on your site manually, setting up a Global Overlay does the hard work for you.

So here’s how to set up a global overlay:

Create the overlay like normal, as shown in the Getting Started tutorial (except don’t add the content shortcode to the page). Instead, copy the content shortcode, and navigate to Appearance > Widgets. Find the “Divi Overlays: Global Overlays” sidebar and add a text widget to it. And paste the content shortcode to your overlay inside. Now your Divi Overlay can be triggered from any page.

If you want your global overlay to be triggered from a menu link, then refer to this article.