Jak dodać rozwijane menu języków do Webflow w Webflow

Stworzenie wielojęzycznej strony internetowej oznacza zapewnienie zagranicznym użytkownikom łatwego dostępu do treści, po które przyszli. Rozwijane menu języków w Webflow właśnie to umożliwia. Przedstawimy trzy sposoby jego stworzenia: element listy „Locales” Webflow, niestandardowy przełącznik oparty na kodzie JavaScript oraz automatyczną konfigurację za pomocą Weglot. Dla każdego z nich poznasz dokładną ścieżkę kliknięć, zobaczysz, jak się one ze sobą porównują i który z nich najlepiej pasuje do Twojego sposobu pracy.

Podsumowując:

• Wbudowany element listy „Locales” Webflowautomatycznie generuje opcje rozwijanego menu na podstawie włączonych ustawień regionalnych, dzięki czemu nie trzeba ręcznie tworzyć osobnych linków dla każdego języka.
• W przypadku konfiguracji obejmujących wiele projektów lub subdomen, gdzie wbudowany przełącznik nie sprawdza się, krótki kod JavaScript w postaci przełącznika w niestandardowym kodzie może przekierowywać użytkowników między wersjami językowymi.
• Narzędzia do tłumaczenia oparte na sztucznej inteligencji, takie jak Weglot menu rozwijane, tagi hreflang oraz adresy URL zoptymalizowane pod kątem SEO w ramach jednej konfiguracji i współpracują z Webflow (w przeciwieństwie do Webflow ).
• Dostępność na urządzeniach mobilnych ma znaczenie: należy ustawić obszary dotykowe o wymiarach co najmniej 44x44 pikseli oraz na ekranach dotykowych stosować funkcję „Otwórz po kliknięciu” zamiast „hover”.

Trzy sposoby na dodanie rozwijanego menu języków w Webflow

Zanim wybierzesz metodę, warto wiedzieć, co każda z nich oferuje.

Lista lokalizacji Webflownajlepiej sprawdza się w przypadku zespołów, które już korzystają z Webflow i mają wszystko odpowiednio skonfigurowane. Jeśli jeszcze tego nie zrobiłeś, nakład pracy związany z konfiguracją jest średni. Wymaga to płatnego Webflow z włączoną funkcją lokalizacji i nie jest kompatybilne z Webflow .

Niestandardowy przełącznik oparty na JavaScript nadaje się do konfiguracji obejmujących wiele projektów lub subdomen. Nakład pracy związany z konfiguracją jest niewielki lub średni. Rozwiązanie to jest elastyczne, ale wymaga samodzielnej konserwacji kodu.

Weglot najlepsze Weglot dla zespołów, które poszukują kompleksowego rozwiązania łączącego w sobie wysokiej jakości tłumaczenie, przełącznik języków i konfigurację SEO, nie wymagającego od nich żadnego dodatkowego nakładu pracy. Konfiguracja jest bardzo prosta. Działa z każdym Webflow (w tym z planem E-commerce) i automatycznie dodaje tagi hreflang.

Metoda 1: Stwórz natywny przełącznik ustawień regionalnych przy użyciu listy ustawień regionalnych Webflow

• Skorzystaj z tej metody, jeśli w swoim projekcie włączyłeś już Webflow .

Krok 1: Włącz lokalizację i dodaj ustawienia regionalne

W Webflow przejdź do sekcji Ustawienia > Lokalizacja i kliknij opcję Włącz lokalizację. Wybierz główny zestaw językowy, a następnie kliknij opcję Dodaj zestaw językowy dla każdego języka, który chcesz obsługiwać.

Dla każdego nowego ustawienia regionalnego skonfiguruj jego nazwę wyświetlaną i podkatalog, a następnie włącz opcję „Włącz publikowanie w tym podkatalogu”. Ustawienia regionalne bez włączonej opcji publikowania nie pojawią się później w przełączniku, więc nie pomijaj tego kroku.

