How to Open an Elementor Popup with a Link

At Pluginizer, we know that Elementor popups can be powerful tools for engaging website visitors. However, many users struggle with opening these popups using custom links.

In this guide, we’ll provide step-by-step instructions on how to open an Elementor popup with a link. You’ll learn to create a popup, set up triggers, and link to it effectively.

Creating a popup in Elementor can significantly boost user engagement on your website. This guide will walk you through the process step-by-step, ensuring you can create effective popups that capture your visitors’ attention.

Access the Elementor Editor

Log into your WordPress dashboard and navigate to Templates > Popups. Click on ‘Add New’ to create your popup. Choose a descriptive name for easy identification later. This action will take you to the Elementor editor, where you’ll design your popup.

The Elementor editor provides a blank canvas for your creativity. Drag and drop elements from the left sidebar to construct your popup. For maximum impact, maintain a clean and focused design. Include these key elements:

A compelling headline
Concise body text
A clear call-to-action (CTA) button

After designing your popup, it’s time to fine-tune its settings. Click the gear icon in the bottom left corner of the Elementor editor to open the settings panel. Here, you can adjust:

Popup size
Position
Animation

For optimal results, try setting your popup to appear in the center of the screen and using a subtle entrance animation.

Infographic: How to Create an Effective Popup in Elementor? - open elementor popup link

Next, navigate to the ‘Advanced’ tab in the settings panel. This is where you set display conditions, deciding when and where your popup will appear. For example, you might show it on specific pages or after a particular time.

Don’t forget to add a close button to your popup. This is essential for user experience.

Now that you’ve created and configured your popup, let’s trigger it. This step will determine how and when your carefully crafted popup appears to your visitors.

Understanding Trigger Options

Elementor provides various trigger options for your popups. These include time delay, page load, scroll position, and the ‘On Click’ trigger. Each serves a different purpose, allowing you to tailor the popup appearance to your needs.

Selecting the ‘On Click’ Trigger

The ‘On Click’ trigger is your best choice to open a popup with a link. Here’s how to set it up:

Go to Templates > Popups
Control the layout, conditions, rules, and styles of the popup
Design the popup content

Configuring the Trigger Element

After selecting ‘On Click,’ you need to specify which element will activate your popup:

Locate the ‘CSS ID or Class’ field
Enter a unique class name (e.g., ‘.open-popup-link’)
Add this class to the link or button that will open your popup

Infographic: How many trigger options does Elementor offer for popups?

This step connects your trigger element to the popup, ensuring it appears when clicked.

Customizing Advanced Settings

Elementor allows further customization of your popup trigger:

Set appearance limits to prevent overexposure
Turn on or off the popup on specific devices
Adjust timing and animation settings

These options help create a more tailored user experience (UX) across different platforms.

Always test your popup thoroughly before publishing:

Use Elementor’s preview mode
Click your trigger element to ensure the popup appears
Test on different devices to verify responsiveness

Proper testing helps identify and resolve any issues before your popup goes live.

With your trigger set up, you can move on to the next crucial step: linking to your popup. This process will ensure that your carefully crafted popup appears seamlessly when visitors interact with your designated trigger element.

Create a Custom CSS Class

To start, you must create a unique CSS class for your link. This class will identify the elements that trigger your popup. Choose a descriptive name like popup-trigger or open-my-popup. For example:

.open-my-popup {
cursor: pointer;
}

This CSS identifies your trigger elements and changes the cursor to a pointer (indicating clickability).

Add the CSS Class to Your Link Element

Now, add this CSS class to the element you want to use as a trigger. This could be a button, text link, or image. In Elementor:

Select the element in the Elementor editor
Go to the Advanced tab in the element’s settings
Find the CSS Classes field
Enter your custom class name (without the dot)

Infographic: How to Create an Elementor Popup Link? - open elementor popup link

For a button, your settings might look like this:

Button text: Open Popup
CSS Classes: open-my-popup

Write the JavaScript Code

The final step involves writing JavaScript code to open your popup when clicking the trigger element. Add this code to your website (preferably in a custom JavaScript file or the Elementor Custom Code section).

Here’s a basic example:

document.addEventListener('DOMContentLoaded', function() {
var popupTriggers = document.getElementsByClassName('open-my-popup');
for (var i = 0; i &lt; popupTriggers.length; i++) {
popupTriggers[i].addEventListener('click', function(e) {
e.preventDefault();
elementorProFrontend.modules.popup.showPopup( { id: YOUR_POPUP_ID } );
});
}
});

Replace YOUR_POPUP_ID with the actual ID of your Elementor popup. You can find this ID in the Elementor editor or the popup’s URL in the WordPress admin area.

This code performs several actions:

It waits for the DOM to load fully before running
It finds all elements with your custom CSS class
It adds a click event listener to each of these elements
When clicked, it prevents the default action and opens your specified popup

It’s important to note that Elementor’s Popup needs to be registered and triggered. You may need to use the wp_footer hook to register your popup.

After implementing these steps, test your popup link thoroughly. Click the trigger element on different devices and browsers to ensure it works consistently. This testing phase helps identify and fix any issues before your popup goes live.

Optimize for User Experience

Consider the placement and design of your popup trigger. Make it visible and intuitive for users to find and interact with. Try to align the trigger’s appearance with your overall website design for a seamless user experience.

Final Thoughts

Creating an Elementor popup and linking it to a custom trigger element enhances user engagement on WordPress sites. This method controls the popup’s appearance, improving the overall user experience. Popups can boost conversions, capture leads, and deliver important messages to visitors when used effectively.

Infographic: How to Set Up Popup Triggers in Elementor?

To maximize the impact of your Elementor popups, keep content concise, use attractive visuals, and ensure a clear call to action. Timing plays a key role—trigger your popup at the right moment in the user’s journey for optimal results. Test your popups across different devices and browsers to ensure consistent functionality.

Pluginizer offers access to over 15,000 premium plugins and themes for WordPress sites seeking further enhancement. Implementing an open Elementor popup link strategy can significantly improve your WordPress site’s user engagement and conversion rates. With the right approach and tools, you can create popups that capture attention and provide value to your visitors.