एलिमेंटर में मुफ्त में पॉपअप कैसे जोड़ें (कोई एलिमेंटर प्रो आवश्यक नहीं)

फ्री एलिमेंटर में पॉपअप बिल्डर शामिल नहीं है। पॉपअप बिल्डर एक एलिमेंट प्रो सुविधा है प्रो के लिए भुगतान किए बिना पॉपअप प्राप्त करने के लिए, मुफ्त स्थापित करें मास्टर एडॉन्स पॉपअप बिल्डरं, सामान्य एलिमेंट संपादक के अंदर पॉपअप डिजाइन करें, इसे पेज लोड पर खोलने के लिए सेट करें, और प्रकाशित करें वह पथ मुफ्त है, यह एलिमेंट के मुफ्त संस्करण पर काम करता है, और इसमें लगभग पांच मिनट लगते हैं।

यह गाइड एलिमेंटर 4.2।4 और मास्टर ऐडऑन 3.2 पर लिए गए स्क्रीनशॉट के साथ पूरी बात पर चलता है। इसमें अधिकांश ट्यूटोरियल द्वारा छोड़े गए भागों को भी शामिल किया गया है: कौन से ट्रिगर वास्तव में मुफ़्त हैं, जब पेज लक्ष्यीकरण एक प्रो सुविधा है, तो प्रत्येक पृष्ठ से पॉपअप कैसे रखें, और जावास्क्रिप्ट एपीआई जो प्रतिस्थापित करता है elementorProFrontend.modules.popup.showPopup जब आपके पास प्रो नहीं है।

क्या एलिमेंटर फ्री में पॉपअप बिल्डर है?

नहीं एलिमेंट प्रो के साथ एलिमेंट के अपने पॉपअप बिल्डर जहाजों केवल मुफ्त एलिमेंट स्थापित करें और मेनू में कहीं भी कोई पॉपअप आइटम नहीं है, और elementor/popup/show इवेंट पेज पर मौजूद नहीं है।

आपके पास तीन तरीके हैंः

मास्टर एडॉन्स यहां कवर किया गया विकल्प है क्योंकि पॉपअप उसी एलिमेंटर कैनवास में बनाया गया है जिसका आप पहले से उपयोग करते हैं, इसलिए सीखने के लिए कोई दूसरा संपादक नहीं है यह वर्डप्रेस डॉट ओआरजी पर चलने वाला एक मुफ्त प्लगइन है 30,000+ साइटेंऔर पॉपअप बिल्डर मुफ्त डाउनलोड के साथ आता है।

यदि आप पहले कई टूल की तुलना करना चाहते हैं, तो हम इसका एक अलग राउंडअप रखते हैं वर्डप्रेस के लिए सर्वश्रेष्ठ पॉपअप बिल्डर प्लगइन्स.

मुफ्त पॉपअप बिल्डर वास्तव में आपको क्या देता है

नीचे विभाजन प्लगइन में नियंत्रण द्वारा नियंत्रण की जाँच की गई थी, ताकि आप देख सकें कि निर्माण शुरू करने से पहले मुफ्त संस्करण कहाँ रुकता है।

तो मुफ्त संस्करण आपको वास्तविक डिजाइन नियंत्रण के साथ एक वास्तविक पॉपअप देता है यह आपको ट्रिगर विविधता और पृष्ठ-स्तरीय लक्ष्यीकरण नहीं देता है उन दोनों में वर्कअराउंड हैं, और दोनों नीचे कवर किए गए हैं।

एलिमेंटर में मुफ्त में पॉपअप कैसे जोड़ें, चरण दर चरण

चरण १: एलिमेंट और मास्टर एडॉन्स स्थापित करें

वर्डप्रेस डैशबोर्ड से पर जाएं प्लगइन्स → प्लगइन जोड़ें, के लिए खोज तत्वू ा, संस्थापित और सक्रिय कर। िफर खोज एलिमेंट के लिए मास्टर ऐडऑन और ऐसा ही करें एलिमेंटर प्रो की किसी भी बिंदु पर आवश्यकता नहीं है।

