How to Open an Elementor Popup from a Link URL or Menu Item

How to Open an Elementor Popup from a Link URL or Menu Item

Level up your game with the CSS Course for Elementor Users

Table of Contents

Learn how to find out that direct URL to your Elementor popup, and then be able to use it from within a text block, or from a navigation item.

You will also learn to open the Elementor popup on page load, when navigating to a page with a specific #anchor link in the URL.

Method 1 will show you how to open from within the same page, when clicking on a link.

Method 2 will show you how to open the popup when navigating to a specific URL like site.com/#open-popup

Method 1. Same Page Elementor Link That Opens Popup

To start with, add a button to your Elementor page

At first, go to your elementor page and add a "Button".

How to Open an Elementor Popup from a Link URL or Menu Item 1

Then, select 'Popup' under the link options

After adding the button, (1) go to the link section and click on the "Dynamic Tags" icon, and from there (2) select "Pop-up" from 'Actions'. (3) Then click on the Pop-up and select your template.

Choose the Open popup action.

How to Open an Elementor Popup from a Link URL or Menu Item 2

How to Open an Elementor Popup from a Link URL or Menu Item 3

Now, visit your page to copy the link to the Elementor popup

Now visit the page from the front end, then right-click on the 'Button' and "Copy the Link Address" after that, go to your computer's Notepad and paste the link.

How to Open an Elementor Popup from a Link URL or Menu Item 4How to Open an Elementor Popup from a Link URL or Menu Item 5

Add or edit your text element that will link to the popup

Now after copying the link from the button, go back to the elementor editor and "Add your Text".

How to Open an Elementor Popup from a Link URL or Menu Item 6

Add part of the previously copied link to your text element

After adding your text go back to your notepad and copy the link from the #, and paste it to the link option. See the screenshots below.

How to Open an Elementor Popup from a Link URL or Menu Item 7

How to Open an Elementor Popup from a Link URL or Menu Item 8

To add the Elementor popup as a menu item

Simply go under the WordPress Menu options.

There, add a custom link to your navigation menu, and enter the URL you got from above!

Method 1 conclusion: enjoy your Elementor popup link!

Finally you can validate that everything works by going to the page and clicking on your text or menu item!

Important: Your popup display conditions needs to match the pages you will have that link on! So if it's in your header navigation, for example, your popup should be set to 'Entire website'.

Method 2: Open an Elementor Popup When Visiting With a Specific URL

Add a HTML element on the page where you want the popup to open

Go on the page where you intend to send visitors to.

That's the page with a popup that will open on page load conditionally on the URL anchor.

Add an HTML element, then copy paste this code in it.

How to Open an Elementor Popup from a Link URL or Menu Item 9

<script> 
/* Please login to get the code 
 * The code will be for the How to Open an Elementor Popup from a Link URL or Menu Item tutorial 
 * Found at this URL https://element.how/elementor-popup-url-link/ 
 */ 
</script>

Edit the code to match your requirements

Now, adjust the popupID in the code to the actual ID of the popup you want to open.

You will find the ID in the URL when you are in the Elementor editor for that popup.

How to Open an Elementor Popup from a Link URL or Menu Item 10

Here the ID would be "29".

Now, enjoy your Elementor popup that opens on page load

You should now be able to visit site.com/#open-popup and have your popup open on page load!

If it's not working, check your popup display conditions to be certain they are set to show on your target page.

Conclusion

I hope you have enjoyed this tutorial.

Cheers!

Element.how also provides premium tutorials showing awesome advanced designs, check them out here.

Looking for something else? Search across 2701 Elements right here:

Checkout the Elementor Addon Finder directly

7 Responses

    1. Thanks for sharing Jivaneo! Yes indeed in many cases the article you linked to is a more simple option that will work just fine.

      In some cases though, you really want an actual link directly to the popup (say for example if you want to link to the page with the popup already opened), so in these cases you need the direct popup link...

      Cheers!

  1. Let's see if someone can help me.

    It turns out that I was using the url for the accordion text popups and they worked but it hasn't worked for a while now.

    I do not know what it could be. If I put it on a normal button, the popup opens.

    I can't find anything I can do...

Leave a Reply