Jak přidat rozbalovací nabídku jazyků do Webflow ve Webflow

Vytvoření vícejazyčného webu znamená poskytnout zahraničním návštěvníkům jasnou cestu k obsahu, pro který na stránku přišli. Rozbalovací nabídka jazyků v Webflow přesně toto splňuje. Ukážeme vám tři způsoby, jak ji vytvořit: prvek „Locales list“ Webflow, vlastním kódem naprogramované přepínání pomocí JavaScriptu a automatizované nastavení pomocí Weglot. U každého z nich se dozvíte přesnou cestu kliknutí, jak se liší a který z nich nejlépe vyhovuje vašemu stávajícímu způsobu práce.

Shrnutí:

• Nativní prvek „Seznam lokalit“ Webflowautomaticky generuje položky rozevíracího seznamu na základě vašich povolených lokalit, takže nemusíte ručně vytvářet odkazy pro každý jazyk zvlášť.
• V případě konfigurací s více projekty nebo subdoménami, kde se nativní přepínač nehodí, lze návštěvníky mezi jazykovými verzemi přesměrovat pomocí krátkého přepínače v kódu vytvořeném na míru.
• Nástroje pro překlad pomocí umělé inteligence, jako je Weglot rozevírací nabídku, tagy hreflang a URL adresy optimalizované pro SEO v rámci jediného nastavení a jsou kompatibilní s Webflow (na rozdíl od Webflow ).
• Přístupnost na mobilních zařízeních je důležitá: nastavte dotykové cíle o velikosti minimálně 44×44 pixelů a na dotykových displejích používejte funkci „Otevřít po kliknutí“ namísto „hover“.

Tři způsoby, jak do Webflow přidat rozevírací nabídku jazyků

Než si vyberete metodu, je dobré vědět, co vám která z nich přinese.

Seznam lokalizací Webflowje nejvhodnější pro týmy, které již Webflow používají a mají vše pohodlně nastaveno. Pokud jste tak ještě neučinili, je náročnost nastavení střední. Vyžaduje placený Webflow s povolenou lokalizací a není kompatibilní s Webflow .

Vlastní přepínač napsaný v JavaScriptu se hodí pro prostředí s více projekty nebo subdoménami. Náročnost nastavení je nízká až střední. Je flexibilní, ale budete muset kód spravovat.

Weglot ideální volbou pro týmy, které hledají komplexní řešení zahrnující kvalitní překlad, přepínač jazyků a nastavení SEO, aniž by se o to musely starat. Nastavení je velmi snadné. Funguje s jakýmkoli Webflow (včetně Ecommerce) a automaticky přidává tagy hreflang.

Metoda 1: Vytvoření nativního přepínače jazykových nastavení pomocí seznamu jazykových nastavení Webflow

• Tuto metodu použijte, pokud jste ve svém projektu již povolili Webflow .

Krok 1: Zapněte lokalizaci a přidejte své jazykové mutace

V nástroji Webflow přejděte do části Nastavení > Lokalizace a klikněte na možnost Povolit lokalizaci. Vyberte primální jazykovou verzi a poté klikněte na možnost Přidat jazykovou verzi u každého jazyka, který chcete podporovat.

U každého nového jazykového balíčku nastavte jeho zobrazovaný název a podadresář a zaškrtněte políčko Povolit publikování do tohoto podadresáře. Jazykové balíčky, u nichž není publikování povoleno, se později v přepínači nezobrazí, proto tento krok nevynechávejte.

Krok 2: Vložte rozbalovací nabídku do navigační lišty

Otevřete panel Přidat a přejděte do sekce Pokročilé. Přetáhněte prvek Dropdown do navigační lišty. Otevřete panel Navigator, rozbalte prvek Dropdown, aby se zobrazily jeho podřízené prvky, a odstraňte tři zástupné odkazy (Link 1, Link 2, Link 3). Vaše jazykové verze se zde zobrazí poté, co je v dalším kroku nakonfigurujeme.

Krok 3: Přidejte seznam národních prostředí

V panelu Přidat > Pokročilé přetáhněte prvek Seznam lokalizací do prvku Navigace v rozevíracím seznamu. Seznam lokalizací funguje podobně jako seznam kolekcí: automaticky vygeneruje jednu položku pro každou publikovanou lokalizaci, takže nemusíte pro každý jazyk vytvářet samostatný odkaz.

Krok 4: Vyberte, co se má zobrazit v rozevíracím seznamu

Klikněte na prvek Odkaz v položce lokalizace, poté otevřete panel Nastavení prvku a klikněte na ikonu fialové tečky vedle pole Text. V části Položka seznamu lokalizací vyberte, jak má být jednotlivá možnost označena: Lokalizace (en-US), Jazyk (en), Země (US) nebo Zobrazovaný název (angličtina (Spojené státy)).

Chcete-li, aby přepínač s rozevíracím seznamem zobrazoval aktuální jazykovou mutaci, vyberte textový blok uvnitř přepínače, klikněte na fialovou tečku vedle položky Text a v části Aktuální jazyková mutace vyberte stejný formát popisku.

Krok 5: Přidejte vlajky a vylepšení pro mobilní zařízení