Krok 2: Dodaj menu rozwijane do paska nawigacyjnego

Otwórz panel „Dodaj” i przewiń do sekcji „Zaawansowane”. Przeciągnij element „Rozwijane menu” do paska nawigacyjnego. Otwórz okno „Nawigator”, rozwiń element „Rozwijane menu”, aby wyświetlić jego elementy podrzędne, a następnie usuń trzy linki zastępcze (Link 1, Link 2, Link 3). Twoje lokalizacje pojawią się tutaj po skonfigurowaniu ich w następnym kroku.

Krok 3: Dodaj listę ustawień regionalnych

W panelu „Dodaj” > „Zaawansowane” przeciągnij element „Lista ustawień regionalnych” do elementu „Nawigacja” w menu rozwijanym. Lista ustawień regionalnych działa podobnie jak lista kolekcji: automatycznie generuje jedną pozycję dla każdego opublikowanego ustawienia regionalnego, dzięki czemu nie trzeba tworzyć osobnego linku dla każdego języka.

Krok 4: Wybierz zawartość menu rozwijanego

Kliknij element „Link” w pozycji lokalizacji, a następnie otwórz panel ustawień elementu i kliknij fioletową ikonę kropki obok pola „Tekst”. W sekcji „Pozycja na liście lokalizacji” wybierz, jak ma być oznaczona każda opcja: „Lokalizacja (en-US)”, „Język (en)”, „Kraj (US)” lub „Nazwa wyświetlana (angielski (Stany Zjednoczone))”.

Aby w przełączniku rozwijanym wyświetlała się aktualna lokalizacja, wybierz blok tekstowy wewnątrz przełącznika rozwijanego, kliknij fioletową kropkę obok opcji „Tekst”, a następnie w sekcji „Aktualna lokalizacja” wybierz ten sam format etykiety.

Krok 5: Dodaj flagi i dostosuj stronę do urządzeń mobilnych

Jeśli dodałeś obrazy wyświetlania dla poszczególnych ustawień regionalnych, dodaj element „Image” wewnątrz elementu „Locale”, kliknij fioletową kropkę obok elementu „Image”, a następnie w sekcji „Locales List Item” wybierz opcję „Locale Image”. Powtórz tę czynność wewnątrz przełącznika rozwijanego, wybierając kolejno „Current Locale” > „Locale Image”, aby wyświetlić flagę dla aktywnego ustawienia regionalnego.

W przypadku urządzeń mobilnych wybierz menu rozwijane i ustaw opcję Menu > Otwórz po kliknięciu (nie po najechaniu kursorem, ponieważ funkcja ta nie działa na ekranach dotykowych). Upewnij się, że obszary dotykowe mają co najmniej 44 x 44 piksele, aby przełącznik był wygodny w obsłudze.

Metoda 2: Przełącznik oparty na niestandardowym kodzie JavaScript

Z tej metody warto skorzystać, gdy wersje językowe znajdują się w oddzielnych Webflow lub w różnych subdomenach (na przykład example.com i es.example.com) i nie da się ich obsłużyć za pomocą standardowej listy ustawień regionalnych. Będziesz na pewno potrzebować pewnej wiedzy programistycznej lub pomocy programisty z zespołu, który zajmie się tym za Ciebie.

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.

W przypadku trzech lub więcej języków należy rozszerzyć to podejście, dodając atrybut danych do każdego przycisku (na przykład data-language=”fr”) oraz obiekt odnośników, który przyporządkowuje każdy kod do odpowiedniej domeny.

Metoda 3: Automatyczny przełącznik z Weglot

Skorzystaj z tej metody, jeśli nie chcesz zajmować się kodowaniem i chcesz, aby przełącznik języka, tłumaczenia, tagi hreflang oraz adresy URL przyjazne dla SEO zostały skonfigurowane za jednym razem. Jest to szczególnie przydatne w sklepach Webflow , których Webflow nie obsługuje.

