📖 How to Open a Popup via Elementor (Free)

Elementor is a powerful website builder for WordPress that lets users design pages visually. Using the Instant Popup Builder plugin, you can trigger popups on click or on hover of any Elementor element.

In this guide, you’ll learn how to open a popup on click using a button created with Elementor. The same logic applies to other elements like images, text, or icons.

Prerequisites

• A working Elementor installation
• Instant Popup Builder (Latest Version is recommended)
• A designed pop-up ready to be triggered

Steps to Open a Popup on Click via Elementor

1. Create the Popup

• Go to Instant Popup > All Popups > Select the Popup and click on Edit (In case of an existing Popup).
• Go to Instant Popup > Add new > Select Popup Type > Design and configure your pop-up.
• Set the “On Click” or “On Hover” trigger in the Events section.
• Copy the CSS Class similar to [instant-popup-trigger-120]

2. Edit the Page in Elementor

• Open the page you want to edit using the Elementor editor.
• Drag and drop a Button widget (or any other element you want to use for the trigger).

3. Set the Popup Trigger Class

• Click on the button to edit it.
• Go to the Advanced tab.
• In the CSS Classes field, add the popup trigger class for example [instant-popup-trigger-120].
• Click Update to save your changes.

That’s It!

Once everything is saved, clicking the button on your live page will trigger the popup. You can apply this same method to other elements like headings, images, or icons by assigning the same CSS class.