Slik legger du til en rullegardinmeny for språk i Webflow Navigasjonsfelt

Å lage et flerspråklig nettsted betyr å gi internasjonale besøkende en tydelig vei til innholdet de kom for å finne. En rullegardinmeny for språk i Webflow navbar gjør nettopp det. Vi vil veilede deg gjennom tre måter å bygge en på: Webflow s Locales-listeelement , en tilpasset JavaScript-veksler og et automatisert oppsett med Weglot . For hver av dem får du den nøyaktige klikkbanen, hvordan de sammenlignes, og hvilken som passer til måten du allerede jobber på.

Oppsummert:

• Webflow s innebygde språklisteelement genererer automatisk rullegardinalternativer fra de aktiverte språkinnstillingene, slik at du ikke trenger å opprette en lenke per språk manuelt.
• For oppsett med flere prosjekter eller underdomener der den innebygde bryteren ikke passer, kan en kort JavaScript-bryter i tilpasset kode rute besøkende mellom språkversjoner.
• AI-oversettelsesverktøy som Weglot generere rullegardinmenyen, hreflang-tagger og SEO-vennlige URL-er i ett oppsett, og jobbe med Webflow E-handel (som Webflow Lokalisering gjør ikke det).
• Mobiltilgjengelighet er viktig: angi berøringsflater på minst 44 x 44 piksler og bruk Åpne ved klikk i stedet for å holde musepekeren over på berøringsskjermer.

Tre måter å legge til en språkrullegardinmeny på Webflow

Før du velger en metode, er det nyttig å vite hva hver enkelt gir deg.

Webflow Lokalitetslisten er best for team som allerede bruker Webflow Lokalisering og er komfortabelt satt opp. Hvis du ikke har gjort det ennå, er oppsettsarbeidet middels. Det krever en betalt Webflow plan med lokalisering aktivert, og den er ikke kompatibel med Webflow Netthandel.

En tilpasset JavaScript-bryter passer for oppsett med flere prosjekter eller underdomener. Oppsettsarbeidet er lavt til middels. Det er fleksibelt, men du må vedlikeholde koden.

Weglot er best for team som ønsker et enkelt og greit oversettelses-, switch- og SEO-oppsett av høy kvalitet i ett. Oppsettsarbeidet er lavt. Det fungerer med alle Webflow plan (inkludert e-handel) og legger til hreflang-tagger automatisk.

Metode 1: Bygg en native språkbryter med Webflow Liste over lokale innstillinger

• Bruk denne metoden hvis du allerede har aktivert Webflow Lokalisering på prosjektet ditt.

Trinn 1: Aktiver lokalisering og legg til dine lokale innstillinger

I Webflow Designer, gå til Innstillinger > Lokalisering og klikk på Aktiver lokalisering . Velg din primære språkinnstilling, og klikk deretter på Legg til språkinnstilling for hvert språk du vil støtte.

For hver nye språkinnstillinger konfigurerer du visningsnavnet og underkatalogen, og slår av for Aktiver publisering til denne underkatalogen. Språkinnstillinger uten aktivert publisering vises ikke i veksleren din senere, så ikke hopp over dette trinnet.

Trinn 2: Slipp en rullegardinmeny i navigasjonsfeltet

Åpne Legg til-panelet og bla til Avansert. Dra et rullegardinelement inn i navigasjonsfeltet. Åpne navigatøren, utvid rullegardinmenyen for å vise underelementene, og slett de tre plassholderlenkene (Lenke 1, Lenke 2, Lenke 3). Språkinnstillingene dine vises her etter at vi har konfigurert dem i neste trinn.

Trinn 3: Legg til en liste over lokale innstillinger

Fra Legg til-panelet > Avansert drar du et element for en liste over språkinnstillinger til navigasjonselementet i rullegardinmenyen. Listen over språkinnstillinger fungerer som en samlingsliste: den genererer automatisk ett element per publiserte språkinnstillinger, slik at du ikke oppretter en separat lenke for hvert språk.

Trinn 4: Velg hva rullegardinmenyen viser

Klikk på Lenke-elementet i et språkelement, åpne deretter Elementinnstillinger-panelet og klikk på det lilla prikkikonet ved siden av Tekst-feltet. Under Språkelement på liste over språk velger du hvordan hvert alternativ skal merkes: Språk (en-US), Språk (en), Land (US) eller Visningsnavn (engelsk (USA)).

For å få rullegardinmenyen til å vise den aktive språkinnstillingen, velg tekstblokken i rullegardinmenyen, klikk på den lilla prikken ved siden av tekst, og velg samme etikettformat under gjeldende språkinnstilling.

Trinn 5: Legg til flagg og poler for mobil

