अपनी मेनू में भाषा ड्रॉपडाउन मेनू कैसे जोड़ें Webflow नेवबार

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

सारांश:

• Webflow इसका नेटिव लोकेल लिस्ट एलिमेंट आपके सक्षम लोकेल से ड्रॉपडाउन विकल्प स्वतः उत्पन्न करता है, इसलिए आपको मैन्युअल रूप से प्रति भाषा एक लिंक बनाने की आवश्यकता नहीं है।
• कई प्रोजेक्ट या सबडोमेन सेटअप के लिए जहां नेटिव स्विचर उपयुक्त नहीं है, कस्टम कोड में एक छोटा जावास्क्रिप्ट टॉगल आगंतुकों को भाषा संस्करणों के बीच निर्देशित कर सकता है।
• एआई अनुवाद उपकरण जैसे Weglot एक ही सेटअप में ड्रॉपडाउन, hreflang टैग और SEO-अनुकूल URL जेनरेट करें और इसके साथ काम करें। Webflow ईकॉमर्स (जो Webflow स्थानीयकरण ऐसा नहीं करता है)।
• मोबाइल एक्सेसिबिलिटी महत्वपूर्ण है: टच स्क्रीन पर कम से कम 44x44 पिक्सल के टच टारगेट सेट करें और होवर करने के बजाय क्लिक करने पर खोलें विकल्प का उपयोग करें।

भाषा ड्रॉपडाउन जोड़ने के तीन तरीके Webflow

कोई भी तरीका चुनने से पहले, यह जानना मददगार होता है कि प्रत्येक तरीका आपको क्या लाभ देता है।

Webflow 's Locales list उन टीमों के लिए सबसे उपयुक्त है जो पहले से ही इसका उपयोग कर रही हैं Webflow स्थानीयकरण और सेटअप आसानी से हो जाता है। यदि आपने अभी तक सेटअप नहीं किया है, तो सेटअप में मध्यम प्रयास लगता है। इसके लिए सशुल्क सदस्यता की आवश्यकता होती है। Webflow स्थानीयकरण सक्षम योजना, और यह इसके साथ संगत नहीं है Webflow ईकॉमर्स।

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

Weglot यह उन टीमों के लिए सबसे अच्छा है जो एक ही सिस्टम में उच्च गुणवत्ता वाला अनुवाद, स्विचर और एसईओ सेटअप चाहती हैं। सेटअप में कम मेहनत लगती है। यह किसी भी सिस्टम के साथ काम करता है। Webflow यह योजना (ईकॉमर्स सहित) बनाता है और स्वचालित रूप से hreflang टैग जोड़ता है।

विधि 1: नेटिव लोकेल स्विचर का निर्माण करें Webflow लोकेशंस सूची

• यदि आपने पहले ही सक्षम कर दिया है तो इस विधि का उपयोग करें। Webflow आपके प्रोजेक्ट पर स्थानीयकरण।

चरण 1: स्थानीयकरण सक्षम करें और अपने स्थानीय नाम जोड़ें

में Webflow डिज़ाइनर, सेटिंग्स > लोकलाइज़ेशन पर जाएं और लोकलाइज़ेशन सक्षम करें पर क्लिक करें। अपना प्राथमिक लोकेल चुनें, फिर उन सभी भाषाओं के लिए लोकेल जोड़ें पर क्लिक करें जिन्हें आप सपोर्ट करना चाहते हैं।

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

चरण 2: अपने नेविगेशन बार में एक ड्रॉपडाउन जोड़ें

ऐड पैनल खोलें और एडवांस्ड तक स्क्रॉल करें। एक ड्रॉपडाउन एलिमेंट को अपने नेविगेशन बार में ड्रैग करें। नेविगेटर खोलें, ड्रॉपडाउन को एक्सपैंड करके उसके चाइल्ड एलिमेंट्स को दिखाएं और तीन प्लेसहोल्डर लिंक (लिंक 1, लिंक 2, लिंक 3) को डिलीट कर दें। अगले चरण में कॉन्फ़िगरेशन के बाद आपकी लोकेल्स यहां दिखाई देंगी।

चरण 3: लोकेशंस की सूची जोड़ें

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

चरण 4: ड्रॉपडाउन में दिखाई देने वाली चीज़ों को चुनें

किसी लोकेल आइटम के अंदर लिंक एलिमेंट पर क्लिक करें, फिर एलिमेंट सेटिंग्स पैनल खोलें और टेक्स्ट फ़ील्ड के बगल में स्थित बैंगनी बिंदु आइकन पर क्लिक करें। लोकेल लिस्ट आइटम के अंतर्गत, चुनें कि प्रत्येक विकल्प को कैसे लेबल किया जाना चाहिए: लोकेल (en-US), भाषा (en), देश (US), या डिस्प्ले नाम (अंग्रेजी (संयुक्त राज्य अमेरिका))।

ड्रॉपडाउन टॉगल में सक्रिय लोकेल दिखाने के लिए, ड्रॉपडाउन टॉगल के अंदर टेक्स्ट ब्लॉक का चयन करें, टेक्स्ट के बगल में स्थित बैंगनी बिंदु पर क्लिक करें, और वर्तमान लोकेल के अंतर्गत समान लेबल प्रारूप चुनें।

चरण 5: मोबाइल के लिए झंडे और पॉलिश जोड़ें

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

मोबाइल के लिए, ड्रॉपडाउन चुनें और मेनू > क्लिक पर खोलें (होवर पर नहीं, क्योंकि टचस्क्रीन पर होवर काम नहीं करता) सेट करें। सुनिश्चित करें कि टच टारगेट कम से कम 44x44 पिक्सल के हों ताकि स्विचर को आसानी से टैप किया जा सके।

