Selldone के साथ प्रभावशाली लैंडिंग पेज बनाना — स्टेप-बाय-स्टेप गाइड

परिचय

कभी चाहा है कि बिना एक भी लाइन कोड लिखे खूबसूरत, उत्तरदायी (responsive) लैंडिंग-पेज सेक्शन डिजाइन कर सकें? Selldone Plugin को ChatGPT में इस्तेमाल करके यह संभव हो जाता है।

इस गाइड में आप स्टेप-दर-स्टेप सीखेंगे कि एक प्रेरणा वाली इमेज से लेकर Selldone के Page Builder में एक लाइव, पूरी तरह उत्तरदायी सेक्शन कैसे बनाया जाता है — और यह सब AI की मदद से होगा।

पढ़ने के अंत तक आपके पास एक पेशेवर तरीके से डिज़ाइन किया गया सेक्शन होगा जो आपकी Selldone वेबसाइट पर प्रकाशित करने के लिए तैयार होगा।

💡 नोट: Selldone का Page Builder Vuetify (Vue 3) पर बना है — इसलिए प्लगइन द्वारा जनरेट किया गया हर सेक्शन Selldone के आधुनिक, उत्तरदायी फ्रंट-एंड फ्रेम워크 के साथ पूरी तरह संगत होगा।

स्टेप 1 – अपनी प्रेरणा तैयार करें

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

उस Flipkart सेक्शन का स्क्रीनशॉट लें; हम उसे ChatGPT में एक विज़ुअल संदर्भ के रूप में Selldone Plugin के साथ कस्टम डिज़ाइन जनरेट करते समय उपयोग करेंगे।

💡 टिप: एक ऐसी सेक्शन इमेज चुनें जिसका लेआउट संरचित और नेत्रसंतुलित हो। डिजाइन जितना साफ़ और स्पष्ट होगा, ChatGPT उतना ही बेहतर विश्लेषण और पुनःनिर्माण कर पाएगा।

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

स्टेप 2 – Selldone प्लगइन के साथ ChatGPT खोलें

सुनिश्चित करें कि आपके ChatGPT में Selldone Plugin सक्षम है:

1. ChatGPT पर जाएँ → Settings → Beta Features → Plugins और plugins सक्षम करें।
2. Plugin Store पर जाएँ और Selldone Plugin इंस्टॉल करें।
3. प्लगइन एक्टिव करके एक नई चैट शुरू करें।

आपको अपने चैट बॉक्स के बगल में Selldone का लोगो दिखना चाहिए — इसका मतलब है कि यह उपयोग के लिए तैयार है।

स्टेप 3 – अपना संदर्भ डिज़ाइन अपलोड करें

अपना स्क्रीनशॉट अपलोड करें और एक स्पष्ट प्रॉम्प्ट लिखें, उदाहरण के लिए:

ऊपर के मेन्यू से सुनिश्चित करें कि आप ChatGPT का नवीनतम संस्करण उपयोग कर रहे हैं।

“मैं इस इमेज जैसी एक सेक्शन बनाना चाहता/चाहती हूँ, जिसमें उत्तरदायी फ़ॉन्ट साइज़ हों, फ़ॉन्ट और कार्ड रंग कस्टमाइज़ेबल हों, और कार्ड गोल या गोल कोनों वाले चौकोर हो सकें।”

ChatGPT (और Selldone Plugin) इमेज का विश्लेषण करेगा और Vuetify (Vue 3)-आधारित कोड जनरेट करेगा जो Selldone के Page Builder के साथ पूरी तरह संगत होगा।

Selldone में एक नया लैंडिंग पेज बनाएं

अपने कस्टम सेक्शन जोड़ने से पहले, Selldone में एक रॉ (खाली) लैंडिंग पेज बनाते हैं जिसे हम इस्तेमाल करेंगे।

1. स्टोर के टॉप मेन्यू से जाएँ → Pages → Landing → Add New Landing.
   
