The feature of Elementor's popup window is also good when we build web pages using Elementor editor; this feature can help you to attract the user's attention, provide important information or special offers, etc. Let's see how Elementor creates a popup window and configures the popup window

Creating a popup window

First, a popup needs to be created, and you can set up your first popup by following the steps below. Follow this guide using thePushbutton manualTriggers a pop-up window.

1. Go to Dashboard > Templates > Popup > Add New
2. Name the template and click "Creating Templates"
3. Choose a template from the library or create your own design
4. Click "post", and then click "Save and close"
5. Open a new page in Elementor (CTRL / CMD + E, New Page)
6. Drag in the button widget
7. Under "Layout", select the"Links" > "Dynamic" > "Actions" > "Popups"
8. click (using a mouse or other pointing device)pop-up window>Open pop-up window> Select the pop-up window you created
9. Go to the Live page, click the button and see the pop-up window appear

No conditions, triggers, or advanced rules are needed for this type of basic popup that appears when you click a button.

This is the basic setup. Try it out to get a feel for how to use Elementor popups.

Configuring pop-up windows

A pop-up window is a call-to-action modal window that pops up and covers a page at a specific moment or under specific triggers and conditions. Pop-ups are designed to focus the user's attention after they have taken an action.

First, go toTemplates > Popup Window.. Control the layout, conditions, rules, and styles of the popup, then design the popup content.take note of: Click the Popup Settings gear icon in the toolbar at the bottom of the panel to edit the popup settings.

Designing pop-up windows

set up

opening (chess jargon)

1. height: Set the exact width of the popup window, using px or vh
2. Height: Use px or vh to set the exact height of the popup window. Use a width and height of 100vh to create a full-screen popup window
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. Overlay: Show or hide background overlay
6. close button: Choose to show or hide the close button
7. How many seconds before the button is displayed?(if display off button is selected): select the number of seconds to wait before displaying the off button
8. Entrance 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. Animation Duration: set the duration of the animation in milliseconds

General Settings

1. caption: Enter a title for the popup window. This title will only be displayed on the back end and will not be shown to the user.
2. state of affairs: draft, pending, private or issued

Preview Settings

Preview dynamic content as: Choose from any archive, page, post, media or 404 page.

Note: To view the selection, you must reload the page 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, either none, solid, double, dotted, dashed or notched.
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 states.
2. background color: Choose the background color of the Close button in Normal and Hover states.
3. Size : Set the size of the close button

high

high

1. Time interval for displaying the off button (seconds): Enter the number of seconds. The Close button will only appear 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 this blank to disable auto-close.
3. Preventing closure of the overlay: Selecting Yes prevents the user from closing the pop-up window by clicking on the overlay.
4. Prevents pressing the ESC key from closing: Selecting "Yes" prevents the user from closing the pop-up window by pressing the ESC key.
5. Disable page scrolling: Select "Yes" to prevent users from scrolling the page displayed behind the pop-up window.
6. Avoid multiple pop-up windows: If the user sees another pop-up window on the page he is visiting, select Yes to hide this pop-up window.
7. Open by selector: 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)

Customized CSS

Custom CSS: Enter your own CSS

Controlling pop-ups through publishing settings

Setting conditions

prerequisiteAllows you to set which pages of the site the popup will be displayed on.

Set the conditions that determine where the popup is used (excluding manual triggers). For example, add the "Contains" condition and select the"Singular">"Home"to display the pop-up window only on the site home page.

Setting Triggers

flip-flop (electronics)is the user action that will cause your campaign to pop up. For each option that will cause the popup to appear, select Yes or No.

1. When the page loads: If set to "Yes", sets the number of seconds to wait before triggering the popup when the page loads.
2. rolling: If set to "Yes", select the direction (up or down) and the amount of scrolling before triggering the popup. Downward scrolling is based on the page scrolling down thepercentage; scrolling up is based on the upward scrollingpixel countThe
3. On Scroll To Element: If set to Yes, enter the name of the selector (CSS ID) that will trigger a pop-up window when the user scrolls to it. 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 will trigger the pop-up window
5. post-inactivity: If set to "Yes", enter the number of seconds of user inactivity that will trigger the popup.
6. On Page Exit Intent: Set to "Yes" to trigger a popup window when the user's 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 how many page views: If set to Yes, sets the number of pageviews before the popup is triggered.
2. Displayed after how many 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. Show up to how many times: The maximum number of times the popup window can be displayed. If "Count" is set to "On Open", the popup will only be allowed to open the set number of times. If Count is set to Closed, the popup will only 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 popup windows when users arrive 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 arrived 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 from 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

Attention:If the page is not reloaded or re-entered, the pop-up window cannot be displayed more than once.

Control popups by manual triggers

Popups can be triggered manually. Dynamic links can use Popup Action to turn popups on and off, and forms can use the Act on Submission option to turn popups on and off. Any element can have a unique selector (class, ID, or data element) that manually triggers a popup when the element is clicked.

• From any linked element, selectDynamic > Actions > PopupClick on the Click on the"Pop-up windows."choose by"Open pop-up window"maybe"Close pop-up window". If you choose to close the pop-up window, "no longer displayed" option will become available.
• From the Elementor form, selectPost-Submit Actions > Add Actions > Open Popups or Close Popups
• 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 then specify the class name (without the leading dot) or ID name (without the leading #) for the element. In the pop-up window of theConditionsin a page that contains the element, using a unique selector (e.g.Conditions > Include > 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 a theme's navigation menu items, content in text editor widgets, from non-Elementor elements or scripts, etc.

When triggering a popup from a custom selector, note that the element does not have to be a "link". Normally non-clickable elements (e.g. plain text) can also be clicked to generate a popup. Note also that triggers and advanced rules are ignored when using this option.

Contact Us
Can't read the tutorial? Contact us for a free answer! Free help for personal, small business sites!	Customer Service
① Tel: 020-2206-9892
② QQ咨询：1025174874
(iii) E-mail: info@361sale.com
④ Working hours: Monday to Friday, 9:30-18:30, holidays off