Dil açılır menüsünü Kendi Dizinizde Nasıl Ekleyebilirsiniz Webflow Navbar

Çok dilli bir web sitesi oluşturmak, uluslararası ziyaretçilere geldikleri içeriğe net bir yol açmak anlamına gelir. Dilinizin açılır menüsü Webflow Navbar tam da bunu yapıyor. Bir algoritmayı inşa etmenin üç yolunu size anlatacağız: Webflow'nin Locales list öğesi, özel kodlanmış JavaScript anahtarı ve otomatik kurulum Weglot. Her biri için tam olarak tıklama yolunu, karşılaştırma şeklini ve çalışma şekline uyan bilgileri alacaksınız.

Özetle:

• Webflow'nin yerel Locales list öğesi, etkinleştirdiğiniz locale'lardan otomatik olarak açılır menü seçenekleri oluşturur, böylece dil başına bağlantı oluşturmak zorunda kalmazsınız.
• Yerel anahtarlayıcının uymadığı çoklu proje veya alt alan ayarlarında, özel kodda kısa bir JavaScript anahtarı ziyaretçileri dil versiyonları arasında yönlendirebilir.
• Yapay zeka çeviri araçları gibi Weglot Açılır menüyü, hreflang etiketlerini ve SEO dostu URL'leri tek bir kurulumda oluşturun ve Webflow E-ticaret (ki Webflow Yerelleştirme ise bunu yapmaz).
• Mobil erişilebilirlik önemlidir: en az 44x44 piksel dokunma hedefleri belirleyin ve dokunmatik ekranlarda kaymak yerine Aç on Click kullanın.

Dil açılır menüsünü eklemenin üç yolu Webflow

Bir yöntem seçmeden önce, her birinin size ne sağladığını bilmek faydalı olur.

Webflow'nin Locales listesi, zaten kullanan takımlar için en iyisidir Webflow Lokalizasyon ve rahat şekilde kurulmuş. Henüz yapmadıysanız, kurulum çabası orta. Ücretli bir Webflow Yerelleştirme etkin planı var ve bu uyumluluk Webflow E-ticaret.

Özel kodlanmış JavaScript anahtarı, çoklu proje veya alt alan kurulumlarına uygundur. Kurulum çabası düşük ila orta. Esnek, ama kodu korumanız gerekecek.

Weglot Tek yapabilen, yüksek kaliteli çeviri, anahtar ve SEO kurulumu isteyen ekipler için en iyisidir. Kurulum çabası düşük. Herhangi bir cihazla çalışır Webflow plan (e-ticaret dahil) ve otomatik olarak hreflang etiketleri ekler.

Yöntem 1: Yerel bir yerel anahtarlayıcı ile Webflow's Locales Listesi

• Zaten etkinleştirdiyseniz bu yöntemi kullanın Webflow Projenizde yerelleştirme.

Adım 1: Yerelleştirmeyi Etkinleştirin ve Yerel Bölgelerinizi Ekleyin

T Webflow Tasarımcı, Ayarlar > Yerelleştirme bölümüne gidin ve Yerelleştirmeyi Etkinleştir'e tıklayın. Ana konumunuzu seçin, ardından desteklemek istediğiniz her dil için Yerel Ekle tuşuna tıklayın.

Her yeni yerel için gösterim adını ve alt dizini yapılandırın, ayrıca bu alt dizine yayın yapmayı etkinleştir seçeneğini açın. Yayınlama etkin olmayan locale'ler daha sonra switcher'ınızda görünmeyecek, bu yüzden bu adımı atlamayın.

Adım 2: Navbarınıza bir açılır menü bırakın

Ekle panelini açın ve İleri'ye kaydırın. Açılır menü öğesini navbarınıza sürükleyin. Navigator'u açın, açılır menüyü genişleterek alt öğelerini gösterin ve üç yer tutucu bağlantıyı (Link 1, Link 2, Link 3) silin. Bir sonraki adımda ayarları yapılandırdıktan sonra bölgeleriniz burada görünecek.

Adım 3: Bir Mekan Listesi Ekleyin

Ekle panelinden > İleri'den, Locales listesi öğesini Açılır Menü'nün Navigasyon öğesine sürükleyin. Locales listesi, Koleksiyon listesi gibi çalışır: her yayınlanan yerel için otomatik olarak bir öğe oluşturur, yani her dil için ayrı bir bağlantı oluşturmuyorsunuz.

Adım 4: Açılır menüde ne gösterdiğini seçin

Bir yerel öğenin içindeki Link öğesine tıklayın, ardından Öğe ayarları panelini açın ve Metin alanının yanındaki mor nokta simgesine tıklayın. Locales List Item bölümünde, her seçeneğin nasıl etiketleneceğini seçin: Yerel (ABD), Dil (ABD), Ülke (ABD) veya Gösterim adı (İngilizce (Amerika Birleşik Devletleri)).

Açılır menü anahtarının aktif yerel konumu göstermesi için, Açılır menü Anahtarı'nın içindeki Metin Bloğunu seçin, Metin'in yanındaki mor noktaya tıklayın ve Mevcut Yerel altında aynı etiket formatını seçin.

Adım 5: Mobil için Bayrak ve Cila Ekle