2. इस स्क्रीन पर आप तीन डिफ़ॉल्ट लैंडिंग पेज टेम्पलेट देखेंगे।
3. किसी भी टेम्पलेट पर क्लिक करके उसे चुनें और Landing Page Designer में प्रवेश करें। Designer में बाएँ साइड पैनल खोलें, “Code” एलिमेंट खोजें, और उसे Page Builder एरिया में ड्रैग करें। यही “Code” एलिमेंट वह जगह है जहाँ आप ChatGPT द्वारा Selldone Plugin से जनरेट किए गए सेक्शन को पेस्ट या इम्पोर्ट करेंगे।
4. Code बॉक्स के अंदर क्लिक करें ताकि टूलबार सक्रिय हो जाए — ऊपर एक टॉप टूलबार दिखाई देगा जिसे हम बार-बार उपयोग करेंगे।

- पहला आइकन (<>) Code Editor खोलता है, जहाँ आप ChatGPT द्वारा जनरेट किया गया HTML और Vue-आधारित सेक्शन को पेस्ट या एडिट कर सकते हैं।- दूसरा आइकन Properties खोलता है, जहाँ आप सेक्शन के लेआउट, स्पेसिंग, और विज़ुअल सेटिंग्स समायोजित कर सकते हैं।

स्टेप 4 – ChatGPT का प्रारम्भिक कोड संपादक में कॉपी-पेस्ट करें

गलत वर्शन आना सामान्य है

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

“ऊपर भेजी गई इमेज पर ध्यान दें। मैं उसे फिर से भेज रहा/रही हूँ।”

अब ChatGPT फिर से शुरू करेगा और नया कोड जनरेट करेगा। यह वर्शन अंतिम नहीं होगा, क्योंकि आप शायद और अधिक अनुरोध और समायोजन करना चाहेंगे।अब, कोड को कॉपी करें और कोड एडिटर में पेस्ट करके Apply दबाएँ:

महत्वपूर्ण सूचना: कोड एडिटर का डिफ़ॉल्ट मोड HTML है। आपको Vue विकल्प में स्विच करना होगा — अन्यथा आपको खाली परिणाम मिल सकता है।

अब आप ChatGPT द्वारा जनरेट किये गए पहले सही वर्शन का प्रीव्यू देख पाएँगे। टूलबार में दूसरे आइटम पर क्लिक करें (जैसा ऊपर बताया गया था) ताकि Properties मेन्यू खुल जाए और आप समायोजन कर सकें। जैसा कि आप देखेंगे, यहाँ कई सेटिंग्स उपलब्ध हैं जो इस सेक्शन को आपके व्यापार के अनुसार बनाने में मदद करेंगी।

RESET TO DEFAULT विकल्प:

कभी-कभी जब आप कोड का अपडेटेड वर्शन पेस्ट करते हैं, तो आपको कोई दृश्य परिवर्तन नहीं दिखता। ऐसा तब होता है जब बदलाव मूलभूत होते हैं। ऐसे मामलों में आपको Reset to Default विकल्प क्लिक करना होगा। ध्यान रखें कि इस विकल्प का उपयोग करने पर आपकी सभी कस्टम सेटिंग्स, नई टेक्स्ट, रंग, फ़ॉन्ट साइज और अपलोड की गई इमेजेज़ सब हट जाएँगी — यह एक प्रकार का फैक्टरी रीसेट है 🙂।इसलिए, इस विकल्प का उपयोग तभी करें जब आपके बदलाव सही तरीके से लागू नहीं हो रहे हों।

स्टेप 5 – सेक्शन को एडजस्ट करें

