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

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

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

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

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

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

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

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

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

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

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

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

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

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

पॉपअप विंडो का विन्यास

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

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

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

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

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

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

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

आप स्टाइल टैब पर निम्न चीज़ें कर सकते हैं :

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

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

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

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

ये सेटिंग्स आपके पॉपअप को कैसे प्रभावित करेंगी, इसका अंदाजा लगाने के लिए, जब आप विंडो के निचले-दाएं कोने में स्थिति

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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