उस स्क्रीनशॉट में एलिमेंट प्रो लिंक प्राप्त करें सस्ता है कि यह मुफ्त बिल्ड है नीचे सब कुछ ठीक उसी सेटअप पर किया गया था पूर्ण स्थापित नोट्स में रहते हैं स्थापना डॉक्स.

चरण २: मास्टर ऐडऑन खोलें → पॉपअप बिल्डर

प्लगइन को सक्रिय करने से एक जुड़ जाता है मास्टर ऐडऑन वर्डप्रेस साइडबार में आइटम इसे खोलें और क्लिक करें पॉपअप बिल्डर.

यह सूची दिखने से अधिक उपयोगी है प्रत्येक पंक्ति पॉपअप की प्रदर्शन स्थिति को दिखाती है, चाहे वह सक्रिय या निष्क्रिय हो, और शॉर्टकोड जिसे आप इसे एक पृष्ठ पर छोड़ने के लिए उपयोग कर सकते हैं उस शॉर्टकोड कॉलम को ध्यान में रखें, यह बाद में मुफ्त पृष्ठ-लक्ष्यीकरण समस्या को हल करता है।

चरण ३: पॉपअप नाम दें और सक्रियण चालू करें

क्लिक करें नया पॉपअप जोड़ें। एक छोटा संवाद दो फ़ील्ड के साथ खुलता है।

इसे एक ऐसा नाम दें जिसे आप छह महीने में पहचान लेंगे, फिर मुड़ें सक्रियण चालू निष्क्रिय छोड़ दिया गया पॉपअप कभी भी सामने के छोर पर प्रस्तुत नहीं करता है, भले ही आप इसे प्रकाशित करें और भले ही आप इसे शॉर्टकोड द्वारा रखें यह एकमात्र सबसे आम कारण है कि एक समाप्त पॉपअप कुछ भी नहीं दिखाता है।

चरण ४: सेट करें जहां पॉपअप दिखाई देता है

पर स्विच करें शर्तों उसी संवाद में टैब करें।

मुफ्त संस्करण पर आपको एक नियम मिलता हैः शामिल करें → पूरी साइट। अन्य नियम (फ्रंट पेज, सिंगुलर, आर्काइव, सर्च, 404), एक्सक्लूड टाइप और ऐड कंडीशन बटन प्रो हैं। यदि आप केवल एक पेज पर पॉपअप चाहते हैं और आप स्वतंत्र रह रहे हैं, तो आगे बढ़ें शोर्ट विधि.

अब क्लिक करें एलिमेंट के साथ संपादित करें.

चरण ५: टेम्पलेट या खाली कैनवास से शुरू करें

संपादक एक खाली पॉपअप फ्रेम के साथ खुलता है ड्रॉप क्षेत्र में एलिमेंटर के स्वयं के ऐड बटन के बगल में एक बैंगनी मास्टर एडॉन्स बटन है पॉपअप टेम्पलेट लाइब्रेरी खोलने के लिए इसे क्लिक करें।

वहाँ २५ पॉपअप डिजाइन कर रहे हैं, उन सभी को मुक्त प्लगइन पर उपलब्ध है, बिक्री को कवर, उत्पाद की शुरूआत, मौसमी प्रस्तावों, जल्द ही आ रहा है और पृष्ठों के बारे में एक कार्ड होवर और क्लिक करें सम्मिलित करें इसे आयात करने के लिए। सब कुछ सामान्य एलिमेंटर तत्वों के रूप में आयात होता है, ताकि आप टेक्स्ट को फिर से लिख सकें और रंगों को तुरंत बदल सकें।

एक ही पुस्तकालय विचार प्लगइन भर में चलाता है यदि आप तैयार किए गए पृष्ठों और वर्गों को भी चाहते हैं, तो यह है मास्टर ऐडऑन टेम्पलेट लाइब्रेरी.

चरण ६: पॉपअप डिजाइन करें

अपना खुद का निर्माण करना पसंद करते हैं कैनवास पर विजेट खींचें जिस तरह से आप किसी भी पृष्ठ पर हेडिंग, टेक्स्ट एडिटर और बटन एक विशिष्ट ऑप्ट-इन को कवर करते हैं।

