एक फ्लैट्सओम थीम के साथ एक कस्टम WooCommerce उत्पाद पृष्ठ बनाएं

फ्लेसेट्स थीम

फ़्लैटसम एक शक्तिशाली वर्डप्रेस थीम है जिसे ईकामर्स वेबसाइटों के लिए डिज़ाइन किया गया है और यह WooCommerce एकीकरण के साथ आता है।

यह ThemeForest पर सबसे लोकप्रिय WooCommerce थीम में से एक है। इस ट्यूटोरियल को लिखने के समय तक, इसकी बिक्री १७४.५०० से अधिक थी और ४.८-स्टार रेटिंग ६,६००+ से अधिक समीक्षाओं से आ रही थी।

फ्लैटसम को मुख्य रूप से शुरुआती और गैर-तकनीक-प्रेमी उपयोगकर्ताओं को ध्यान में रखकर बनाया गया है।

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

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

तो, आगे की हलचल के बिना, चलिए शुरू करते हैं:

विषयसूची:

फ़्लैटसम, वूकॉम और वर्डप्रेस के बीच अंतर

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

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

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

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

फ़्लैटसम थीम का उपयोग करके WooCommerce उत्पाद पृष्ठ बनाएं

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

लगभग सभी लोग ऑनलाइन खरीदारी कर चुके हैं, शायद इसलिए पिछले कुछ महीनों में हमने चुनौतीपूर्ण समय का सामना किया है। घर में रहना हम सभी के लिए सबसे सुरक्षित उपाय था। यही कारण है कि हमारे सभी पाठक इस तथ्य पर सहमत होंगे कि एक ऑनलाइन स्टोर एक मानक वेबसाइट की तुलना में बहुत अधिक जटिल है।

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

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

फ्लैटसम में कुछ शानदार विशेषताएं हैं, लेकिन एक हिस्सा यह है कि यह 300,000 से अधिक उपयोगकर्ताओं की शीर्ष पसंद बन गया है। एक अंतिम उपकरण एक पंक्ति को कोड किए बिना कुछ जबरदस्त उत्तरदायी वेबसाइट बनाने में सहायता करता है। इसके अलावा, कुछ अत्यधिक रचनात्मक और अद्वितीय ऑनलाइन स्टोर बनाने की इसकी क्षमता इसे और भी अधिक योग्य बनाती है।

तो बिना किसी और समय को बर्बाद करते हुए, आइए ट्यूटोरियल पर जाएं। यह ट्यूटोरियल आपको प्रोडक्ट्स पेज को डिजाइन करने की पूरी प्रक्रिया से गुजरता है। चित्रों से आपको यह पता लगाने में मदद मिलेगी कि प्रक्रिया के माध्यम से कार्य कैसे होगा।

चरण 1: उत्पाद पृष्ठ के लिए एक लेआउट चुनें

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

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

उत्पाद कस्टमाइज़र के आगे बढ़ते हुए, हमने इसे पूर्ण ऊंचाई बाईं साइडबार नाम दिया।

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

(वैकल्पिक) चरण 2: मैन्युअल रूप से उत्पाद पृष्ठ बनाएं

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

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

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

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

एक शीर्षक के साथ एक ब्लॉक बनाना शुरू करें। यदि आप हेड डेवलप करना चाहते हैं, तो आपको अपने डैशबोर्ड में UX ब्लॉक्स के तहत उपलब्ध “Add New” पर क्लिक करना होगा।

आप अपनी इच्छानुसार ब्लॉक का नाम रख सकते हैं। यहाँ इस पूर्व में amp ले, हम के रूप में संघ नाम दिया 'पूर्ण ऊंचाई बाएं साइडबार लेआउट।' इसके बाद, आप ब्लॉक एडिटर के अंदर शॉर्टकोड देख सकते हैं। एक बार जब आप वांछित शॉर्टकोड की प्रतिलिपि पूरी कर लेते हैं, तो आप प्रकाशित करें को हिट कर सकते हैं।

हम इस एक छोटे से कदम के बाद सम्‍मिलित होंगे जहां हम अपनी इच्छाओं के अनुसार अपने पेज को अनुकूलित कर सकते हैं। अब उत्पाद पृष्ठ थीम विकल्प पर जाएँ और कस्टम लेआउट आइकन पर जाएँ।

एक बार पूरा होने पर, आप अब कस्टम उत्पाद लेआउट ड्रॉपडाउन से ब्लॉक बना पाएंगे।

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

एक बार पूरा होने पर, केवल प्रकाशित करें बटन दबाएं; यह सेटिंग्स को बचाएगा।

चरण 3: उत्पाद पृष्ठ को अनुकूलित करें

हमारे लिए अनुकूलन शुरू करने का समय आ गया है। सबसे पहले, हम मौजूदा उत्पादों पृष्ठ को सामने के छोर से नेविगेट करेंगे जो हम पहले चरणों में सेट करते हैं।

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

UX बिल्डर विकल्प दिखाई देता है। अनुकूलन शुरू करने के लिए बस बटन दबाएं।

UX बिल्डर ओपन होने के बाद, आप उस इमेज से देख सकते हैं कि आपके पेज के लेफ्ट साइड पैनल में प्रोडक्ट पेज एलिमेंट्स उपलब्ध हैं।

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

आपके पास बाईं ओर पैनल से तत्वों को फिर से व्यवस्थित करने और तत्व विकल्प से सेटिंग्स बदलने के लिए विकल्प हैं। इस एक्स amp ले में, हम बाईं मेनू पर उपलब्ध मूल्य को फिर से व्यवस्थित करेंगे।

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

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

ऊपर लपेटकर

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

एक टिप्पणी छोड़ दो

आपकी ईमेल आईडी प्रकाशित नहीं की जाएगी। आवश्यक फ़ील्ड चिह्नित हैं *