Hvis du har lastet opp visningsbilder for hver språkinnstilling, legger du til et Bilde-element i Språkinnstilling-elementet, klikker på den lilla prikken ved siden av Bilde, og velger Språkinnstilling-bilde under Språkinnstilling-listeelement. Gjenta i rullegardinmenyen ved å bruke Gjeldende språkinnstilling > Språkinnstilling-bilde for å vise et flagg på den aktive språkinnstillingen.

For mobil, velg rullegardinmenyen og angi Meny > Åpne ved klikk (ikke hold musepekeren over, siden det ikke fungerer på berøringsskjermer). Bekreft at berøringsflatene er minst 44 x 44 piksler, slik at bryteren er komfortabelt berørbar.

Metode 2: Tilpasset kodet JavaScript-bryter

Bruk denne metoden når språkversjonene deres ligger i separate Webflow prosjekter eller på forskjellige underdomener (for eksempel example.com og es.example.com), der den innebygde språklisten ikke passer inn. Du trenger definitivt litt kodeekspertise i baklommen, eller en utvikler i teamet som kan gjøre dette for deg.

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.

For tre eller flere språk, utvid denne tilnærmingen med et dataattributt på hver knapp (for eksempel data-language=”fr”) og et oppslagsobjekt som tilordner hver kode til domenet.

Metode 3: Automatisert bryter med Weglot

Bruk denne metoden hvis du ikke vil håndtere kode og ønsker at språkvelgeren, oversettelser, hreflang-tagger og SEO-vennlige URL-er skal håndteres i ett enkelt oppsett. Den er spesielt nyttig på Webflow Nettbutikker, som Webflow Lokalisering støttes ikke.

Start med å opprette en Weglot konto og legg til din Webflow nettstedsdomene.

Velg kilde- og målspråk, og kopier deretter Weglot snippet og lime den inn i Webflow Nettstedinnstillinger > Tilpasset kode > Overskriftskode. Publiser nettstedet ditt, så vises en språkvelger automatisk, og det er det! Innholdet ditt oversettes og vises under SEO-vennlige underkataloger eller underdomener, med hreflang-tagger og oversatte metadata håndtert for deg.

Du kan redigere bryteren visuelt fra Weglot Dashbord: dra det hvor som helst på siden, slå flagg av eller på, og velg om du vil vise språknavn, språkkoder eller landskoder.

Til Webflow -spesifikke design, inkluderer Weglot UI Kit 20+ klonbare språkvelgere klare til å slippes inn i Designer.

Lag på Webflow vanligvis plukke Weglot av flere grunner. Automatisk innholdsgjenkjenning betyr at nye sider oversettes uten at noe utløses manuelt. Oversettelser ligger i et separat dashbord, slik at oversettere ikke trenger Webflow Arbeidsplassseter. Det fungerer med Webflow E-handel, som Webflow Lokalisering gjør ikke det. Og flerspråklig SEO er innebygd i alle abonnementer.

Innfødt Webflow mot Weglot , Side om side

Hvis du veier de to vanligste veiene, er det slik de skiller seg ut på de punktene som pleier å være viktigst:

• Bryteroppsett: Native Webflow er manuelt (dra rullegardinmenyen, dra listen over nasjonale innstillinger, bind tekst, stil). Weglot genererer bryteren automatisk ved installasjon.
• Innholdssynkronisering på tvers av språk: Native Webflow krever en manuell utløser per side når du oppdaterer innhold. Weglot oppdager nytt innhold og oversetter det automatisk.
• Webflow Netthandel: Native Webflow Lokalisering er ikke kompatibel med Webflow Nettbutikker. Weglot er.
• Hreflang og SEO-URL-er: Native Webflow håndterer disse for deg hvis du bruker lokaliseringens underkatalogoppsett, men du vil fortsatt konfigurere visningsnavn og publisering per språk. Weglot injiserer hreflang-tagger og SEO-vennlige URL-er automatisk.
• Teamtilgang: Webflow Lokalisering krever betalte arbeidsplassplasser for alle som redigerer oversettelser i Designer. Weglot administrerer oversettelser i et separat dashbord som er inkludert i alle planer.

Å lage din Webflow Nettsted globalt tilgjengelig

En rullegardinmeny for språk er en liten del av navigasjonsfeltet ditt, men det er det mest synlige signalet på at nettstedet ditt er bygget for mer enn én målgruppe. Enten du bygger det med Webflow s språkliste, skripte den selv, eller automatisere den med Weglot , målet er det samme: få besøkende til riktig språk raskt, uten friksjon.

Hvis du vil ha bryteren, oversettelsene og den flerspråklige SEO-en håndtert i ett oppsett (inkludert Webflow Netthandel), prøv Weglot gratis i 14 dager på din Webflow nettsted.