यहां कुछ चीजें करने लायक हैंः

• एक वादे पर कॉपी रखें एक शीर्षक, समर्थन पाठ की एक पंक्ति, एक बटन।
• शीर्ष पर डिवाइस आइकन के साथ टैबलेट और मोबाइल दृश्यों की जांच करें एक ६४० पीएक्स पॉपअप लैपटॉप पर ठीक है और एक फोन पर तंग है।
• ईमेल कैप्चर के लिए, आप जो भी फॉर्म प्लगइन पहले से चला रहे हैं, उसमें से एक फॉर्म विजेट में ड्रॉप करें संपर्क करें फॉर्म ७ और एमसी ४ डब्ल्यूपी दोनों पॉपअप के अंदर काम करते हैं।
• सभी 80+ मास्टर ऐडऑन विजेट पॉपअप के अंदर भी उपलब्ध हैं, इसलिए उलटी गिनती टाइमर और मूल्य निर्धारण तालिकाएं एक पृष्ठ पर समान काम करती हैं।

चरण ७: ट्रिगर चुनें

क्लिक करें एमए पॉपअप सेटिंग्स शीर्ष टूलबार में यह बाईं ओर से चौथा आइकन है, जो गियर के साथ एक दस्तावेज की तरह दिखता है पुराने ट्यूटोरियल नीचे-बाएं कोने में एक गियर पर इंगित करते हैं, जो कि एलिमेंट ४ से पहले रहते थे।

सात ट्रिगर सूचीबद्ध हैं। पेज लोड पर मुक्त है, और पेज लोड के बाद देरी (सेकंड) ०.१ के चरणों में ० से ६० तक कुछ भी स्वीकार करता है दो से तीन सेकंड एक समझदार शुरुआती बिंदु है फायरिंग तुरंत धीमी कनेक्शन पर लोगों को परेशान करती है, और दस सेकंड से अधिक कुछ भी आमतौर पर आगंतुक को पूरी तरह से याद करता है।

इसके नीचे, फिर से देरी दिखाएँ पॉपअप को फिर से बंद करने वाले किसी व्यक्ति को दिखाने से पहले कितनी देर तक इंतजार करना है, इसे नियंत्रित करता है नि: शुल्क आपको कोई देरी नहीं देता है, १, ३ और ५ मिनट प्रो इसे घंटों, दिनों, एक महीने तक बढ़ाता है, और फिर से नहीं दिखाता है।

पृष्ठ स्क्रॉल अक्षम करें मुफ़्त है और हाँ में डिफ़ॉल्ट है, जो पॉपअप के पीछे पृष्ठ को लॉक कर देता है।

चरण ८: लेआउट, स्थिति और एनीमेशन सेट करें

को खोलें लेआउट एक ही पैनल में अनुभाग यह सब मुफ्त है।

के रूप में प्रदर्शित करें पॉपअप को तीन आकृतियों के बीच स्विच करता हैः

• पॉपअप मोडल: पॉपअप से अधिकांश लोगों का तात्पर्य केन्द्रित बॉक्स से है।
• अधिसूचना बार: पृष्ठ के शीर्ष पर पिन की गई एक पट्टी, घोषणाओं और शिपिंग ऑफ़र के लिए अच्छी है।
• पूर्ण स्क्रीन: व्यूपोर्ट पर कब्ज़ा कर लेता है, जो एकल मजबूत ऑफर के लिए सर्वोत्तम है।

मोडल लेआउट को फिर नौ स्थान मिलते हैं, केंद्र केंद्र से नीचे दाईं ओर, और लगभग ७० प्रवेश एनिमेशन ४०० मीटर पर फीका सुरक्षित डिफ़ॉल्ट है पॉपअप सेटिंग्स संदर्भ यदि आप पूरा नक्शा चाहते हैं तो प्रत्येक नियंत्रण को सूचीबद्ध करता है।

चरण ९: इसे सामने के छोर पर प्रकाशित और परीक्षण करें

