WooCommerce में एलिमेंटर पॉपअप बनाएं

हम सभी WooCommerce के बहुत बड़े प्रशंसक हैं। इसे स्थापित करना और अनुकूलित करना आसान है। ऐसी सुविधाएँ जो एक गतिशील और शक्तिशाली ई-कॉमर्स स्टोर बनाना और प्रबंधित करना आसान बनाती हैं, पैकेज में शामिल हैं।

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

• पॉपअप विंडो का कॉन्फ़िगरेशन
• आप एलिमेंटर में विज़ुअल बिल्डर का उपयोग करके पॉपअप भी बना सकते हैं
• प्राथमिकताएँ प्रकाशित करें

हालाँकि जब आप अपनी साइट बनाते हैं तो WooCommerce आपके लिए शॉपिंग कार्ट और चेकआउट पेज बनाता है, एलिमेंटर उन्हें कस्टमाइज़ करके अधिक आकर्षक बनाता है।

आपके पास या तो उन्हें फिर से डिज़ाइन करने या शुरुआत से शुरू करने का विकल्प है। आप अपनी वेबसाइट के अन्य सभी पेजों के लिए इस प्रक्रिया को दोहरा सकते हैं।

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

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

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

 पॉपअप बनाने के लिए, मेनू बार में टेम्प्लेट > पॉपअप पर जाएं। आपको अपने सभी पॉपअप की एक सूची प्रस्तुत की जाएगी, और यदि आपने अभी तक एक भी नहीं बनाया है, तो आपको निम्नलिखित जैसा कुछ दिखाई देगा:

एक बार जब आप नया पॉपअप जोड़ें (जो काफी आत्म-व्याख्यात्मक है) पर क्लिक करते हैं, तो आपसे इसे एक नाम देने के लिए कहा जाएगा और फिर प्रदर्शित पूर्व- amp से एक टेम्पलेट का चयन करें। अनेक उद्देश्यों के लिए विभिन्न टेम्पलेट उपलब्ध हैं; कुछ घोषणाओं के लिए उपयुक्त हैं, अन्य छूट को बढ़ावा देने के लिए, अन्य उपयोगकर्ताओं को किसी चीज़ के लिए साइन अप करने के लिए प्रोत्साहित करने के लिए आदर्श हैं। कुकी उपयोग या अन्य जीडीपीआर सूचनाओं के बारे में उपयोगकर्ताओं को चेतावनी देने के लिए पूर्व amp लेस भी हैं। जैसे ही आपको अपनी पसंद की कोई चीज़ मिल जाए, बड़ा पूर्वावलोकन देखने के लिए उस पर क्लिक करें और फिर सम्मिलित करें बटन दबाएँ।

इस बटन पर क्लिक करने के बाद आपको वर्डप्रेस बैकएंड में पॉपअप बिल्डर पर ले जाया जाएगा।

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

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

पॉपअप विंडो का कॉन्फ़िगरेशन

 यह तब है जब आपको अपने पॉपअप का पूर्वावलोकन देखना चाहिए - या तो एक खाली स्लेट या आपके द्वारा चुना गया टेम्पलेट।

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

• यह वह जगह है जहां आप सबसे अधिक समय बिताना चाहेंगे क्योंकि यह वह जगह है जहां आप विभिन्न प्रकार के पॉपअप बनाने में सक्षम होंगे। दूसरे शब्दों में, इन सेटिंग्स को समायोजित करके, आप निम्नलिखित प्रभाव डालने में सक्षम होंगे:

• मोडल पॉपअप एक प्रकार की मोडल विंडो हैं।
• स्लाइड-इन, अधिसूचना बार, इत्यादि।

इसके अलावा, आप कई अन्य महत्वपूर्ण सेटिंग्स को कस्टमाइज़ कर सकते हैं।

निम्नलिखित विकल्प सेटिंग टैब पर उपलब्ध हैं:

• छवि की ऊंचाई और चौड़ाई बदलें.
• ऑब्जेक्ट का ऊर्ध्वाधर या क्षैतिज अभिविन्यास बदलें ( amp के लिए, आप अधिसूचना बार बनाने के लिए इसे ऊपर या नीचे ठीक कर सकते हैं)
• ओवरले का उपयोग करना है या नहीं, इस पर निर्णय लें ( amp के लिए, यह आपको पॉपअप सक्रिय होने पर पृष्ठभूमि को ग्रे करने की सुविधा देता है)
• अपने ब्राउज़र पर बंद करें बटन अक्षम करें.
• प्रवेश द्वार के लिए एक एनीमेशन शामिल करें।

स्टाइल पर निम्नलिखित कार्य कर सकते हैं :

• आप पृष्ठभूमि का रंग बदल सकते हैं, उसे ग्रेडिएंट बना सकते हैं, या पृष्ठभूमि के रूप में किसी छवि का उपयोग कर सकते हैं।
• यदि ओवरले सक्षम है, तो इसे कॉन्फ़िगर करें।
• यदि आपके पास बंद करें बटन सक्षम है, तो आपको इसे कॉन्फ़िगर करना होगा।

अंत में, उन्नत टैब में कुछ विविध आयात सेटिंग्स शामिल हैं जो आपको निम्नलिखित कार्य करने की अनुमति देती हैं:

