How to trigger an Area
There are so many ways to trigger a Popup or Divi Area. This document gives you a short overview of all available triggers. The examples below show you how to display a Popup with the ID
#sample-area as seen in the screenshot below:
Create a click trigger by setting any Module Link to the Area ID #sample-area. This works for all Divi Modules, even for Sections and Rows.
Any link that you place on your webpage that points to a valid Area ID will trigger that Popup. For example:
<a href="#sample-area">Show the Sample</a>
Take care when using a link trigger in a global element, such as the main menu, because the Area has to be present on every page. Either configure the Page Rules (Pro) of the Area accordingly or insert the Popup into the header or footer template via the Theme Builder.
Set the CSS class of any Module to the exact Area ID, such as sample-area, to create a click-trigger. The CSS class trigger is a great solution to trigger an Area from the main menu: When the Popup is present on the current page, it will open; when the Popup is not present, the menu item behaves like a normal menu item.
Add the CSS class on-hover to any trigger element (such as a Module, a link, etc.) to create a hover-trigger, which displays the Popup on mouse contact. For example:
<a href="#sample-area" class="on-hover">Show the Sample</a>
When editing an on-page Popup (i.e., with the “free plugin”), you can use the flag Enable Exit Intent to make that Popup show up when an Exit Intent is detected.
When editing a Divi Area, use the automatic trigger Exit Intent for the same behavior (see below).
Automatic Triggers (Pro)
Use any of the built-in automatic triggers via the Divi Areas meta box: On Click, On Hover, After Delay, On Scroll to element or position, Exit Intent, On Inactivity, On Browser Focus.
URL Hash (Pro)
With Divi Areas Pro, you can trigger any Area on the current page by adding the Area ID to the URL, e.g.,
divimode.com/#sample-area. Note that this works even without clicking a trigger element, but by entering the Area ID into the address bar. This is an ideal solution to trigger a Popup after completing a contact form: Set the contact form “Redirect URL: #sample-area” to achieve this.
You can create custom triggers by using the plugins JS API. To trigger an Area, use the command
A complete, working snippet could look like the following: