Been looking for a way to trigger Elementor popups in the Native WordPress Menu regardless of the theme you’re using.

Well, this is the tutorial you’re looking. After having struggled to find away to trigger an elementor popup in the WordPress native menu without adding another plugin, i decided to create this tutorial upon discovering 2 simple working ways. (no coding)

The first method is simply using an elementor popup trigger url that’s generated upon assigning an elementor button to that popup and then we use that link address as our custom link menu item address.

Then, our popup will display. The second method simply using the inbuilt popup selector settings which helps us create a css class that we later have to enable and use in the WordPress menu item css class option upon adding a custom menu item in the WordPress menu.

Let’s dive deep in…

Here is a video tutorial

How to trigger Elementor Popups in WordPress Native Menu without adding a plugin. However, if you want with read further, simply skip to the next section.

Method 1:

Trigger Elementor Popup in WordPress Native Menu With Custom URL

Follow the steps below to create this kind of Popup.

Please note that you should have Elementor Pro installed and using 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 (later you can just delete this page with the button, since we only need it for a moment).

Step 2: Make sure your popup is already created.

Step 3: Set the popup display condition as Entire site.

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

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

Step 6: Choose the popup you want to display.

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

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

Step 9: Paste this into a notepad  or word document (somewhere to just paste this easily).

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

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

Copy just that part (bolded) of the URL that you got including the # symbol…

Step 11: Now go into Appearances > 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

Please note that 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 > popup settings (located at the bottom left corner of the panel) > advanced > in the “Open by selector” field give it a class name like .nativefeedback  (save and close popup settings editor)

Step 3: Then navigate to WP dashboard and go into appearance>menu> Screen options (located on the top right) check “CSS Classes”

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 go and 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 really 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 alot of unnecessary code that you don’t need hence also affecting your site’s performance in speed, security and user experience.

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

Let me know if there is any questions to this and if you watched the video, please do visit my youtube channel where i publish and share more other videos and tutorial like these.

Thank you and talk soon

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