• बंद करें बटन प्रदर्शित करें या एक निश्चित समय के बाद पॉपअप को स्वचालित रूप से बंद कर दें।
• ओवरले पर क्लिक करके या एस्केप कुंजी दबाकर, आप विंडो को बंद होने से रोक सकते हैं।

• पृष्ठ को नीचे स्क्रॉल करने की क्षमता अक्षम करें.
• एकाधिक पॉपअप से बचें (यदि आपने एक ही पृष्ठ पर एकाधिक पॉपअप को लक्षित किया है, तो यह आपके आगंतुकों को परेशान होने से रोकेगा)।

विंडो के निचले-दाएं कोने में स्थिति बदलते हैं तो यह कैसा दिखता है

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

आप एलिमेंटर में विज़ुअल बिल्डर का उपयोग करके पॉपअप भी बना सकते हैं

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

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

फ़ॉर्म विजेट के साथ, आपके पास उन फ़ील्ड्स पर पूरा नियंत्रण होता है जिन्हें आप पेश करना चाहते हैं, साथ ही सबमिट बटन के टेक्स्ट और स्वरूप पर भी। amp के लिए:

इसके अलावा, मैं आपको एलिमेंटर के सभी विजेट और डिज़ाइन विकल्पों से परिचित होने की दृढ़ता से सलाह देता हूं।

जैसा कि पहले कहा गया है, आपकी वेबसाइट की उपस्थिति पर आपका बहुत अधिक नियंत्रण है, और आपके पास कुछ उपयोगी विजेट्स तक भी पहुंच है जो आपकी रूपांतरण दर बढ़ाने में आपकी सहायता कर सकते हैं।

प्राथमिकताएँ प्रकाशित करें

जब आप अपने द्वारा बनाई गई चीज़ से संतुष्ट हो जाते हैं, तो आप इसे दुनिया के साथ साझा करना चाहेंगे। प्रकाशित करें बटन दबाने के बाद, आपके सामने प्रश्नों की एक श्रृंखला प्रस्तुत की जाएगी। उदाहरण के तौर पर:

क्या उन शर्तों को निर्दिष्ट करना संभव है जिनके तहत आप पॉपअप दिखाना चाहते हैं? आप चुन सकते हैं कि आपके खोज परिणामों में कौन से पृष्ठ शामिल करने हैं या कौन से बाहर करने हैं। आप जितनी चाहें उतनी शर्तें रख सकते हैं।

तो फिर, वह कौन सी घटना है जिसके कारण पॉपअप प्रकट होता है? आप चुन सकते हैं कि पेज लोड होने पर, स्क्रॉल करने पर, या जब उपयोगकर्ता किसी विशिष्ट तत्व पर स्क्रॉल करता है, तो पॉपअप को तुरंत प्रदर्शित करना है या नहीं, अन्य संभावनाओं के बीच। इन सभी विकल्पों की अपनी सेटिंग्स हैं, जो पूर्ण अनुकूलन की अनुमति देती हैं।

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

सेटिंग्स को अपनी इच्छानुसार पूरा करें, फिर सहेजें और बंद करें पर क्लिक करें। आपको amp बताया जाएगा कि इस बटन पर क्लिक करने के बाद आपका पॉपअप कैसा दिखेगा।

पॉपअप को अनुकूलित किया जा सकता है, और उनमें गतिशील सामग्री जोड़ी जा सकती है।

चीज़ों को अगले स्तर तक लाएँ, क्या हम? इस बिंदु तक, हमने एक टेम्पलेट का चयन किया है और एक या दो बैठकों में बदलाव किया है, और बस इतना ही। उस परिदृश्य पर विचार करें जिसमें हम अपने पॉपअप को और अधिक अनुकूलित करना चाहते हैं।

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

उसके बाद, हम इसे चुन सकते हैं, बुनियादी सेटिंग्स में कोई भी आवश्यक बदलाव कर सकते हैं, और एक बार फिर प्रकाशित करें दबा सकते हैं।

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

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

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

मान लीजिए कि डेटाबेस विवरण ठीक से पुनर्प्राप्त नहीं किया गया है। उस स्थिति में, कुछ को टेक्स्ट से पहले, कुछ को टेक्स्ट के बाद और एक फ़ॉलबैक टेक्स्ट को निर्दिष्ट करना संभव है (यदि डेटाबेस विवरण ठीक से पुनर्प्राप्त नहीं किया गया है)।

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

हम इसे एक कदम आगे भी ले जा सकते हैं और उत्पाद छवि को पॉपअप विंडो की पृष्ठभूमि के रूप में भी उपयोग कर सकते हैं।

जब हम प्रकाशित दबाते हैं, तो हमें एक बार फिर प्रकाशन सेटिंग्स प्रस्तुत की जाती हैं, जिससे हमें यह निर्दिष्ट करने की अनुमति मिलती है कि हम चाहते हैं कि पॉपअप केवल WooCommerce पृष्ठों पर दिखाई दे। हम ट्रिगर बनने के लिए टाइमर को 15 सेकंड की निष्क्रियता पर सेट करेंगे। यहाँ बताया गया है कि अंत में इसका परिणाम क्या हुआ:

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