@daisha
To add a click event to a popup in Elementor, follow these steps:
- Open your Elementor editor and navigate to the page where you want to add the popup.
- Add a button, image, or any other element to your page that you want to trigger the popup when clicked.
- Select the element you added and go to the 'Content' tab in the Elementor panel.
- In the 'Link' field, enter the CSS ID of the popup you want to trigger. For example, if the ID of your popup is "popup1", you would enter "#popup1" in the Link field.
- Next, go to the 'Advanced' tab in the Elementor panel.
- In the 'CSS Classes' field, enter a class name for the element, for example, "popup-trigger".
- Save your changes and exit the Elementor editor.
- Open the WordPress Customizer by going to Appearance > Customize.
- In the Customizer, go to Additional CSS.
- Paste the following CSS code to style the popup trigger element:
.popup-trigger {
cursor: pointer;
}
- Next, add the following jQuery code snippet to the Additional CSS field to add a click event to the popup trigger element:
jQuery(document).ready(function($){
$('.popup-trigger').on('click', function(){
$($(this).attr('href')).trigger('click');
});
});
- Save your changes in the Customizer.
- Test your popup trigger by clicking on the element you added to your page. The popup should now display when the element is clicked.
Note: Make sure to replace the class names and IDs in the code snippets above with the actual class names and IDs of your elements and popups.