Get My FREE WordPress Beginner Toolkit

I’ll send you my WordPress beginner toolkit and all that you need to know as you start your WordPress journey. Intermediate and advanced WordPress users have found this toolkit helpful too.

GTU WordPress Toolkit

How To Trigger Elementor Popups in the WordPress Native Menu (2 ways without installing another plugin)

Trigger-EL-popups-in-Wp-native-menu

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

custom url

Follow the steps bellow 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: Why I Switched To Hello Elementor Theme

 

Method 2: Trigger Elementor Popup in WordPress Native Menu With Open By Selector

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

 

Inclosing

Sometimes it takes some 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 that 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.

Also Read. . .

Reccomended

Blue Host is one of the oldest web hosts and the official “WordPress” recommended hosting provider.

Elementor is the #1 WordPress Page Builder with over 1,000,000+ active users and the one we use.

Kwehangana Hamza

cms-africa-kigali

I am a digital content designer and publisher working with a top digital agency in Kampala, Uganda. I started blogging out of my passion for learning & sharing.

Through this blog, I share tech and digital tips i’ve uncovered and hoping they be of great value to you.

Featured In

Wordcamp_Logo
OneYoungWorld_white
New York Mag

Get My FREE Toolkit for

WordPress Beginners

I’ll send you my WordPress beginner toolkit and all that you need to know as you start your WordPress journey.

Intermediate and advanced WordPress users have found this toolkit helpful too.

Get Toolkit

I respect your privacy. Your email will never be shared with anyone else.

Join My Weekly Newsletter

I send out my newsletter once a week. Not More. When you join, your email will never be shared with anyone else and I respect your privacy.