Zacznij od założenia Weglot i dodaj domenę swojej Webflow .

Wybierz język źródłowy i docelowy, a następnie skopiujsnippet Weglot snippet wklej go w Webflow w sekcji Ustawienia Webflow > Kod niestandardowy > Kod nagłówka. Opublikuj witrynę, a przełącznik języków pojawi się automatycznie – i to wszystko! Twoje treści zostaną przetłumaczone i wyświetlone w podkatalogach lub subdomenach przyjaznych dla SEO, a tagi hreflang oraz przetłumaczone metadane zostaną obsłużone za Ciebie.

Możesz edytować przełącznik w trybie wizualnym w Weglot : przeciągnij go w dowolne miejsce na stronie, włączaj lub wyłączaj flagi oraz wybierz, czy chcesz wyświetlać nazwy języków, kody języków czy kody krajów.

W przypadku projektów Webflow zestaw Weglot KitWeglot zawiera ponad 20 gotowych do skopiowania przełączników języków, które można od razu wstawić do edytora Designer.

Zespoły korzystające z Webflow wybierają Weglot kilku powodów. Funkcja automatycznego wykrywania treści sprawia, że nowe strony są tłumaczone bez konieczności ręcznego uruchamiania jakichkolwiek czynności. Tłumaczenia są dostępne w osobnym panelu, dzięki czemu tłumacze nie potrzebują licencji Webflow . Rozwiązanie to współpracuje z Webflow , czego nie oferuje Webflow . Ponadto we wszystkich planach dostępna jest wbudowana funkcja wielojęzycznego SEO.

Webflow Weglot – porównanie

Jeśli zastanawiasz się nad dwoma najpopularniejszymi ścieżkami, oto czym się one różnią w kwestiach, które zazwyczaj mają największe znaczenie:

• Konfiguracja przełącznika: W Webflow ręcznie (przeciągnąć menu rozwijane, przeciągnąć listę ustawień regionalnych, przypisać tekst, ustawić styl). Weglot przełącznik automatycznie podczas instalacji.
• Synchronizacja treści między wersjami językowymi: W przypadku standardowej Webflow aktualizacja treści Webflow ręcznego uruchomienia tej funkcji dla każdej strony. Weglot nową treść i tłumaczy ją automatycznie.
• Webflow : Natywna Webflow nie jest kompatybilna ze sklepami Webflow . Weglot .
• Atrybuty hreflang i adresy URL zoptymalizowane pod kątem SEO: Webflow tym automatycznie, jeśli korzystasz z konfiguracji podkatalogów w module Localization, ale nadal musisz samodzielnie skonfigurować nazwy wyświetlane i opcje publikacji dla poszczególnych ustawień regionalnych. Weglot automatycznie Weglot atrybuty hreflang i adresy URL zoptymalizowane pod kątem SEO.
• Dostęp dla zespołu: Webflow wymaga wykupienia płatnych licencji Workspace dla wszystkich osób edytujących tłumaczenia w programie Designer. Weglot tłumaczeniami za pomocą oddzielnego panelu, który jest dostępny we wszystkich planach.

Jak zapewnić globalną dostępność swojej Webflow

Rozwijane menu wyboru języka to niewielki element paska nawigacyjnego, ale stanowi najbardziej widoczny sygnał, że Twoja strona jest przeznaczona dla więcej niż jednej grupy odbiorców. Niezależnie od tego, czy tworzysz je za pomocą listy ustawień regionalnych Webflow, piszesz własny kod, czy też automatyzujesz ten proces za pomocą Weglot, cel pozostaje ten sam: zapewnić odwiedzającym szybki i płynny dostęp do odpowiedniej wersji językowej.

Jeśli chcesz, aby przełącznik języków, tłumaczenia i wielojęzyczne SEO były obsługiwane w ramach jednej konfiguracji (w tym w Webflow ), wypróbuj Weglot przez 14 dni na swojej Webflow .