Let’s go through the exact steps to create a popup in Popup Maker and connect it to an Elementor Image Widget to make sure it works properly. 🚀
✅ Step 1: Create a New Popup in Popup Maker
Go to WordPress Dashboard > Popup Maker > Add Popup.
Enter a Title (e.g., “Brochure Popup”).
In the Content Editor, add your brochure’s iframe code or any content you want in the popup:
html
Copy
Edit
<iframe src="https://your-nxtbook-url" width="100%" height="600px" style="border:none;"></iframe>
Scroll down to the “Popup Settings” panel at the bottom.
Click “Triggers” > Add New Trigger.
Select “Click Open” as the trigger type.
Click “Add” and Save the Popup.
🚀 Your popup is now created!
✅ Step 2: Get the Popup Trigger Class After saving the popup, go back to Popup Maker > All Popups. Find the popup you just created. Look for the CSS Classes section in the list—it should show something like: Copy Edit popmake-690 (Replace 690 with your actual Popup ID.) 🚀 This is the class we’ll apply to the Elementor Image Widget.
✅ Step 3: Link the Popup to an Image in Elementor Now, we’ll make the image trigger the popup when clicked.
1️⃣ Edit Your Page in Elementor Open your page in Elementor. Click on the Image Widget you want to use as a button. 2️⃣ Add the Popup Trigger Class Go to Advanced > CSS Classes. Enter the popup trigger class (without the dot .): sql Copy Edit pum-trigger-690 (Replace 690 with your actual popup ID.) 3️⃣ Set the Image Link to "#” (Important) Go to the “Content” Tab > Link Field.
Set the Link to:
bash Copy Edit
(This ensures the image remains clickable but doesn’t redirect elsewhere.)
Click “Update” and Test the Image Click.
🚀 Now, clicking the image should open the popup! 🎉
✅ Troubleshooting If It’s Not Working 1️⃣ Double-Check the Popup Class Make sure you are using pum-trigger-690, not popmake-690. CSS Class should be in Advanced > CSS Classes (NOT in ID field). 2️⃣ Verify the Popup Has a “Click Open” Trigger Go to Popup Maker > All Popups > Edit the Popup. Scroll down to Triggers and confirm it has “Click Open”. 3️⃣ Clear Any Caching Plugins If using WP Rocket, W3 Total Cache, or Cloudflare, clear your cache. 4️⃣ Force the Image to Open the Popup Using JavaScript If it’s still not working, use this backup method:
Click the Image Widget. Go to Content Tab > Link and enter: css Copy Edit javascript:PopupMaker.open(690); (Replace 690 with your actual popup ID.) 🚀 This forces the popup to open manually when clicked!
Final Summary ✔ Create the popup in Popup Maker & add a “Click Open” Trigger. ✔ Find the popup’s CSS class (e.g., popmake-690) but use pum-trigger-690. ✔ Apply pum-trigger-690 to the Image Widget’s CSS Class field. ✔ Set the Image Link to # so it remains clickable. ✔ If it still doesn’t work, use javascript:PopupMaker.open(690); in the link field.
🚀 This should work 100%! Let me know if it still doesn’t trigger, and I’ll troubleshoot further. 😊