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

फ़्लैटसोम थीम

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

यह ThemeForest पर सबसे लोकप्रिय WooCommerce थीमों में से एक है। इस ट्यूटोरियल को लिखने के समय तक, इसकी बिक्री 174.500 से अधिक थी और 6,600 से अधिक समीक्षाओं से शानदार 4.8-स्टार रेटिंग प्राप्त हुई थी।

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

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

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

तो, बिना किसी देरी के, आइए शुरू करें:

सामग्री की तालिका:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

यूएक्स बिल्डर खुलने के बाद, आप छवि से देख सकते हैं कि उत्पाद पृष्ठ तत्व आपके उत्पाद पृष्ठ के बाईं ओर के पैनल में उपलब्ध हैं।

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

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

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

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

ऊपर लपेटकर

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

होल्डरखु

लाइव:.cid.e495888558d5265f

हाल के पोस्ट

एलीमेंटर के साथ हेडर और फ़ूटर का उपयोग कैसे करें

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

6 जनवरी 2022

वर्डप्रेस थीम तुलना: एस्ट्रा बनाम ओशनडब्ल्यूपी

बाज़ार में दो सबसे लोकप्रिय वर्डप्रेस थीम एस्ट्रा और ओसियनडब्ल्यूपी हैं। पेशेवर…

2 जनवरी 2022

वर्डप्रेस समाचार थीम तुलना: समाचार पत्र बनाम एस्ट्रा

एक उत्कृष्ट समाचार वेबसाइट बनाने के लिए आपको वेब डिज़ाइनर बनने की आवश्यकता नहीं है। हम…

25 अक्टूबर 2021

समाचार पत्र थीम के साथ समाचार-संबंधित वेबसाइट बनाएं

न्यूज़पेपर थीम tagDiv द्वारा डिज़ाइन की गई सबसे महत्वपूर्ण वर्डप्रेस थीम में से एक है, जो…

18 अक्टूबर 2021

Avada WooCommerce बिल्डर के साथ ईकॉमर्स कैसे बनाएं

जब ऑनलाइन स्टोर स्थापित करने की बात आती है, तो WooCommerce एक पसंदीदा plugin है। यह…

4 अक्टूबर 2021

एलीमेंटर के साथ स्टिकी हेडर और स्क्रॉलिंग प्रभावों का उपयोग कैसे करें

जब कोई व्यक्ति आपकी वेबसाइट पर जाता है तो आम तौर पर वह पहली चीज़ हेडर देखता है,…

21 सितंबर 2021