How can the Elementor editor add pop ups?

Pop up window It is a common pop-up page function on many e-commerce websites, and can be used in many use scenarios such as promotions, discounts, discounts, notifications, emergencies, login forms, checkout forms, shopping carts, subscription forms, cookies, and related articles. Many WordPress do not have this function, and can only be completed by third-party plug-ins, or assisted by the Elementor editor.

Popup pop ups enable users to focus on pop ups by popping up and covering the page's call window at a preset specific time or under a specific trigger condition.

Popup pop ups can be made in two ways. One is to directly use the popup provided in the official template library. You can click Insert to insert, modify the image and text and replace them with our own, and then use them directly.

The second way is to make a popup by ourselves. It doesn't sound easy, but it's actually easy to operate.

1. Install the Elementor and Elementor Pro plug-ins

When Elementor Pro is designed to use the popup pop-up function, you must first Install Elementor And Elementor Pro Plug in 。 The former is a free version, and the latter is a paid version.

Both must be installed, and neither is dispensable.

2. Popup pop-up template

In WordPress background>Templates>popups, click Add New Template on the right.

The default template type is popup. Give a name to distinguish different pop-up windows, and click Create Template.

There are many templates marked with PRO available in the template library of popups.

Watch which click "insert".

At this time, you can come to the editing area, design and modify according to the needs of the website and products, replace them with your own pictures and text, and save and publish them.

2.1. Popup Setting Parameters

Click the pop-up setting (gear icon) in the toolbar at the bottom of the left panel to edit the popup parameters.

The parameters of the settings tab are explained as follows:

• layout
• Width: set the exact width of the pop-up window, using px or vw
• Height: Use px or vw to set the exact height of the pop-up window. Use the width and height of 100vw to create a full screen pop-up window
• Horizo ntal: select the horizontal position of the pop-up window from the left, middle or right
• Vertical: select the vertical position of the pop-up window, from the top, center or bottom
• Overlay: show or hide background overlay
• Close button: select to show or hide the close button
• Display button after x seconds (if the display close button is selected): Select the number of seconds to wait before displaying the close button
• Entrance animation: Select the entrance animation of the pop-up window from the drop-down options, such as fade in, fade out, and zoom.
• Exit animation: exit animation, as above.
• Animation Duration: length of time to animate, in milliseconds
• General Settings
• Title: Enter the title of the pop-up window. This title will only be displayed on the back end and will not be displayed to the user.
• Status: Draft, Pending Review, Private or Published
• Preview Settings
• Preview dynamic content as: select from any file, page, post, media or 404 pages.
• Note: To view your selection, you must reload the page after selecting dynamic content.

The parameters of the style tab are explained as follows:

• eject
• Background type: select a background color, image, or gradient
• Border type: select a border type from none, solid, double, dot, dotted line or groove
• Border Radius: set the border radius to control the fillets on each side of the pop-up window
• Box Shadows: Adjust Box Shadows option
• cover
• Background type: select a background color, image, or gradient
• close button
• Position: Select to display the close button inside or outside the pop-up window
• Vertical position: Use the slider to select the vertical position of the close button
• Horizontal position: Use the slider to select the horizontal position of the close button
• Normal | Wander
• Color: Select the color of the close button for normal and hover states
• Background color: select the background color of the close button for normal and hovering states
• Size: set the size of the close button

The parameters of the advanced tab are explained as follows:

• Show Close Button After (sec): Enter the number of seconds. The close button will only appear after that time.
• Automatically Close After (ms): Enter the number of milliseconds to wait before automatically closing the pop-up window. Leave blank to disable automatic shutdown.
• Prevent closing on overlay layer: Select Yes to prevent the user from closing the pop-up window by clicking the overlay layer.
• Prevent pressing ESC to close: Select Yes to prevent users from pressing ESC to close pop-up windows.
• Disable page scrolling: Select Yes to prevent users from scrolling the page displayed behind the pop-up window
• Avoid multiple pop-up windows: If the user sees another pop-up window on the page he visits, select Yes to hide this pop-up window
• Open By Selector: Enter the selector list (CSS ID, class, or data element) that will manually trigger the pop-up window. View Description
• Margins: adjusting margins
• Padding: adjust the padding around the pop-up window
• CSS class: add a custom class without a point (for example, my class)
• Custom CSS
• Custom CSS: enter your own CSS

