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.
Conditions
You should see a Fly-In that displays the current day of the week