ChatGPT ने अन्य उपयोगकर्ताओं के अनुभवों से सीखा है और अब यह अधिक संपूर्ण लेआउट जनरेट करता है — इसका मतलब है कि आपको हर एलिमेंट अलग से माँगने की ज़रूरत नहीं पड़ती। यही चैट करने का असली फायदा है: जितनी लंबी और स्पष्ट आपकी बातचीत होगी, ChatGPT आपकी डिजाइन प्राथमिकताओं को उतना ही बेहतर समझेगा और ज़्यादा सटीक परिणाम देगा।डिफ़ॉल्ट जनरेट किया गया कोड पहले से ही काफी उत्तरदायी होता है, लेकिन आप फ़ॉन्ट साइज, फ़ॉन्ट वेट, सेक्शन या कार्ड की ऊँचाई-चौड़ाई और अन्य विज़ुअल एलिमेंट्स जैसी चीज़ें समायोजित कर सकते हैं।
उदाहरण के लिए, आप Selldone में सेट कर सकते हैं कि बड़े डेस्कटॉप स्क्रीन पर प्रति पंक्ति 8 कार्ड दिखाई दें, टैबलेट पर 4 और मोबाइल पर 2 कार्ड दिखाई दें।
आइए देखें कि ChatGPT इन समायोजनों को किस तरह समझकर लागू करता है — अगले स्टेप्स में हमें कुछ और एडिट्स या अनुरोध करने पड़ सकते हैं।इस मामले में आप सेक्शन की अधिकतम चौड़ाई को बेहतर लेआउट के लिए 1400px पर सेट कर सकते हैं। आप डेस्कटॉप, टैबलेट और मोबाइल के लिए क्रमशः 8, 4 और 2 कार्ड प्रति पंक्ति सेट कर सकते हैं।
Spacing को परिष्कृत करने के लिए, उदाहरण के लिए, Cards Gap (Desktop) को लगभग 12px कर दें। साथ ही आप कार्ड ऊँचाई को 180px से घटाकर 160px कर सकते हैं, या इमेज साइज़ को अपने डिज़ाइन के अनुसार एडजस्ट करें।

याद रखें कि आप इन सेटिंग्स के साथ प्रयोग करके आसानी से लुक और फील कस्टमाइज़ कर सकते हैं — बस संख्याओं के साथ खेलें और देखें क्या आपके स्टाइल के लिए सबसे उपयुक्त है।

परिणाम को बेहतर तरीके से देखने के लिए आप अपनी खुद की इमेजेज़ भी अपलोड कर सकते हैं। हम सुझाव देते हैं कि इमेजेज़ पारदर्शी बैकग्राउंड वाली हों, ताकि Card Background Color विकल्प उन पर समान रूप से लागू हो — जिससे आपका सेक्शन साफ़ और पेशेवर दिखे।इमेजेज़ अपलोड करने, टेक्स्ट एडिट करने और सब कुछ फ़ाइनल करने के बाद Save बटन पर क्लिक करें — या Windows पर Ctrl + S दबाकर तुरंत सेव करें।
अब Live Page खोलें और अपने सेक्शन को सक्रिय रूप में देखें।
लाइव देखने के लिए आप Live Preview विकल्प या उसके बगल वाले बटन पर क्लिक कर सकते हैं जो आपके लैंडिंग पेज का नाम दिखाता है — यह पेज को बायर व्यू में खोल देगा, जैसा कि विज़िटर्स देखेंगे। हालाँकि, मैं Live Preview का उपयोग अंतिम जाँच के लिए सुझाव नहीं देता/देती, क्योंकि यह विभिन्न डिवाइसों पर पेज की पूरी उत्तरदायिता को पूरी तरह प्रदर्शित नहीं करता — जिसका हम नीचे अधिक विस्तार से जिक्र करेंगे।यह कोड का परिणाम है। अब हमें इसे विभिन्न स्क्रीन साइज पर परीक्षण करना होगा ताकि सुनिश्चित किया जा सके कि सब सही काम कर रहा है।
Windows ब्राउज़रों में Web Developer Tools खोलने के लिए F12 दबाएँ।
यह उपकरण आपको पेज को विभिन्न स्क्रीन साइज में प्रीव्यू करने की सुविधा देता है — अलग-अलग मोबाइल, टैबलेट, लैपटॉप या अन्य डिवाइस पर अलग से टेस्ट किए बिना।अब, ऊपर के मेन्यू से Responsive चुनें ताकि आप देख सकें आपका सेक्शन विभिन्न स्क्रीन साइज पर कैसा दिखता है।जैसा कि आप देखेंगे, मोबाइल वर्शन साफ़ और पूरी तरह उत्तरदायी दिखता है।टैबलेट व्यू में — विशेषकर iPad Pro 11-inch पर — हमारी सेटिंग्स (टैबलेट पर 4 कार्ड प्रति पंक्ति) लागू नहीं हो रही हैं और यह केवल 2 दिखा रहा है। हमें ChatGPT से यह समस्या ठीक करने और कोड को फिर से बनाने के लिए पूछना होगा।

