How to Create Full-Screen Inactivity-Triggered Countdown Popups with Elementor to Boost User Conversions

Full-screen pop-up windowUsed to attract the user's attention a very effective way, especially in thePromotions,call to actionand other scenarios that require a timely response from the user. This article will detail how to use theElementor creates a full-screen pop-up windowThis pop-up window will be displayed when the user is inactive30 seconds.Automatically triggered with aCountdown WidgetThe purpose is toAwakening the user's attentionand prompts immediate action.

I. Why use full-screen pop-up windows?

Full-screen pop-ups have several significant advantages:

1. draw attention to sth.: The full-screen design means users can't ignore pop-ups, which increases click-through and conversion rates.
2. Promoting user action: Combined with a countdown feature, pop-ups can create a sense of urgency, prompting users to take action as soon as possible, such as completing a purchase, subscribing, or participating in an event.
3. inactivity trigger: By detecting the user's mouse and keyboard activity, it is possible to display pop-up windows to re-energize the user when they have been inactive for a long time.

Second, how to use Elementor to create a full-screen pop-up window

We will go through the following steps to create a full-screen, inactive state-triggered popup window:

1. Creating pop-up windows

Step 1: Go to the Elementor Dashboard

1. Log in to your WordPress backend.
2. In the left navigation menu, go to templates > pop-up window > Add new popup windowThe

Step 2: Name your template

1. Need to name the new popup so that it can be easily recognized in the future.

2. Once you've finished naming, click Creating Templates Button.

Step 3: Select or design a template

1. Elementor provides a richtemplate libraryYou can choose from a selection of pre-designed pop-up window templates.

2. For a more personalized design, you can choose to design your own template from scratch. Click "Blank templates" and start customizing.

2. set upDesign of full-screen pop-up windows

During the design process, make sure your popups are visually appealing and fully functional. Here we will use the Elementorcount downwidgetsto help drive user adoption, navigating first toset upThe

Step 1: Setting the size of the popup window

1. height: Set the width of the popup window to 100 VW(100% of the viewport width) so that the popup window will cover the entire width of the widget location.

2. high degree: To set the height of the popup window to fit the screen, here you can use the100 VH(100% at viewport height) to ensure that the popup window covers the entire screen.

Step 2: Setting the Alignment of the Popup Window

1. commander-in-chief (military) horizontal position set to centering, make sure that the contents of the pop-up window are centered horizontally.

2. commander-in-chief (military) vertical position is also set to centering, so that it is vertically aligned in the center of the screen.

Step 3: Show Override and Close Buttons

1. Display Override: Enable the Show Overlay option so that background content is covered by a gray translucent layer when a pop-up window appears, further enhancing user attention.

2. Show Close Button: Enable the close button so that the user can freely close the popup window. The close button is usually a small "X" icon that can be placed in the upper right corner of the popup window.

Step 4: Customize Style and Content

1. Text and background: Customize the pop-up window with your branding or current promotions.Text, background image. It is possible to useCustom fonts, colors and button designsto match the style of your website.

2. Countdown Widget: the Elementor's Countdown Widget Drag and drop into the popup window. Set the time for the countdown, which usually adds a sense of urgency and directs the user to take immediate action.

3. Publishing settings

Once the pop-up window design is complete, clickpost(math.) genusSetting its display conditions and triggersThe

Step 1: Condition Setting

1. exist Publishing Settings in which you can determine on which pages or scenes the popup window will be displayed.
2. In the condition settings, select including through > Entire site. This way, the popup will trigger on every page of the site.

Step 2: Trigger Conditions

1. option trigger condition Options.

2. Setting pop-ups to appear in the user After 30 seconds of inactivity Trigger. Elementor will automatically detect the user's activity status (e.g. mouse movement or click), and if the user has not acted within the specified time, the popup window will be displayed automatically.

Step 3: Using the Exit Intent Popup

In addition to inactivity triggers, it is possible to combine Exit Intent Trigger, the pop-up window is also automatically displayed when the user tries to close or leave the page. This is an effective way to capture the attention of users who are about to leave.

4. Advanced settings and optimization

Animation and Visual Effects

To make the popup more attractive, you can add an animation effect to it. In the popup edit page created in Elementor, click on the right side of the "high level"tab, in "Action Effects", from the bottom of theSlide in or fade outElementor offers a wide range of animation effects, so you can choose the one that suits your design style to enhance the user experience.

performance optimization

While pop-ups are an effective tool for increasing conversions, theOveruse or too frequentThe pop-up window mayImpact on user experience. Therefore, it is recommended that you set the frequency of pop-up windows reasonably and ensure that they do not interfere with the normal browsing behavior of users. In addition, make sure that the loading speed of the pop-up windows is optimized so as not to affect the overall performance of the page.

summarize

Go through the steps in this article to understand how to create a full-screen inactivity-triggered popup using Elementor. Such popups not only capture the user's full attention, but also further increase user engagement and conversions with countdown timer features and exit intent triggers. In practice, remember to optimize the frequency and style of popups to ensure an enhanced user experience.