Using an Image to Trigger a Divi Overlay

This article will show you how to use an image to trigger a Divi Overlay. For instructions on creating the overlay, and adding the content shortcode to your page, please refer to the getting started tutorial and video.

With Divi, there are many ways to add images to your page. For this article, we’re going to look at two main ways of using an image as a trigger: using an image in the text editor, and using the Divi module. Once you understand how the triggers work, you can apply it to any module as well.

Using an Image in the Text Editor to Trigger a Divi Overlay

First, copy the unique CSS ID for the overlay you would like to trigger. The unique CSS ID is found in the column labeled “CSS ID” on the main Divi Overlays page.

Next, navigate to the page you would like to place the image trigger. Now, insert the image like you normally would into the text editor via the “Add Media” button. Next, click over to the “Text” tab of the text editor to show the HTML.

Now, find the image in the HTML. It should look something like this:

<img class=”aligncenter size-large wp-image-25724″ src=”https://yourdomain.com/wp-content/uploads/2017/02/your_image.png” alt=”” width=”1024″ height=”696″ />

Now, add the following in front of the image HTML:

And add the closing link tag to the end of the image HTML:

So your image HTML should now look like this:

<a id=”overlay_unique_id_940″><img class=”aligncenter size-large wp-image-25724″ src=”https://yourdomain.com/wp-content/uploads/2017/02/your_image.png” alt=”” width=”1024″ height=”696″ /></a>

Using an Image Module to Trigger a Divi Overlay

Using an image module (or any module) to trigger an overlay is a little bit different because we’re not going to be touching the HTML code side of things. Instead, Divi has pre-built CSS ID input areas.

So to use an image module as a trigger, simply add the unique CSS ID for your overlay to the CSS ID input field in the Custom CSS tab of your image module.

Next, you’ll need to add the text #open-overlay to the “Link URL” field in the “General Settings” tab.

You don’t actually have to have the exact text #open-overlay, but the # symbol and then some sort of text. So it can be #open, or #open-sesame, or even #bananas. Divi won’t execute the URL unless there’s something in there, so we can’t leave it blank, and it strips out anything except valid URLS or anchor links (which is what #open-overlay is).