How to link to an Elementor pop-up using an anchor link
Today I found myself looking how to open a a pop-up, built with Elementor, using an anchor link and thought I’d share the trick with anyone interested.
Step by step instructions
Create your popup first. Let it be anything. For this particular web development client, I was setting up a modal with a contact form.
Publish — or update — the popup you have created. Upon publishing, the page builder asks you which conditions, triggers and advanced rules you would like to let the popup be shown.
You only need to select a condition, which is to include the popup on the entire site. For my method to work, you needn’t control any other setting at all, which means you can skip the triggers and advanced rules screen by clicking Next and Save and Close.
Even if you’re planning on triggering the pop-up on specific specific pages only, opting for the inclusion of the popup site-wide is the easiest method.
Next, go to the global popup settings by clicking the gear icon on the bottom left of the page. The settings window will open.
Open the Advanced tab.
Configure the following settings to your liking. I’ve enabled the Disable Page Scrolling option, as well as the Avoid Multiple Popups option.
Think of the anchor link you would like to enable on your entire website. In my particular case, I decided to go with #contact . To remind you: this means that regardless on which page the visitor is at, if #contact gets added to the current URL, the popup will show.
Example: add a button — or any widget with a link element to it — and let the link be
#contactfor the popup to open on clicking the button.
Edit the Open By Selector field and let it be a[href="#contact"], in which #contact is my anchor link.
Well done! Now you can link from anywhere on any page on your website and the modal/popup will open.