विधि 2: कस्टम-कोडेड जावास्क्रिप्ट टॉगल

इस विधि का उपयोग तब करें जब आपके भाषा संस्करण अलग-अलग फ़ोल्डरों में हों। Webflow ऐसे प्रोजेक्ट या अलग-अलग सबडोमेन (जैसे example.com और es.example.com) पर, जहां नेटिव लोकेल लिस्ट फिट नहीं बैठती। इसके लिए आपको कोडिंग का अच्छा ज्ञान होना जरूरी है, या फिर आपकी टीम में कोई ऐसा डेवलपर होना चाहिए जो यह काम कर सके।

Add a button or link to your navbar and give it a class like language-toggle. Then paste a short script into Page Settings > Custom Code > Before </body> tag that redirects the visitor to the equivalent page on your alternate domain, preserving the path so they don’t land on the homepage of the other language.

तीन या अधिक भाषाओं के लिए, प्रत्येक बटन पर एक डेटा विशेषता (उदाहरण के लिए, data-language=”fr”) और एक लुकअप ऑब्जेक्ट के साथ इस दृष्टिकोण का विस्तार करें जो प्रत्येक कोड को उसके डोमेन से मैप करता है।

विधि 3: स्वचालित स्विचर के साथ Weglot

यदि आप कोड से निपटना नहीं चाहते और भाषा स्विचर, अनुवाद, hreflang टैग और SEO-अनुकूल URL को एक ही सेटअप में संभालना चाहते हैं, तो इस विधि का उपयोग करें। यह विशेष रूप से उपयोगी है Webflow ई-कॉमर्स स्टोर, जो Webflow स्थानीयकरण समर्थित नहीं है।

सबसे पहले एक Weglot खाता बनाएं और उसमें अपनी जानकारी जोड़ें। Webflow साइट डोमेन।

अपनी स्रोत और लक्ष्य भाषाएँ चुनें, फिर कॉपी करें Weglot snippet और इसे पेस्ट करें Webflow साइट सेटिंग्स > कस्टम कोड > हेड कोड। अपनी साइट प्रकाशित करें, और भाषा बदलने का विकल्प अपने आप दिखाई देगा, बस इतना ही! आपकी सामग्री अनुवादित होकर SEO-अनुकूल उपनिर्देशिकाओं या उपडोमेनों के अंतर्गत प्रदर्शित होगी, जिसमें hreflang टैग और अनुवादित मेटाडेटा का प्रबंधन आपके लिए किया जाएगा।

आप स्विचर को दृश्य रूप से संपादित कर सकते हैं। Weglot डैशबोर्ड: इसे पेज पर कहीं भी ड्रैग करें, फ्लैग को ऑन या ऑफ करें, और चुनें कि भाषा के नाम, भाषा कोड या देश कोड प्रदर्शित करने हैं या नहीं।

के लिए Webflow विशिष्ट डिज़ाइनों के लिए, Weglot यूआई किट में 20 से अधिक क्लोन करने योग्य भाषा स्विचर शामिल हैं जिन्हें डिज़ाइनर में आसानी से जोड़ा जा सकता है।

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

देशी Webflow बनाम Weglot , अगल बगल

यदि आप दो सबसे आम विकल्पों पर विचार कर रहे हैं, तो यहां उन बिंदुओं पर उनकी भिन्नता बताई गई है जो सबसे अधिक मायने रखते हैं:

• स्विचर सेटअप: नेटिव Webflow यह मैन्युअल है (ड्रॉपडाउन को ड्रैग करें, लोकेशंस सूची को ड्रैग करें, टेक्स्ट को बाइंड करें, स्टाइल करें)। Weglot यह इंस्टॉल करते समय स्विचर को स्वचालित रूप से उत्पन्न करता है।
• विभिन्न स्थानों पर सामग्री का सिंक्रोनाइज़ेशन: नेटिव Webflow सामग्री को अपडेट करते समय प्रति पृष्ठ एक मैन्युअल ट्रिगर की आवश्यकता होती है। Weglot यह नई सामग्री का पता लगाता है और उसका स्वचालित रूप से अनुवाद करता है।
• Webflow ईकॉमर्स: नेटिव Webflow स्थानीयकरण इसके साथ संगत नहीं है Webflow ईकॉमर्स स्टोर। Weglot है।
• Hreflang और SEO URL: नेटिव Webflow यदि आप लोकलाइज़ेशन के सबडायरेक्टरी सेटअप का उपयोग करते हैं तो यह आपके लिए इन कार्यों को संभाल लेता है, लेकिन आपको फिर भी प्रत्येक लोकेल के लिए डिस्प्ले नाम और प्रकाशन को कॉन्फ़िगर करना होगा। Weglot यह स्वचालित रूप से hreflang टैग और SEO-अनुकूल URL को शामिल करता है।
• टीम एक्सेस: Webflow डिजाइनर में अनुवाद संपादित करने वाले किसी भी व्यक्ति के लिए स्थानीयकरण हेतु सशुल्क वर्कस्पेस सीटों की आवश्यकता होती है। Weglot सभी प्लान में शामिल एक अलग डैशबोर्ड में अनुवादों का प्रबंधन किया जाता है।

अपना बनाना Webflow यह साइट विश्व स्तर पर सुलभ है।

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

यदि आप स्विचर, अनुवाद और बहुभाषी एसईओ को एक ही सेटअप में संभालना चाहते हैं (जिसमें शामिल हैं Webflow ई-कॉमर्स के लिए, Weglot 14 दिनों के लिए मुफ्त में आज़माएं। Webflow साइट।