Texte traduit: 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!
Texte traduit: Creating Elementor Popup in WordPress Websites
Texte traduit: First, go to your dashboard and then create an Elementor popup. If you don’t know how to do that, check our post on ‘Texte traduit: How to Build a Popup in Elementor ProTexte traduit: ‘. 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.
Texte traduit: Adding Selector and Condition from Popup Settings
Texte traduit: 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.
Texte traduit: 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.
Texte traduit: Adding the Class or ID in a Text, in a WordPress Menu Item, or in a Button
Texte traduit: 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.
Texte traduit: 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 .).
Texte traduit: 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!