Så här lägger du till en rullgardinsmeny för språk i din Webflow

Att skapa en flerspråkig webbplats innebär att ge internationella besökare en tydlig väg till det innehåll de kom för att ta del av. En språkväljare i din Webflow gör just det. Vi går igenom tre sätt att skapa en sådan: Webflow listelement ”Locales”, en egenkodad JavaScript-knapp och en automatiserad konfiguration med Weglot. För varje alternativ får du den exakta klickvägen, en jämförelse mellan dem och information om vilket som passar bäst för ditt arbetssätt.

Sammanfattningsvis:

• Webflowinbyggda listelement ”Locales” skapar automatiskt rullgardinsmenyalternativ utifrån de språk som är aktiverade, så att du slipper skapa en länk för varje språk manuellt.
• För installationer med flera projekt eller underdomäner där den inbyggda växlaren inte passar kan en kort JavaScript-knapp i anpassad kod styra besökarna mellan olika språkversioner.
• AI-översättningsverktyg som Weglot rullgardinsmenyn, hreflang-taggar och SEO-vänliga webbadresser i ett enda steg, och fungerar med Webflow (vilket Webflow inte gör).
• Mobilanvändbarhet är viktigt: ange tryckmål på minst 44x44 pixlar och använd funktionen ”Öppna vid klick” istället för ”hover” på pekskärmar.

Tre sätt att lägga till en språkvalsmeny i Webflow

Innan du väljer en metod är det bra att veta vad de olika alternativen innebär.

Webflowlista över språk är bäst för team som redan använder Webflow och har en välfungerande installation. Om du inte har gjort det ännu är installationsarbetet medelstort. Det kräver ett betalt Webflow med Localization aktiverat, och det är inte kompatibelt med Webflow .

En skräddarsydd JavaScript-knapp passar bra för miljöer med flera projekt eller underdomäner. Installationsarbetet är lätt till medelstort. Den är flexibel, men du måste sköta underhållet av koden.

Weglot det bästa valet för team som vill ha en högkvalitativ översättning, språkväljare och SEO-konfiguration i ett, utan att behöva lägga ner tid på det själva. Det kräver minimalt med arbete att komma igång. Det fungerar med alla Webflow (inklusive E-handel) och lägger automatiskt till hreflang-taggar.

Metod 1: Skapa en inbyggd språkväljare med Webflowspråklista

• Använd den här metoden om du redan har aktiverat Webflow i ditt projekt.

Steg 1: Aktivera lokalisering och lägg till dina språk

I Webflow går du till Inställningar > Lokalisering och klickar på Aktivera lokalisering. Välj ditt primära språk och klicka sedan på Lägg till språk för varje språk du vill stödja.

För varje ny språkversion ska du ange dess visningsnamn och underkatalog samt aktivera alternativet ”Aktivera publicering till denna underkatalog”. Språkversioner där publicering inte är aktiverad kommer inte att visas i din väljare senare, så hoppa inte över det här steget.

Steg 2: Lägg till en rullgardinsmeny i navigeringsfältet

Öppna panelen Lägg till och bläddra till Avancerat. Dra ett rullgardinsmeny-element till din navigeringsfält. Öppna Navigator, expandera rullgardinsmenyn för att visa dess underordnade element och ta bort de tre platshållarlänkarna (Länk 1, Länk 2, Länk 3). Dina språkversioner kommer att visas här när vi har konfigurerat dem i nästa steg.

Steg 3: Lägg till en lista över språk

Från panelen Lägg till > Avancerat drar du ett listelement för språk till navigeringselementet i rullgardinsmenyn. Listan över språk fungerar som en samlingslista: den genererar automatiskt ett objekt per publicerat språk, så du behöver inte skapa en separat länk för varje språk.

Steg 4: Välj vad som ska visas i rullgardinsmenyn

Klicka på länkelementet i ett språkobjekt, öppna sedan panelen Elementinställningar och klicka på den lila prickikonen bredvid textfältet. Under Språklista väljer du hur varje alternativ ska benämnas: Språk (en-US), Språk (en), Land (US) eller Visningsnamn (Engelska (USA)).

För att rullgardinsmenyn ska visa den aktiva språkinställningen väljer du textblocket inuti rullgardinsmenyn, klickar på den lila punkten bredvid ”Text” och väljer samma etikettformat under ”Aktuell språkinställning”.

Steg 5: Lägg till flaggor och finjuster för mobil

