On-Click Button Open Popup in WordPress | CodePress Academy | Use Elemen...

On-Click Button Open Popup in WordPress using Elementor Pro — Step-by-Step (3.5 min)

By Sanjay Kumar Verma — CodePress Academy • YouTube Tutorial

इस short tutorial में मैं आपको दिखाऊँगा कि Elementor Pro में कैसे आप एक button पर click करने पर popup खोल सकते हैं — बिना किसी additional plugin के। वीडियो embedded नीचे दिया गया है — tutorial approx 3.5 मिनट का है और हर step practical है।

Watch on YouTube (3.5 min)

क्या सीखेंगे (Quick Overview)

• Elementor में Popup कैसे create करते हैं (Templates → Popups)
• Popup को design और publish करना
• Button पर Dynamic Tags → Popup → Open Popup लगाना
• Popup का live test और mobile responsiveness चेक करना

Step-by-Step Guide (हिंदी में)

1) Popup बनाना (Templates → Popups)

WordPress Dashboard → Templates → Popups → Add New पर जाएँ। नया popup create करें और Elementor editor में design करें — heading, form (यदि चाहिए), close icon इत्यादि डालें।

2) Popup को Publish करना

Design complete करने के बाद Publish पर क्लिक करें। Display Conditions चुनें (Entire Site या specific pages) — लेकिन ध्यान रहे, trigger सेट करने की ज़रूरत नहीं जब आप button से open करना चाहते हैं।

3) Button पर Popup Attach करना (Dynamic Tags)

Popup ready है — अब उस page को Elementor में open करें जहाँ button है। Button widget select करें → Link field के सामने जो Dynamic Tags icon है, उस पर क्लिक करें → Popup → Open Popup चुनें → अपना popup select करें।

Button > Link > Dynamic Tags (⚙️) > Popup > Open Popup > Choose Popup Name

4) Live Test और Responsive Check

Page Save/Update करें और Preview पर जाकर button पर click करें — popup open होना चाहिए। Mobile preview mode में भी check करें, popup size और position adjust करें ताकि mobile पर अच्छा दिखे।

Tip: यदि popup form में form widget use किया है, तो submission के बाद success message configure करें और anti-spam (reCAPTCHA) लगाना ना भूलें।

Design Tips (Professional Look)

• Popup में border-radius और subtle shadow दें (modern look के लिए)
• Overlay color rgba(0,0,0,0.6) रखें ताकि background subtle hide हो
• Entrance animation हल्का रखें (Fade In / Slide In)
• Close icon और ESC key पर close की सुविधा दें

Common Problems & Fixes

Popup नहीं खुल रहा?

• Check कि popup को Publish किया गया है
• Ensure कि आपने सही popup नाम select किया है
• Cache plugin active है तो page cache clear करें

Form submission नहीं हो रही?

• Form actions (Email/Redirect) check करें
• reCAPTCHA settings verify करें
• SMTP configured न हो तो email deliverability में issue आ सकता है

Why Use On-Click Popups?

On-Click popups user experience बेहतर करते हैं क्योंकि वे interrupt नहीं करते — user voluntary click करके popup देखते हैं। ये lead capture, newsletter signup और special offers के लिए बेस्ट हैं।

Resources & Support

• YouTube Channel: CodePress Academy
• Web Development: codepressacademy.in
• Free Tools: onlinefreeconverters.com
• WhatsApp Support: +91 7738173460 (Text only)

Conclusion

Elementor Pro का Dynamic Tags feature बहुत powerful है — एक simple button click से popup open कराना एक professional touch देता है और conversions बढ़ाता है। ऊपर दिए steps follow करें और खुद test करके देखें।

अगर आप चाहते हैं, मैं इस पोस्ट का HTML + FAQ schema version तुरंत दे सकता हूँ (publish-ready) — ताकि आप copy-paste करके turant publish कर सकें और Search Console से index request भेज सकें।

---

Related Tutorials

• Elementor Border Radius Tips
• Instant Indexing with Google Search Console

---

Author: Sanjay Kumar Verma — Founder, CodePress Academy