हिट प्रकाशित करें, फिर अपनी साइट को एक निजी विंडो में खोलें यहां पेज लोड के दो सेकंड बाद पॉपअप फायरिंग है, केवल मुफ्त मास्टर एडॉन्स प्लगइन सक्रिय के साथ मुफ्त एलिमेंटर पर।

संपादक पूर्वावलोकन के बजाय एक निजी विंडो में परीक्षण करें संपादक जानबूझकर पॉपअप को दबाता है, और एक सामान्य ब्राउज़र टैब आपको कैश्ड पेज की सेवा दे सकता है।

केवल एक पृष्ठ पर एक पॉपअप दिखाएं, मुफ्त में

पृष्ठ-स्तरीय प्रदर्शन की स्थिति प्रो है शॉर्टकोड मुफ़्त है, और यह दूसरी दिशा से उसी परिणाम तक पहुंचता है।

पॉपअप बिल्डर सूची में प्रत्येक पॉपअप में एक शॉर्टकोड होता है जैसे ॰ एलिमेंटर में इसे एक पेज, एक पोस्ट, एक विजेट क्षेत्र या एक शॉर्टकोड विजेट में पेस्ट करें, और वह पॉपअप अकेले उस पेज पर लोड होता है इस तरह से रखने से डिस्प्ले की स्थिति पूरी तरह से छूट जाती है।

जानने के लिए दो नियमः

• पॉपअप प्रकाशित किया जाना चाहिए और इसके सक्रियण टॉगल चालू होना चाहिए एक निष्क्रिय पॉपअप कुछ भी नहीं, शॉर्टकोड या नहीं प्रस्तुत करता है।
• शॉर्टकोड कोई दृश्यमान मार्कअप आउटपुट नहीं करता है जहां आप इसे पेस्ट करते हैं पॉपअप पाद लेख में मुद्रित होता है और इसके ट्रिगर के अनुसार खुलता है।

तो एक मुफ़्त, पृष्ठ-विशिष्ट पॉपअप इस तरह दिखता है: पूरी साइट पर स्थिति छोड़ दें और शॉर्टकोड को उस पृष्ठ पर छोड़ दें जिसमें यह होना चाहिए।

सात पॉपअप ट्रिगर, और जो आपको मुफ्त मिलते हैं

निकास आशय प्रकृति द्वारा केवल डेस्कटॉप है फोन में विंडो छोड़ने के लिए कोई कर्सर नहीं है, इसलिए ट्रिगर का पता लगाने के लिए कुछ भी नहीं है बग दाखिल करने से पहले डेस्कटॉप ब्राउज़र पर इसका परीक्षण करें।

फ्री ऑन पेज लोड ट्रिगर का अपना है सेटअप डॉक यदि आप लघु संस्करण चाहते हैं।

बटन क्लिक पर एलिमेंटर पॉपअप को कैसे ट्रिगर करें

यह पृष्ठ लोड के बाद सबसे अधिक अनुरोध किया गया ट्रिगर है, और यह एक ऐसा व्यक्ति है जो अक्सर जावास्क्रिप्ट के साथ नकली करने की कोशिश करता है मास्टर एडॉन्स प्रो के साथ यह एक पाठ क्षेत्र है।

1. हमेशा की तरह पॉपअप को डिज़ाइन करें और सहेजें।
2. में एमए पॉपअप सेटिंग्स, सेट पॉपअप खोलें को पर क्लिक.
3. में चयनकर्ता द्वारा खोलेंउदाहरण के लिए, बिंदु सहित चयनकर्ता टाइप करें .open-newsletter-popup.
4. उस बटन को संपादित करें जिसे इसे खोलना चाहिए पर जाएं उन्नत → सीएसएस कक्षाएं और प्रकार open-newsletter-popup, इस बार बिना द डॉट।
5. दोनों को अपडेट करें, फिर सामने के छोर पर परीक्षण करें।

चरण ३ और ४ में डॉट बेमेल अधिकांश का कारण बनता है “my क्लिक ट्रिगर कुछ नहीं करता है” रिपोर्ट हम देखते हैं ट्रिगर फ़ील्ड एक सीएसएस चयनकर्ता लेता है, एलिमेंटर फ़ील्ड एक वर्ग का नाम लेता है।

