If you’ve been looking for a way to trigger Elementor popups in the Native WordPress Menu regardless of the theme you’re using, this tutorial is for you.

After struggling to find a way to trigger an Elementor popup in WordPress without adding another plugin, I discovered 2 simple ways and decided to create this tutorial.

The first method is simply using an Elementor popup trigger URL and then using that link address as a custom link menu item address.

The second is using the inbuilt popup selector settings to create a CSS class.

Let’s dive deep in…

Here is a video tutorial

Method 1:

Trigger Elementor Popup in WordPress Native Menu With Custom URL

Note: You should have Elementor Pro installed and use the WordPress native menu in your header.

Step 1: Create a new test page OR just edit an existing page and add a Button element.

Step 2: Create your popup if you hadnt already, then set the popup display condition as Entire site.

Step 3: In the Button URL settings, click the Dynamic icon and from the list, select Popup.

Step 4: Click on the word “Popup” again so that it will allow you to choose which popup.

Step 5: Choose the popup you want to display.

Step 6: Save the page and view the page in the browser.

Step 7: Right-click on the button and click Copy Link Address.

Step 8: Paste this into a notepad  or Word document.

The end part of the URL will look something like this:

http://magareports.cloud/native/ #elementor-action%3Aaction%3Dpopup%3Aopen%20settings%3DeyJpZCI6IjU5IiwidG9nZ2xlIjpmYWxzZX0%3D

Step 9: Copy just the boldened part of the URL that you got including the # symbol…

Step 10: Go to your wordpress dashboard and navigate to Appearance > Menus and create a Custom Link for the menu item you want to create.

Simply paste this in the URL field, Save the menu and test the site.

Now this menu item will trigger and open that specific popup.

To Read: Elementor Landing Page – A Step by Step Guide

Method 2:

Trigger Elementor Popup in WordPress Native Menu With Open By Selector

Note: You should have Elementor Pro installed and using the WordPress native menu.

Step 1: Make sure your popup is already created.

Step 2: Go to popup Settings in the Elementor editor (located at the bottom left corner of the panel) > Advanced > Open by selector, give it a Class name like .nativefeedback

Save and close the popup settings.

Step 3: Navigate to the WP dashboard and go into Appearance > Menus > Screen options (located on the top right) check the “CSS Classes” option.

Step 4: Create a menu item using the custom URL option. Give it a name (Native pop) and in the URL sections, just use #.

Step 5: On the Native pop custom menu item (where we want to trigger our popup on click), add .nativefeedback to the CSS Classes

Step 6: Save and Update the menu. Then reload the homepage and test the popup.

Now this menu item added should trigger and open that specific popup.

To Read: Case Study: What is Site Structure and How To Get SiteLinks

In closing

Sometimes it takes a little effort to have the functionality you need in WordPress than just having to install a plugin for this or that.

At the end of the day, your site will be bloated with a lot of unnecessary code that you don’t need hence affecting your site’s performance in speed, security and user experience.

Hopefully, this tutorial brought you value and now you can create your Elementor popups and trigger them on click of any WordPress menu item without installing a plugin.

Note of thanks to Elyssa Manis (1) and Charles Saldarriaga (2) for your contributions.