Pokud jste nahráli obrázky pro jednotlivé jazykové verze, vložte prvek Image do prvku Locale, klikněte na fialovou tečku vedle prvku Image a v části „Položka seznamu jazykových verzí“ vyberte možnost „Obrázek jazykové verze“. Totéž proveďte v prvku Dropdown Toggle pomocí volby „Aktuální jazyková verze > Obrázek jazykové verze“, aby se u aktivní jazykové verze zobrazila vlajka.

V nastavení pro mobilní zařízení vyberte rozevírací nabídku a nastavte Menu > Otevřít po klepnutí (nikoli po najetí myší, protože najetí myší na dotykových obrazovkách nefunguje). Ujistěte se, že dotykové cíle mají rozměry alespoň 44 × 44 pixelů, aby bylo možné na přepínač pohodlně klepnout.

Metoda 2: Vlastní přepínač v JavaScriptu

Tuto metodu použijte v případě, že jsou vaše jazykové verze umístěny v samostatných Webflow nebo na různých subdoménách (například example.com a es.example.com), kde nestačí použít standardní seznam jazykových verzí. Budete určitě potřebovat určité znalosti programování, případně vývojáře v týmu, který to za vás zvládne.

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.

V případě tří nebo více jazyků tento přístup rozšířte o datový atribut u každého tlačítka (například data-language=“fr“) a vyhledávací objekt, který přiřazuje každý kód k příslušné doméně.

Metoda 3: Automatický přepínač s Weglot

Tuto metodu použijte, pokud se nechcete zabývat programováním a chcete, aby se přepínač jazyků, překlady, tagy hreflang a URL adresy optimalizované pro SEO nastavily najednou. Je to obzvláště užitečné u Webflow , které Webflow nepodporuje.

Nejprve si vytvořte Weglot a přidejte doménu svého Webflow .

Vyberte zdrojový a cílový jazyk, zkopírujtesnippet Weglot snippet vložte jej do Webflow v části Nastavení Webflow > Vlastní kód > Kód v hlavičce. Zveřejněte svůj web a přepínač jazyků se zobrazí automaticky – a je to! Váš obsah je přeložen a zobrazen v podadresářích nebo subdoménách optimalizovaných pro SEO, přičemž tagy hreflang a přeložená metadata jsou za vás již vyřešeny.

Přepínač můžete upravovat vizuálně přímo v Weglot : přetáhněte jej na libovolné místo na stránce, zapněte nebo vypněte vlajky a vyberte, zda se mají zobrazovat názvy jazyků, kódy jazyků nebo kódy zemí.

Pro návrhy Webflow obsahuje sada Weglot Kit více než 20 klonovatelných přepínačů jazyků, které lze snadno vložit do nástroje Designer.

Týmy používající Webflow si Webflow volí Weglot několika důvodů. Díky automatické detekci obsahu se nové stránky překládají, aniž by bylo nutné cokoli spouštět ručně. Překlady se nacházejí v samostatném ovládacím panelu, takže překladatelé nepotřebují licence Webflow . Weglot funguje s Webflow , což Webflow není možné. A ve všech tarifech je integrováno vícejazyčné SEO.

Webflow . Weglot: přímé srovnání

Pokud zvažujete dvě nejběžnější možnosti, zde je přehled toho, v čem se liší v bodech, na kterých obvykle záleží nejvíce:

• Nastavení přepínače: Webflow nativním Webflow ručně (přetažení rozevíracího seznamu, přetažení seznamu jazykových verzí, přiřazení textu, úprava vzhledu). Weglot přepínač automaticky při instalaci.
• Synchronizace obsahu napříč jazykovými verzemi: Webflow nativním Webflow při aktualizaci obsahu Webflow proces ručně na každé stránce. Weglot nový obsah Weglot a přeloží jej automaticky.
• Webflow : Nativní Webflow není kompatibilní s obchody Webflow . Weglot .
• Hreflang a SEO adresy URL: Webflow tyto záležitosti Webflow automaticky, pokud využíváte nastavení podadresářů v rámci lokalizace, ale i tak budete muset nastavit zobrazované názvy a publikování pro jednotlivé jazykové verze. Weglot tagy hreflang a SEO-přátelské adresy URL automaticky.
• Přístup pro tým: Webflow vyžaduje placená licence Workspace pro všechny, kdo upravují překlady v nástroji Designer. Weglot překlady prostřednictvím samostatného ovládacího panelu, který je součástí všech tarifů.

Jak zajistit globální přístupnost vaší Webflow

Rozbalovací nabídka jazyků je sice jen malou součástí navigační lišty, představuje však nejviditelnější signál toho, že váš web je určen pro více než jednu cílovou skupinu. Ať už ji vytvoříte pomocí seznamu lokalit Webflow, naprogramujete si ji sami, nebo ji automatizujete pomocí Weglot, cíl je stejný: rychle a bez potíží nasměrovat návštěvníky na správnou jazykovou verzi.

Pokud chcete, aby se přepínač jazyků, překlady a vícejazyčné SEO spravovaly v rámci jednoho nastavení (včetně Webflow ), vyzkoušejte si Weglot na svém Webflow na 14 dní Weglot .