V4 Extentions Popup Estimated reading: 5 minutes 2 views Show a popup when visitors click a button, load a page, scroll, or are about to leave. Design the popup with normal Elementor V4 elements. No code needed. POPUP IS A template you design OPENS WITH Click, load, scroll or exit PLAN Pro BEFORE YOU START Requirement ELEMENTOR V4 Atomic ANIMATION ADDONS Free ANIMATION ADDONS Pro Tip: Install and activate both Animation Addons plugins before you start. STEP 1 Enable the Extension Turn on the extension from your dashboard. You only need to do this once. From your WordPress Dashboard, go to Animation Addon > Extensions. Open the Elementor V4 (Atomic) tab. Under Interaction Extensions, turn on Popup. Click Save Settings. Popup Extension 1 (click to zoom) STEP 2 Create a Popup A popup is a template. You create it in AAE Builder. Go to Animation Addon > Theme Builder. This opens AAE Builder. Open the Popup — Atomic tab. Click Add New Template. Type a Name, for example Welcome Popup. The Type is already Popup — Atomic. Click Save Settings. Then click Edit With Elementor. Popup Extension 2 (click to zoom) Popup Extension 3 (click to zoom) The popup opens in Elementor with a ready sample design. Replace the sample text and button with your own content. Everything inside is a normal V4 element. Popup Extension 4 (click to zoom) Note: When your popup is ready, click Publish. A popup must be published before it can show on your site. STEP 3 Set Up the Popup Click the orange Popup Settings button at the top of the popup. A window opens with tabs: Layout, Close, Behavior, Overlay, Triggers, Frequency, Devices and Display. Popup Extension 5 (click to zoom) Change what you need, then click Apply. Changes are saved only after you click Apply. STEP 4 Open the Popup The easiest way is a button. Any click can open a popup. Open your page in the Elementor editor. Select a Button. Go to the General tab and open the Popup section. Turn on Enable popup trigger. Keep On click as Open popup. In Popup, type 2 or more letters of the popup name and pick it. Update your page. Popup Extension 6 (click to zoom) Note: The Popup section shows on Heading, Paragraph, Button, Image, SVG, Flexbox, Div Block and Grid, and on some Animation Addons widgets like Post Title, Post Image and Icon List. RESULT Final Result Popup Extension 7 Note: This GIF is slowed down so you can see the animation. The default open animation is Overlay reveal, 420 ms. SETTINGS Popup Settings These are the tabs in the Popup Settings window. Popup Extension 8 (click to zoom) Layout Position: Center, Top, Bottom, Left (drawer), Right (drawer), Left center, Right center or Fullscreen. Default: Center Animation: Overlay reveal, Blur in, Spring slide, Pop or None. Default: Overlay reveal Duration (ms): how long the animation runs, from 150 to 900. Default: 420 Easing: Smooth, Spring or Ease. Default: Smooth Z-index: how far in front the popup sits. Default: 9999 Accessible label: a short name for screen readers, like “Newsletter signup”. Optional. Close Close icon adds a ready-made ✕ button into the popup so visitors can close it. It is a normal element, so you can restyle or move it. Turn it off to remove it. Behavior Close on ESC key: Default: On Close on overlay click: clicking outside the popup closes it. Default: On Lock page scroll while open: Default: On Overlay Overlay color is the tint behind the popup. Leave it empty for the default dark tint. Triggers Open the popup by itself. You can combine them. On page load: opens after a number of seconds you choose. On exit intent (desktop): opens when the mouse moves to leave the page. After scrolling: opens after the visitor scrolls a percent of the page. Frequency Do not annoy your visitors. Show at most: how many times to show the popup. 0 means no limit. Snooze for: after a visitor closes it, wait this many days. 0 means off. Devices Choose where the popup opens by itself: Desktop, Tablet and Mobile. Default: All on Display Open selector: a CSS selector, like .open-newsletter or #menu-item-42 a. Clicking anything that matches it opens the popup. Good for menu items. Show on: where the popup is added. Choose Only pages that reference this popup, Entire site, Front page only, or Specific post/page IDs. Default: Only pages that reference this popup Post/page IDs: shows when you choose Specific IDs. Type IDs with commas, like 12, 34, 56. Tip: Triggers, Frequency, Devices and Display work on your live website, not inside the editor. NEED HELP? Troubleshooting The popup does not open Check these in order: the popup is Published; Enable popup trigger is on; the right popup is picked in Popup; your page is saved; and Animation Addons Pro is active. Clear your site cache if you use a cache plugin. I cannot find my popup in the search Type at least 2 letters. Only published popups of type Popup — Atomic show in the search. The popup opens by itself too often Open Popup Settings > Frequency and set Show at most or Snooze for. How do I close the popup with a button? Select an element inside the popup. In its Popup section, turn on Enable popup trigger and set On click to Close popup. With no popup picked, it closes the popup that is open on top. You Did It Your popup is ready. If you face any problem, please contact our support team. We are happy to help.
