How to Configure Popups in a WordPress Site with Elementor

Popups are call-to-action mode windows that pop up and cover a page at a specific moment or under specific triggers and conditions. Pop-ups primarily capture the attention of users after they have taken an action.

First, go toTemplates > Popup Window. Control the layout, conditions, rules, and styles of pop-up windows, and then design the content of the pop-up windows.

take note of: Click Eject in the toolbar at the bottom of the panel.Setting up the gearsicon to edit the popup settings.

Designing pop-up windows

set up

opening (chess jargon)

1. height: Use px or vh to set the exact width of the popup window
2. high degree: Use px or vh to set the exact height of the popup window. Use 100vh for both width and height to create full-screen popups.
3. level (of achievement etc): Select the horizontal position of the pop-up window from left, center or right
4. perpendicular: Select the vertical position of the pop-up window from top, center or bottom
5. overwrite: Show or hide background overlay
6. close button: Choose to show or hide the close button
7. Display button after x seconds(if Show Off button is selected): select the number of seconds to wait before displaying the Off button
8. Go to animation: Select the entry animation for the popup window from the drop-down options, such as Fade and Zoom. Select any animation effect to preview the effect.
9. Exit animation: Select the exit animation for the popup window from the drop-down options, such as Fade and Zoom. Select any animation effect to preview the effect.
10. Duration of animation: set the duration of the animation in milliseconds

General Settings

1. caption: Enter a title for the popup window. This title is only displayed on the backend and will not be shown to the user.
2. state of affairs: Draft, Pending Review, Private or Posted

Preview Settings

The preview dynamics are: Choose from any archive, page, post, media or 404 page.

take note of: To view the selection, the page must be reloaded after selecting the dynamic content.

hairstyle

pop-up window

1. Background type: Select background color, image or gradient
2. Border type: Select the type of border, choose from no border, solid line border, double line border, dotted line border, dashed line border or notched border.
3. Border radius: Set the border radius to control the corner rounding on each side of the popup window
4. shadow of the frame: Adjustment box shading options

overwrite

Background type: Select background color, image or gradient

close button

1. placement: Choose to display the "close" button inside or outside the pop-up window
2. vertical position: Use the slider to select the vertical position of the "Close" button.
3. horizontal position: Use the slider to select the horizontal position of the "Close" button.

Normal | Hover

1. color: Choose the color of the "Close" button in normal and hover state.
2. background color: Choose the background color of the Close button in Normal and Hover states.
3. Size: Setting the size of the close button

Advanced

Advanced

1. Displays the off button after the following time (in seconds): Enter the number of seconds. The Off button is displayed only after that time has elapsed.
2. Auto Off Time (ms): Enter the number of milliseconds to wait before automatically closing the pop-up window. Leave it blank to disable auto-close.
3. Preventing Closure Overrides: Selecting Yes prevents the user from closing the pop-up window by clicking Override.
4. Prevents closing by pressing ESC: Selecting "Yes" prevents the user from pressing the ESC key to close the pop-up window.
5. Disable page scrolling: Selecting "Yes" prevents the user from scrolling the page displayed behind the pop-up window.
6. Avoid multiple pop-ups: If the user sees another pop-up window on the visited page, select "Yes" to hide this pop-up window.
7. Press selector to open: Enter the list of selectors (CSS IDs, classes, or data elements) that will manually trigger the popup.
8. margin: Adjustment of margins
9. padding: Adjust the padding around pop-up windows
10. CSS class: Add custom classes without dots (e.g. my-class)

Custom CSS

Custom CSS: Enter your own CSS

Controlling pop-ups through publishing settings

Setting conditions

prerequisiteAllows to set on which pages of the website the popup will appear.

Set conditions to determine where the popup will be used (excluding manual triggers). For example, add an inclusion condition and select
Singular > Home.so that the pop-up window is displayed only on the home page of the site.

Setting Triggers

flip-flop (electronics)is the user action that causes the campaign to pop up. For each option that will cause the popup, select "be"or"clogged".

1. When the page loads: If set to "Yes", sets the number of seconds to wait before triggering the popup after the page loads.
2. rolling: If set to Yes, selects the direction (up or down) and the amount of scrolling before the popup is triggered. Scrolling down is based on scrolling down the pagepercentage; Scroll Up is based on Scroll Uppixel countThe
3. When scrolling to an element: If set to Yes, enter the selector name (CSS ID) that will trigger a pop-up window when the user scrolls over the element. The CSS ID must also be added to the Advanced tab of the element.
4. clicking on: If set to "Yes", enter the number of clicks that triggered the pop-up window.
5. post-inactivity: If set to "Yes", enter the number of seconds of user inactivity that triggered the popup.
6. Page Exit Intent: Set to "Yes" to trigger a popup window when user mouse activity indicates an intent to exit the page.

Advanced Rules

Advanced RulesSpecifies additional requirements that must be met to generate a popup window.

1. Displayed after viewing X pages: If set to "Yes", sets the number of page views before the popup window is triggered.
2. Displayed after X sessions: If set to "Yes", sets the number of user sessions before the popup window is triggered (the session starts when the user visits the site and ends when the user closes the browser).
3. Displayed up to X times: The maximum number of times the popup window can be displayed. If count is set to open, the popup will only be allowed to open the set number of times. If the count is set to Off, the popup will only be open until the user closes it for the Xth time, after which it will not open again. This setting is set in local storage and will remain there until deleted.
4. When arriving from a specific URL: If set to Yes, show or hide the popup window when a user arrives from a specific URL (enter a specific URL).Regex is an option for advanced users to set advanced rules for matching URL patterns.
5. Displayed on arrival: If set to Yes, displays whether the user came from a search engine, an external link (enter the URL of a specific link), and/or an internal link (enter the URL of a specific link).
6. Hide logged-in users: Set to Yes to hide popups for all logged in users or selected custom roles. This feature may not work properly for cached sites
7. Displayed on the device: Set to "Yes" to choose to display on desktops, tablets and/or mobile devices

Note: The pop-up window cannot be displayed more than once without reloading or re-entering the page.

Control popups by manual triggers

Popups can be triggered manually. Dynamic links can use popup actions to open or close popup windows. Forms can use a post-submit action option to open or close a popup window. Any element can manually trigger a popup when clicked using a unique selector (class, ID, or data element).

• From any linked element, selectDynamic > Operation > Popup WindowClick on the Click on thepop-up windowchoose byOpen pop-up windowmaybeClose the pop-up window. If you choose to close the pop-up window, the "no longer displayed" option will become available.
• From the Elementor form, select"Actions After Submission" > "Add Action" > "Open Popup" or "Close Popup"
• From custom selectors: any element can have a selector set that can be used as a manual popup trigger. Edit the element and go toAdvanced > CSS Classes(orCSS ID), and assign the element a class name (without the leading dot) or an ID name (without the leading #). In the pop-up window of theprerequisitein which the page containing the element with the unique selector is selected (e.g., theConditions> Contains> Singular> Pages> Your Page Title). The popup will be triggered when the user visits the page and clicks on the element. This is useful for opening popups from the theme's navigation menu items, content in text editor widgets, non-Elementor elements or scripts, etc.