WPDesigns Site Logo
,

How to Add a Popup from a Button, Text or Menu Link using the selector in Elementor

Share This Post

Adding a popup to your website is a great way to increase conversions audience engagement and site stickiness. In this blog post, we will show you how to add a popup from a button, text or menu link using the selector in Elementor Pro. This is a very powerful feature that allows you to create an Elementor popup that is specific to each page on your website. Let’s get started!

Table of Contents

Elementor Popup in WordPress

Creating Elementor Popup in WordPress Websites

First, go to your dashboard and then create an Elementor popup. If you don’t know how to do that, check our post on ‘How to Build a Popup in Elementor Pro‘. If necessary, you can also use an Elementor prebuilt popup template. After you’ve created the popup, you’ll need to work with the condition and advanced settings.

Adding Selector and Condition from Popup Settings

So before we go for condition set up to trigger a popup, we will add our selector first. So to do that, go to the popup settings and then advance. Here you will find the Open by Selector field. Now you have to add the selector here. If you want to open using ID just use (#) before the name of an ID, and if you’re going to open using a custom class, use (.) before the class name, for example (#popup, .popup). By doing this, our popup will be triggered whenever the element with the corresponding id or class is clicked on the page. This is a very convenient way to open a popup as it doesn’t require any complex coding. You can also use multiple selectors to trigger the same popup.

Now let’s move on to the condition setup. Go to the popup settings and then conditions. Now add the condition to the Entire Site. After adding the condition for Entire Website now click on Save Changes and Publish it.

How Do I Know If My WordPress Site Has Been Hacked? And What to Do About It
Bad Links Added to Your Website
How Do I Know If My WordPress Site Has Been Hacked? And What to Do About It
The Site is Hacked

Adding the Class or ID in a Text, in a WordPress Menu Item, or in a Button

To add the popup from a menu item, go to Dashboard => Appearance => Menus and simply create a custom link, give it a name, and then type (#) in the link address field. After that, you have to add class to individual menu items. To do so, go to the top of the screen and open the screen options. Then check the CSS Classes option. Now add the class name you added in the popup with a dot. Then save your changes and reload the page. The popup will now appear when you click on the menu item.

Now if you want to open the popup from any text link or button on the page, you first have to add the text or button to the page. Then type (#) in the link field. Then open the advanced tab and add the class name or ID name you used in the popup without (# or .).

That’s it! Now, You know how to add a popup from a button, text or menu item link using the selector in Elementor. We hope you find this useful!

Search
Social Media
Recent Posts
5 Web Design Trends for 2022
5 Web Design Trends for 2022

The creative world of web design has always been the designer’s wonderland that combines various disciplines, including visual design, psychology, and wordcraft. As technology progresses

Read More »
Contact
Want us to get Creative?

We would love to hear from you!

Josh Cut Out

Josh

Typically replies in minutes

Hi there,

Feel free to message me if you have any questions.