चयनकर्ता बटन तक सीमित नहीं है कोई भी तत्व जिसे आप कार्यों के लिए एक वर्ग दे सकते हैं: एक कंटेनर, एक शीर्षक, एक आइकन, एक छवि आप एक विशेषता चयनकर्ता जैसे मौजूदा लिंक को भी लक्षित कर सकते हैं a[href="#pricing-popup"]एक संबंधित है पॉपअप ट्रिगर विजेट पॉपअप के अंदर ही क्रियाओं को बंद करने और पुनर्निर्देशित करने के लिए।

प्रो के बिना, जावास्क्रिप्ट की चार लाइनें एक ही काम करती हैं वह कोड अगले भाग में है।

एलिमेंटर/पॉपअप/शो इवेंट, और प्रो के बिना इसे क्या प्रतिस्थापित करता है

elementorProFrontend.modules.popup.showPopup और द elementor/popup/show इवेंट दोनों एलिमेंटर प्रो से संबंधित हैं। पॉपअप मॉड्यूल स्वयं को पंजीकृत करता है elementorProFrontend ऑब्जेक्ट, तो एक मुफ्त स्थापित पर वह ऑब्जेक्ट अपरिभाषित है और घटना कभी भी आग नहीं लगती है कोई स्निपेट इसे वापस नहीं लाता है, क्योंकि कोड जो इसे उत्सर्जित करेगा वह प्रो प्लगइन में है।

मुफ्त मास्टर एडॉन्स प्लगइन अपने स्वयं के एपीआई को शिप करता है जो उसी जमीन को कवर करता है।

मास्टर एडॉन्स एक वैश्विक नाम को उजागर करता है JltmaPopups किसी भी पृष्ठ पर जहां एक पॉपअप मौजूद है यहां मैपिंग हैः

प्रत्येक पॉपअप DOM आईडी के साथ मुद्रित होता है jltma-popup-id-<post ID>पोस्ट आईडी पॉपअप बिल्डर सूची स्क्रीन पर शॉर्टकोड में संख्या है अपने स्वयं के कोड से पॉपअप ४४१ खोलने के लिएः

jQuery(function ($) {
  var $popup   = $('#jltma-popup-id-441');
  var settings = JltmaPopups.getLocalStorage(441);

  JltmaPopups.openPopup($popup, settings);
});

उसे एक क्लिक पर तार करने के लिए, जो ऑन क्लिक ट्रिगर के लिए मुफ्त स्टैंड-इन हैः

jQuery(function ($) {
  $(document).on('click', '.open-newsletter-popup', function (e) {
    e.preventDefault();

    var $popup   = $('#jltma-popup-id-441');
    var settings = JltmaPopups.getLocalStorage(441);

    JltmaPopups.openPopup($popup, settings);
  });
});

और इसे फिर से बंद करने के लिएः

JltmaPopups.closePopup(jQuery('#jltma-popup-id-441'));

देखने के लिए तीन चीजेंः

• getLocalStorage() रिटर्न false जब तक पॉपअप पेज पर प्रारंभ नहीं हो जाता, जो DOM रेडी पर होता है। अपना कोड अंदर चलाएँ jQuery(function ($) { ... }) और तुम ठीक हो।
• पॉपअप को इस में से किसी के काम करने के लिए पृष्ठ पर होना चाहिए या तो इसकी स्थिति में पृष्ठ शामिल है, या आपने इसे शॉर्टकोड के साथ रखा है।
• स्क्रिप्ट को जानबूझकर एलिमेंटर संपादक के अंदर छोड़ दिया जाता है, इसलिए सामने के छोर पर परीक्षण करें।

क्यों एलिमेंटर/पॉपअप/दो बार आग दिखाता है

