एलिमेंटर के साथ एक अद्भुत WooCommerce उत्पाद पृष्ठ बनाएं और डिज़ाइन करें

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

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

कई अंतर्निहित एलिमेंटर WooCommerce मॉड्यूल आपको एलिमेंटर बिल्डर का उपयोग करके WooCommerce सामग्री या कार्यक्षमता ब्लॉक डालने या उन्हें स्टाइल करने की अनुमति देते हैं। बहुत बढ़िया, है ना?

WooCommerce को स्टाइल और कस्टमाइज़ करने के लिए हर छोटे बदलाव के लिए PHP और CSS की आवश्यकता होती थी, लेकिन जैसे-जैसे एलिमेंटर जैसे टूल बेहतर होते हैं और अधिक जटिल होते जाते हैं, आपके स्टोर के दिखने और काम करने के तरीके को नियंत्रित करने के लिए अधिक से अधिक विकल्प उपलब्ध हो जाते हैं।

आएँ शुरू करें।

• एक एलिमेंटर टेम्पलेट बनाना
• एलिमेंटर उत्पाद छवि या गैलरी का निर्माण
• WooCommerce उत्पाद का शीर्षक, कीमत और कार्ट में जोड़ें
• एलिमेंटर उत्पाद टैब सेट करना
• एलिमेंटर उत्पाद का संक्षिप्त विवरण
• एलिमेंटर और WooCommerce उत्पाद की बिक्री
• निष्कर्ष - एलिमेंटर उत्पाद पेज बिल्डर

एक एलिमेंटर टेम्पलेट बनाना

प्रक्रिया में पहला कदम वर्डप्रेस डैशबोर्ड में टेम्प्लेट पर नेविगेट करके एक नया एलिमेंटर टेम्प्लेट बनाना है। 'बिल्ड न्यू' पर क्लिक करें, फिर उस टेम्पलेट के रूप में एकल उत्पाद चुनें जिसे आप बनाना चाहते हैं।

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

एलिमेंटर उत्पाद छवि या गैलरी का निर्माण

प्रत्येक WooCommerce उत्पाद में एक उत्पाद छवि या छवि गैलरी होती है जो ग्राहकों को उत्पाद की तस्वीरें दिखाती है। एलिमेंटर एक अंतर्निहित उत्पाद छवि मॉड्यूल प्रदान करता है जो हमें इसे अपने टेम्पलेट में सम्मिलित करने की अनुमति देता है।

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

चयनकर्ता .ऑनसेल { \sbackground-color: #cc3366 ; \एस}

WooCommerce पी उत्पाद का शीर्षक, कीमत और कार्ट में जोड़ें

दाहिने हाथ के कॉलम में उत्पाद शीर्षक, उत्पाद मूल्य और कार्ट में के लिए एलीमेंटर मॉड्यूल जोड़ देंगे

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

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

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

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

• सामग्री को 'कार्ट में जोड़ें' पर सेट करें।
• पृष्ठभूमि रंग को '#cc3366' पर सेट करें
• सीमा त्रिज्या को 0 पर सेट करें

मैंने राशि चयनकर्ता की सीमा त्रिज्या को 0 में बदल दिया है, जो आप मात्रा के लिए स्टाइल टैब के भीतर कर सकते हैं।

एलिमेंटर उत्पाद टैब सेट करना

प्रत्येक उत्पाद को कुछ बुनियादी जानकारी प्रदर्शित करनी होती है जैसे उत्पाद विवरण और यदि उपलब्ध हो तो समीक्षाएँ; इसे आमतौर पर उत्पाद टैब के माध्यम से नियंत्रित किया जाता है।

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

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

.वूकॉमर्स #समीक्षा फॉर्म #उत्तर .फॉर्म-सबमिट इनपुट { पृष्ठभूमि-रंग: #cc3366; रंग: #fff; सीमा-त्रिज्या: 0px; }

एलिमेंटर पी उत्पाद संक्षिप्त विवरण

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

कृपया WooCommerce संक्षिप्त विवरण मॉड्यूल खोजें, फिर इसे उत्पाद मूल्य के नीचे और कार्ट में जोड़ें मॉड्यूल के ऊपर खींचें और छोड़ें।

यहां अभी तक किसी स्टाइलिंग की आवश्यकता नहीं है क्योंकि इसे हैलो एलीमेंटर से स्टाइल विरासत में मिली है।

एलिमेंटर और WooCommerce पी उत्पाद अपसेल

प्रत्येक WooCommerce साइट के लिए आपका औसत बास्केट मूल्य बढ़ाना महत्वपूर्ण है, यही कारण है कि यह अच्छा है कि एलिमेंटर आपके स्टोर पर अनुकूलन को आसानी से एकीकृत करने के लिए एक उत्पाद अपसेल मॉड्यूल शामिल करता है।

कृपया एलीमेंटर बिल्डर में उत्पाद अपसेल्स मॉड्यूल खोजें और इसे उत्पाद डेटा टैब के पीछे एक नई पंक्ति में डालें।

जैसा कि आप देख सकते हैं, हमारी बाकी शैली के पूरक के लिए इसमें थोड़े से समायोजन की आवश्यकता है। मॉड्यूल को संशोधित करना प्रारंभ करें और निम्नलिखित परिवर्तन करें:

• शीर्षक रंग को - #cc3366 पर सेट करें
• शीर्षक का रंग - #cc3366 पर सेट करें
• कीमत का रंग - #54595f पर सेट करें
• बटन पृष्ठभूमि रंग को - #cc3366 पर सेट करें
• बटन का रंग - #fff पर सेट करें
• बटन बॉर्डर त्रिज्या t0 - 0 सेट करें

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

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

निष्कर्ष - एलिमेंटर पी उत्पाद पेज बिल्डर

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

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

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