2.2 Condition Options

There are three options for publishing settings: conditions, triggers, and advanced rules.

Condition: where to display the popup. Entire website, Archives, Singular single page.

• For example, add an inclusion condition and select Singular>Front Page, so that the popup window is displayed only on the home page.
• After selecting, click the "NEXT" button at the lower right corner.

Triggers are user actions that trigger the activity popup.

For example, pop up when the page is loaded, pop up when scrolling down 50% of the page, and so on. You can set it yourself.

• On Page Load: The number of seconds to wait before triggering the pop-up window when the page is loaded.
• On Scroll: Select the direction (up or down) and the amount of scrolling before triggering the pop-up window. Scroll down is based on the percentage of page scroll down; Scroll up is based on the number of pixels to scroll up.
• On Scroll To Element: Enter the selector name (CSS ID). When the user scrolls to it, a pop-up window will be triggered. Also add the CSS ID to the Advanced tab of the element.
• On Click: Enter the number of clicks that will trigger the pop-up window
• After Inactivity: Enter the number of seconds the user will be inactive to trigger the pop-up window.
• On Page Exit Intent: trigger pop-up when the user's mouse activity indicates the intention to exit the page

Advanced rules: specify other requirements that must be met to generate pop ups.

• Show after X page views: set the number of page views before triggering pop-up.
• Show after X sessions: set the number of user sessions before triggering pop-up (sessions start when the user visits the website and end when the user closes the browser).
• Display X times at most: the maximum number of times the pop-up window will be displayed. On Open only allows pop-up windows to be opened as many times as the set number. On Close, the pop-up window will only open before the user closes it for the X th time, and will not open again later. This setting is set in the local store and will remain until deleted.
• When arriving from a specific URL: show or hide the pop-up window (enter a specific URL) when the user arrives from a specific URL. Regular expression is an option for advanced users to set advanced rules for matching URL patterns.
• Display on arrival: Displays whether the user is from the search engine, external links (enter the URL of a specific link), and/or internal links (enter the URL of a specific link).
• Hide for login user: hide the pop-up window of all login users or select custom roles. This function may not work properly after the website is cached
• Display on device: Select display on desktop, tablet and/or mobile device.

You can also manually trigger the control pop-up window and use Dynamic>Actions>Popup to add it.

Modify conditions, triggers and advanced rules later. Click the small downward arrow next to the green release button to see it.

3. Custom popup pop-up window

If you are not satisfied with the official popup, click the X in the upper right corner of the official template library to start custom design.

Click the pinion at the lower left corner of the page to see the popup setting item.

Click vw in width and enter 80 or other length, which means the pop-up window occupies 80% of the page width.

The horizontal and vertical of position set the position of the pop-up window.

For other parameters such as style and advanced settings, please refer to the above Popup parameter settings Content of.

3.1. Design pop

Click the red+sign in the editor area to select an appropriate structure.

Lao Wei casually designed the popup pop-up window in the following figure, with the pop-up title, title, text, pictures and buttons.

4. Page button calls up popup pop-up window

Popups should not appear too many times, which will affect the user experience.

So we can set the pop-up window after clicking on the button on the page, so that the pop-up window launched by the user will not be offensive at least.

5. Prompt pop-up when exiting popup

Sometimes you set a pop-up window to prompt users with discounts, discounts, and promotions when they enter the page, but users need to look more at the content of the page before deciding whether to participate.

At this time, you can add another popup window, open the "Page Exit Intent" in the trigger, and do not touch other options, save and publish.

At this time, the user first closes the pop-up window of the first opened page, and after 2 seconds, the pop-up window will prompt how much discount is available, which can improve the user's purchase rate.

Of course, users may be bored by the behavior of repeatedly popping up windows. Please set it carefully.

6. Precautions for pop up window

• Less information design, too much information is easy to confuse the focus of visitors
• Mobile end and flat end shall be considered
• The less the quantity, the better, not too often

7. Summary

It is easy to add and use popup pop-up window in the Elementor editor. The built-in function can be realized without plug-ins. You can insert an official popup template to change it, or design a popup pop-up window yourself.