स्टेप 6 – पुनरावृत्ति और परिष्करण

पहले वर्शन पर ही रुकें नहीं — यहीं असली क्रिएटिविटी होती है। आप ChatGPT के साथ बातचीत जारी रखकर निम्न विवरण समायोजित कर सकते हैं:

• सेक्शन को सभी स्क्रीन पर पूरी तरह उत्तरदायी बनाना।
• होवर एनिमेशन जोड़ना।
• ग्रेडिएंट बटन का उपयोग करना।

हर राउंड में आपका सेक्शन तुरंत अपडेट हो जाता है।

💡 प्रो टिप: जितना अधिक आप चैट करके और जो चाहिये उसका विस्तार से वर्णन करेंगे, ChatGPT उतना ही बेहतर तरीके से आपके डिजाइन स्टाइल को समझेगा। समय के साथ यह आपकी प्राथमिकताओं से सीखकर और भी सटीक, उच्च-गुणवत्ता परिणाम देने लगेगा।
यहाँ, आपको समस्या को स्पष्ट रूप से बताना चाहिए ताकि ChatGPT उसे बेहतर समझ सके।
याद रखें, यह आपके मन को नहीं पढ़ सकता — आपको समस्या का विस्तार से वर्णन करना होगा, ठीक उसी तरह जैसे इस उदाहरण टिप्पणी में किया गया है:

मैंने टैबलेट साइज में 4 कार्ड प्रति पंक्ति चुने हैं पर iPad Pro 11-inch पर यह 2 कार्ड प्रति पंक्ति दिखा रहा है। इसे ठीक करो। मोबाइल के लिए मैंने 2 प्रति पंक्ति चुने हैं।

जब ChatGPT आपके अनुरोध का उत्तर देता है, कभी-कभी वह केवल विशेष कोड मॉडिफिकेशन्स देता है जिन्हें आपको मैन्युअली बदलना या जोड़ना होता है। काम आसान करने के लिए, उसे सीधे कहें “Send the full code.”अकसर, अपने संदेश के अंत में ChatGPT कुछ अतिरिक्त सेटिंग्स भी सुझाता है जिन्हें आप नजरअंदाज कर सकते हैं — जैसे इस केस में कार्ड्स में लिंक जोड़ना, जो हमारे सेक्शन के लिए आवश्यक है।लगभग तैयार! अपडेटेड कोड को कॉपी-पेस्ट करें, अपने बदलाव सेव करें, और Live Mode में देखें कि सब कुछ सही दिख रहा है या नहीं।
जैसा कि आप देखेंगे, अब यह टैबलेट वर्शन में प्रति पंक्ति 4 कार्ड सही तरीके से दिखाता है।

स्टेप 7 – अंतिम कोड तैयार करें और सेक्शन सेव करें

जब आपका डिज़ाइन तैयार हो जाए, तो ChatGPT को सेक्शन की संरचना और आवश्यकताओं का विस्तृत वर्णन देना अच्छा विचार है। नीचे दिए गए प्रॉम्प्ट का उपयोग कर के अंतिम कोड जनरेट कराएँ:

उपयुक्त संरचना, व्यवहार और डिज़ाइन विवरण का सार देने वाला एक संकल्पनात्मक विवरण ब्लॉक