2 Ways To Trigger Elementor Popup in the WordPress Native Menu (without installing another plugin)

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

trigger elementor popup 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

trigger elementor popup using the 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.

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 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.

Also Read. . .

How To Delete A Facebook Group in 2024?

Facebook allows for group interactions through its Facebook groups feature.  Facebook groups are created for specific reasons and attract like-minded people.  At some point, however, you may need to get rid of the group for

Read More »
Newsletter Subscription (EF)
Picture of Hamza
Hamza
Hamza comes from a design background with over 10years of experience in Web and Media design. He enjoys making web design videos on his YouTube channel GoTechUG. He also writes web design articles on this website. In his free time, Hamza loves riding a bicycle, swimming or going hiking.

1 thought on “2 Ways To Trigger Elementor Popup in the WordPress Native Menu (without installing another plugin)”

Leave a Comment

Your email address will not be published. Required fields are marked *

Search

Recommended Tools

Hostinger offers premium WordPress hosting for small and medium size websites at an affordable price rated 4.5/5 on Trustpilot

Elementor is the WordPress most popular page builder with over 10 million active users