How to Show a Popup After Downloading a File in Elementor

Updated: April 15, 2022

Offering something (e.g., e-book and template) is a proven way to increase email subscribers of a website. In Elementor, you can make use of the Button widget to create a file download button to make it easier for your visitors to download the digital file you offer. After the file is downloaded, you can show a popup that contains subscription form (or a just a “thank you” text). The problem is that Elementor only allows you to add one link to the Button widget. So, how to show the popup if you have used the link field of the Button widget to add the link of the file you offer? This article will show you how.

As you might have known, you can show an Elementor popup based on the following trigger types:

  • On page load
  • On click
  • On scroll
  • Exit intent
  • After inactivity

In addition to the above trigger types, you can also show a popup by selector. So, if you already use the link field of the Button widget to add the link of the file you offer, you can open the popup by selector.

Showing Elementor Popup After File Download

Step 1: Prepare the Popup

First, create a popup you want to show after a visitor clicks a download button. If you haven’t created any popup before, you can read our previous article to learn how to create a popup in Elementor. You don’t need to set any trigger on the PUBLISH SETTINGS window as you will show the popup by selector. You just need to set the display condition.

Once done creating the popup, click the gear icon on the bottom-left corner to open the Popup Settings panel. On the Popup Settings panel, go to the Advanced tab and add a selector on the Open By Selector field. Make sure to add the dot symbol as the prefix (e.g., .popup12345).

Step 2: Edit a Page/Template Where You Want to Show the Popup on

Once your popup is ready, you can edit a page or template where you want to show the popup on. Edit the Button widget (or any widget you want to use to show the popup). On the settings panel, go to the Advanced tab and add the selector you specified above to the CSS Classes field under the Layout tab. This time, you don’t need to include the dot symbol.

Update your page/template and test the result.

This page may contain affiliate links, which help support WP Pagebuilders. Learn more

Leave a Reply

Your email address will not be published.

Pin It on Pinterest

Thanks for commenting

Help us grow by sharing this post with your friends!

Scroll to Top

It's a minute already. Thanks for staying

Subscribe to get regular articles about page builder plugins and WordPress in general