1) Click Trigger

Use the button to the right to trigger the Click-Trigger Popup. The button has the CSS class area-click.

2) Hover Trigger

Hover the image to the right to trigger the Hover-Trigger Popup. The image has the CSS class area-hover.

3) Delayed

A Popup Area will display 3 seconds after the page loaded.

4) Scroll Percent

Scroll down 25 Percent to show the On-Percent-Scroll Area.

5) Scroll Pixel

Scroll down 100 Pixel to show the On-Pixel-Scroll Area.

6) Scroll To Element

There is a cat image below, with the CSS class area-scroll-element. When you scroll down to that image, you see another On-Scroll-To-Element Area.

7) On Inactivity

Do nothing for 5 seconds – no scroll, no mouse move, no keyboard action. Then you see the Inactivity Area.

8) Tab Focus

Switch to a different tab and come back here to see the Tab-Focus Area.

9) URL Hash

Add the following hash-value to the URL to see the URL Hash Trigger in action: #divi-area-hash

10) Exit Intent

There is an Exit Intent Area on this page.

11) Back Button

Clicked the browsers Back button. Also works on mobile devices.

Conditions

You should see a Fly-In that displays the current day of the week