help center

On this page

Create a fly-in popup

Last Update: June 24, 2024

Fly-in popups are effective because they draw a user’s attention, but are relatively unobtrusive. The user’s experience isn’t completely disrupted, and yet the user knows that something of possible interest is available. For this example, we’ll wait for the user to reach the end of an article, and then we’ll popup an alert in the lower right corner that encourages her to read another article. We’ll show the popup on Desktops and Tablets, but not on Mobile devices.

Create Popup

  1. Go to Dashboard > Templates > Popups > Add New
  2. Name your template and click ‘Create Template
  3. Choose a template from the Library or create your own design
file cfwJSQZ20C Create a fly-in popup 1

Settings

  1. Set a custom width and height
  2. Set the Horizontal position to Center and the Vertical position to Center.
  3. Hide Overlay
  4. Show Close Button
  5. Set Entrance Animation to Slide In Up
file qdnsdeeEMO Create a fly-in popup 3

Style

Change text, background image, border, and styling as needed.

Adjust Section Content

Change content as needed. We used a Headline widget and a Posts widget to show one post from a category of our choice.

file P7mzK33KT7 Create a fly-in popup 5

Publish Settings

Conditions: Include: Singular > All Singular

file vzfycjJle9 Create a fly-in popup 7

Triggers: On Scroll, Down, at 80%

file YDVcrV61QD Create a fly-in popup 9

Advanced Rules: Show only on Desktop and Tablet devices.

file Create a fly-in popup 11

Keep visitors engaged with an exit-intent popup. Elementor Premium Services offers expert help designing and implementing the perfect popup. 

Need expert help in creating that perfect lead-collection popup for your marketing campaign? Check out Elementor Premium Services.

Have more questions? We’re more than happy to assist.

Link is copied to clipboard!
On this page

Is this article helpful?

Share this article