Open Popup using an image.
1. Go to “Triggers”
2. Methods to be used
Use any of these methods:
2.1. Using a default Class:
To open the popup you need to add the following class (mpp-trigger-popup-123) to your button. 123 = Popup ID
1 2 3 | <a href="#" class="mpp-trigger-popup-123">Open popup</a> |
Tip: In some plugins or themes you will find the option “Class” or “CSS Classes” or “Button Class”, there you must enter the value: “mpp-trigger-popup-123” (without quotes).
2.2. Using a “href” attribute:
It is also possible to use the href attribute. 123 = Popup ID
1 2 3 | <a href="mpp-trigger-popup-123">Open popup</a> |
Tip: In some plugins or themes you will find the option “Button Link” or “Button URL” or “URL”, there you must enter the value: “mpp-trigger-popup-123” or “#mpp-trigger-popup-123” (without quotes).
2.3. Using a custom Class:
For this to work, you must add “your-custom-class” in the option of the previous image.
1 2 3 | <a href="#" class="your-custom-class">Open popup</a> |
Tip: In some plugins or themes you will find the option “Class” or “CSS Classes” or “Button Class”, there you must enter your class: “your-custom-class” (without quotes).
2.4. Elementor Page Builder:
In “Edit Button” > Advanced > CSS Classes add the class “mpp-trigger-popup-123” where 123 = Popup ID
Make sure that the popup is being added to the pages of your website where the button will be displayed.