Her yerel için görüntü görselleri yüklediyseniz, Yerel öğesinin içine bir Görsel öğesi ekleyin, Görsel'in yanındaki mor noktaya tıklayın ve Locales List Item'in altında Locale Image seçeneğini seçin. Açık menü anahtarında Mevcut Yerel > Yerel Görselini kullanarak aktif yerel bayrak göstermek için tekrarlayın.

Mobil için Açılır menü'yi seçin ve Menü'> Tıklamada Aç (dokunmatik ekranlarda çalışmadığı için hover değil) seçin. Dokunma hedeflerinin en az 44x44 piksel olduğunu doğrulayın, böylece anahtarlayıcı rahatça ayarlanabilir.

Yöntem 2: Özel Kodlu JavaScript Toggle

Dil versiyonlarınız ayrı yaşadığında bu yöntemi kullanın Webflow projelerde veya farklı alt alanlarda (örneğin, example.com ve es.example.com), burada yerel Locales listesi uymuyor. Kesinlikle arka cepinizde biraz kodlama uzmanlığına ya da bunu yapabilecek bir geliştiriciye ihtiyacınız olacak.

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.

Üç veya daha fazla dil için, bu yaklaşımı her butonun üzerinde bir veri özniteliği (örneğin, data-language="fr") ve her kodu kendi alanına eşleyen bir arama nesnesi ile genişletin.

Yöntem 3: Otomatik Anahtarlayıcı Weglot

Kodla uğraşmak istemiyorsanız ve dil değiştirici, çeviriler, hreflang etiketleri ve SEO dostu URL'lerin tek bir kurulumda yönetilmesini istiyorsanız bu yöntemi kullanın. Özellikle Webflow E-ticaret mağazaları, Webflow Yerelleştirme desteklemiyor.

Başlayın bir Weglot hesap ve Webflow site alanı.

Kaynak ve hedef dillerinizi seçin, ardından Weglot snippet ve yapıştır Webflow Site ayarları > özel kod > baş kodu. Sitenizi yayınlayın, bir dil değiştirici otomatik olarak ortaya çıkıyor ve hepsi bu! İçeriğiniz SEO dostu alt dizinler veya alt alan adları altında çevrilir ve görüntülenir, hreflang etiketleri ve çevrilmiş meta veriler sizin için yönetilir.

Switcher'ı görsel olarak Weglot Dashboard: sayfada herhangi bir yere sürükleyin, bayrakları açıp kapatın ve dil adlarını, dil kodlarını veya ülke kodlarını gösterip göstermemeye karar verin.

Çünkü Webflow-özel tasarımlar, Weglot UI Kit , Designer'a yerleştirilebilecek 20+ klonlanabilir dil değiştirici içerir.

Takımlar Webflow genellikle seç Weglot Birkaç sebepten dolayı. Otomatik içerik algılama, yeni sayfaların manuel olarak tetiklenmeden çevrilmesini sağlar. Çeviriler ayrı bir gösterge panelinde yer alıyor, bu yüzden çevirmenlere gerek yok Webflow İş alanı koltukları. Şöyle çalışır Webflow E-ticaret Webflow Yerelleştirme bunu yapmıyor. Ve çok dilli SEO tüm planlarda yerleşik olarak yer alıyor.

Yerli Webflow vs. Weglot, yan yana

En yaygın iki yolu tartıyorsanız, en çok önemli olan noktalarda nasıl farklılık gösterdiklerine bakınız:

• Switcher kurulumu: Yerel Webflow manuel (Açılır menüyü sürükle, Locales listesini sürükle, metni bağlamak, stil). Weglot Switcher kurulumda otomatik olarak üretilir.
• Yerel içerik senkronizasyonu: Yerel Webflow İçerik güncellerken sayfa başına manuel tetikleyici gerektirir. Weglot yeni içeriği algılar ve otomatik olarak çevirir.
• Webflow E-Ticaret: Native Webflow Yerelleştirme ile uyumlu değil Webflow E-ticaret mağazaları. Weglot Var.
• Hreflang ve SEO URL'leri: Yerel Webflow Localization'ın alt dizin kurulumunu kullanırsanız bunları sizin için halleder, ancak yine de gösterim isimlerini ve yayıncılığı yerel olarak yapılandırırsınız. Weglot hreflang etiketleri ve SEO dostu URL'leri otomatik olarak enjekte eder.
• Takım erişimi: Webflow Yerelleştirme, Designer'da çevirileri düzenleyen herkes için ücretli Workspace koltukları gerektirir. Weglot Tüm planlarda bulunan ayrı bir gösterge panelinde çevirileri yönetir.

Kendi Yapımı Webflow Site Küresel Erişilebilir

Bir dil açılır menü, navbarınızın küçük bir parçasıdır, ancak sitenizin birden fazla kitleye özel olduğunu gösteren en görünür sinyaldir. İster inşa et, ister Webflow'nin Locales listesini oluştur, kendiniz script edin veya otomatikleştirin Weglot, amaç aynı: ziyaretçileri hızlıca doğru dile ulaştırmak, sürtünmeden gitmek.

Anahtarlayıcı, çeviriler ve çok dilli SEO'nun tek bir kurulumda halledilmesini istiyorsanız (bunlar dahil Webflow e-ticaret), Denemek Weglot 14 gün boyunca ücretsiz Webflow site.