एलिमेंटर प्रो पर, हैंडलर के दो बार चलने का मतलब लगभग हमेशा यह होता है कि वह दो बार बंधा है: एक बार चालू elementor/frontend/init और फिर से एक स्निपेट या थीम फ़ाइल में, या एक बार प्रति पॉपअप उदाहरण जब कई मौजूद हैं इसे एक ध्वज के साथ गार्ड करें, या इसके साथ बांधें .off('elementor/popup/show').on(...) रिबाइंडिंग से पहले एलिमेंटर का अपना पॉपअप ईवेंट दस्तावेज़ीकरण पूर्ण ईवेंट हस्ताक्षर सूचीबद्ध करता है।

मास्टर एडॉन्स समतुल्य में डबल-बाइंड करने के लिए कोई दस्तावेज़ ईवेंट नहीं है, इसलिए समस्या आगे नहीं बढ़ती है आप कॉल करते हैं openPopup() सीधे इस समय आप पॉपअप खोलना चाहते हैं।

आपका एलिमेंटर पॉपअप क्यों नहीं दिखा रहा है

मोटे क्रम में कि प्रत्येक कितनी बार कारण बनता हैः

1. सक्रियण बंद है. मास्टर एडॉन्स खोलें → पॉपअप बिल्डर और स्थिति कॉलम की जांच करें निष्क्रिय का मतलब है कि कहीं भी कुछ भी नहीं रेंडर करता है, शॉर्टकोड शामिल है।
2. पॉपअप अभी भी एक मसौदा है। एलिमेंटर में डिज़ाइन सहेजना पॉपअप प्रकाशित करने के समान नहीं है।
3. आप संपादक पूर्वावलोकन में परीक्षण कर रहे हैं। पॉपअप को डिज़ाइन द्वारा वहां दबा दिया जाता है एक निजी विंडो का उपयोग करें।
4. कैश। कैशिंग प्लगइन और सीडीएन को शुद्ध करें, फिर एक निजी विंडो में पुनः लोड करें एक कैश किए गए एचटीएमएल पृष्ठ में एक नया प्रकाशित पॉपअप नहीं होगा।
5. शो अगेन डिले पहले ही निकाल दिया गया है। एक बार जब आप पॉपअप बंद कर देते हैं, तो प्लगइन ब्राउज़र स्टोरेज में टाइमस्टैम्प स्टोर करता है बार-बार परीक्षण करते समय साइट डेटा साफ़ करें या ब्राउज़र स्विच करें।
6. एक क्लिक चयनकर्ता पर डॉट बेमेल। ट्रिगर फ़ील्ड चाहता है .my-class, एलिमेंटर सीएसएस क्लासेस फ़ील्ड चाहता है my-class.
7. एक फोन पर बाहर निकलें इरादा। कोई कर्सर नहीं है, इसलिए कुछ भी आग नहीं है केवल डेस्कटॉप।

मास्टर एडॉन्स बनाम एलिमेंटर प्रो पॉपअप

यदि पॉपअप एकमात्र प्रो सुविधा है जो आप चाहते हैं, तो मुफ्त मास्टर एडॉन्स बिल्डर प्लस एक शॉर्टकोड इसे कवर करता है यदि आप जावास्क्रिप्ट लिखने के बिना निकास इरादा या क्लिक ट्रिगर चाहते हैं, तो तुलना करें मास्टर ऐडऑन मूल्य निर्धारण एलिमेंटर प्रो नवीनीकरण के विरुद्ध, चूंकि मास्टर एडॉन्स लाइसेंस भी लाता है थीम बिल्डर और विजेट बिल्डर इसके साथ।

अक्सर पूछे जाने वाले प्रश्न

संबंधित पढ़ने

• मास्टर एडॉन्स पॉपअप बिल्डर, सूचीबद्ध प्रत्येक सेटिंग वाला फीचर पेज
• वर्डप्रेस के लिए सर्वश्रेष्ठ पॉपअप बिल्डर प्लगइन्स, यदि आप टूल की तुलना करना चाहते हैं
• पॉपअप सेटिंग्स और विकल्प, पूर्ण नियंत्रण संदर्भ
• वर्डप्रेस.ओआरजी पर मास्टर ऐडऑन, डाउनलोड और समर्थन मंच