Om du har laddat upp visningsbilder för varje språkversion lägger du till ett Image-element inuti Locale-elementet, klickar på den lila punkten bredvid Image och väljer sedan Locale Image under Locales List Item. Upprepa detta inuti Dropdown Toggle genom att använda Current Locale > Locale Image för att visa en flagga för den aktiva språkversionen.

För mobila enheter väljer du rullgardinsmenyn och ställer in Meny > Öppna vid klick (inte vid muspekning, eftersom det inte fungerar på pekskärmar). Se till att tryckmålen är minst 44x44 pixlar så att växlaren är lätt att trycka på.

Metod 2: Anpassad JavaScript-knapp

Använd den här metoden när dina språkversioner finns i separata Webflow eller på olika underdomäner (till exempel example.com och es.example.com), där den inbyggda listan över språkinställningar inte räcker till. Du behöver definitivt ha vissa kodningskunskaper i bagaget, eller en utvecklare i teamet som kan sköta detta åt dig.

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.

Om det finns tre eller fler språk kan du utöka denna metod genom att lägga till ett dataattribut på varje knapp (till exempel data-language=”fr”) och ett uppslagsobjekt som kopplar varje kod till dess domän.

Metod 3: Automatisk språkväxlare med Weglot

Använd den här metoden om du inte vill krångla med kod och vill att språkväljaren, översättningarna, hreflang-taggarna och SEO-vänliga webbadresser ska hanteras i en enda konfiguration. Det är särskilt användbart för Webflow , som Webflow inte stöder.

Börja med att skapa ett Weglot och lägg till domänen för din Webflow .

Välj käll- och målspråk, kopiera sedansnippet klistra in den i Webflow > Anpassad kod > Head-kod. Publicera din webbplats så visas en språkväljare automatiskt – och det är allt! Ditt innehåll översätts och visas i SEO-vänliga underkataloger eller underdomäner, och hreflang-taggar samt översatta metadata hanteras åt dig.

Du kan redigera språkväljaren direkt i Weglot : dra den till valfri plats på sidan, aktivera eller inaktivera flaggor och välja om du vill visa språknamn, språkkoder eller landskoder.

För Webflow designer innehåller Weglot Kit över 20 kopierbara språkväljare som är redo att läggas in i Designern.

Team som arbetar i Webflow väljer Webflow Weglot flera skäl. Tack vare automatisk innehållsdetektering översätts nya sidor utan att man behöver göra något manuellt. Översättningarna hanteras i en separat kontrollpanel, vilket innebär att översättarna inte behöver ha tillgång till Webflow . Tjänsten fungerar med Webflow , vilket inte Webflow gör. Dessutom ingår flerspråkig SEO i alla abonnemang.

Webflow . Weglot – en jämförelse

Om du funderar på de två vanligaste vägarna, så här skiljer de sig åt när det gäller de aspekter som oftast är viktigast:

• Inställning av språkväljare: I Webflow manuellt (dra och släpp i rullgardinsmenyn, dra och släpp i listan över språk, koppla text, formatera). Weglot språkväljaren automatiskt vid installationen.
• Synkronisering av innehåll mellan olika språkversioner: I den vanliga versionen av Webflow manuellt starta processen för varje sida när du uppdaterar innehållet. Weglot nytt innehåll och översätter det automatiskt.
• Webflow : Webflow inbyggda Webflow är inte kompatibel med Webflow butiker. Weglot .
• Hreflang och SEO-vänliga webbadresser: Webflow detta automatiskt om du använder Localizations inställning för underkataloger, men du måste fortfarande konfigurera visningsnamn och publicering för varje språkversion. Weglot automatiskt Weglot hreflang-taggar och SEO-vänliga webbadresser.
• Teamtillgång: Webflow kräver betalda Workspace-licenser för alla som redigerar översättningar i Designer. Weglot översättningar via en separat kontrollpanel som ingår i alla abonnemang.

Gör din Webflow tillgänglig över hela världen

En språkväljare är en liten del av din navigeringsfält, men den är det tydligaste tecknet på att din webbplats riktar sig till flera olika målgrupper. Oavsett om du skapar den med hjälp av Webflowspråklista, skriver en egen kod eller automatiserar den med Weglot, är målet detsamma: att snabbt och smidigt leda besökarna till rätt språk.

Om du vill hantera språkväljaren, översättningarna och den flerspråkiga SEO-optimeringen i ett enda verktyg (inklusive Webflow ), kan du prova Weglot i 14 dagar på din Webflow .