How to Show a Popup After Downloading a File in Elementor

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 Elementor 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 our project. Read our affiliate disclosure.
Aliko Sunawang

Aliko Sunawang

Aliko is a WordPress expert and lead blogger at WPPagebuilders. He has been blogging with WordPress since 2012. He is responsible of all content published on this website.
Want to save yearly expense up to $219? why not?

Leave a Comment

Haven’t used Elementor Pro yet?