Multi Language Website

Bei einer mehrsprachigen Webseite lässt sich meist durch kleine Buttons ganz einfach die Sprache des Contents ändern.

Webflow bietet keine Mehrsprachigkeit

Bis dato hat Webflow weder ein Feature herausgebracht, mit welchem man Webseiten mehrsprachig machen kann, noch haben sie eine solche Funktion angekündigt.
Bis es dazu kommen wird, wird es vermutlich noch eine Weile dauern. Deshalb zeigen wir hier einen work-around, wie man sein Webflow-Projekt trotz des fehlenden Features mehrsprachig machen kann.

Der manuelle Weg

Bei kleineren Websites, welche nach dem GO-Live inhaltlich kaum noch editiert werden müssen, lohnt es sich, für die einzelnen Sprachen einfach manuell einzelne Seiten anzulegen.

1. Die Standardsprache festlegen

Als erstes legen wir im Webflow Projekt die Standard Sprache fest.
Dafür gehen wir in den Project Settings in den Tab General.

Unten können wir dann das Sprachkürzel eingeben. Z.B. de.

2. Seiten in Webflow anlegen

Damit die Sprache auch in der URL zu erkennen ist, erstellt man am besten für jede Sprache einen Ordner in Webflow und fügt da alle Seiten der jeweiligen Sprache ein (ausser Home, da Home keine Unterseite mit /de haben kann).

Tipp:

Es lohnt sich, zuerst alle Seiten in der originalen Sprache anzulegen und erst ganz am Ende die Seiten der anderen Sprachen anzulegen, indem man die Seiten dupliziert und dann die Inhalte austauscht. So muss man allfällige Änderungen an Elementen nicht immer zwei mal machen.

3. SEO Optimierung

Damit Suchmaschinen erkennen, welche Seiten nun zueinander gehören (also quasi Sprach-Paare sind), muss man bei jeder Seite im <head> Bereich einen Code einfügen:

<link rel="alternate" hreflang="x-default" href="https://www.domain.com/de/page/">
<link rel="alternate" hreflang="de" href="https://www.domain.com/de/page/">
<link rel="alternate" hreflang="en" href="https://www.domain.com/en/page/">

Wie wird der Code benutzt?

Immer die Beispiels-URL durch die URL der aktuellen Seite ersetzen
Der Link bei x-default ist immer der deutsche Link
Die Links bei de und en sollen jeweils die Links der entsprechenden Sprache sein
Bei der deutschen und der englischen Seite wird jeweils der identische Code eingefügt

‍

Der Weg mit Custom Code

Die Mehrsprachigkeit mit Custom Code einzurichten ist zwar mühsamer, aufwändiger und fehler-anfälliger, doch man ist nicht von einem externen Dienst abhängig, welcher irgendwann abgeschaltet werden könnte oder andere Probleme bereiten könnte. Kurz gesagt: Custom Code ist sicherer, aber dafür aufwändiger in der Umsetzung und Handhabung. Zusätzlich ist zu erwähnen, dass die hier aufgeführte Lösung auf zwei Sprachen limitiert ist.

Folgend zeigen wir eine Anleitung, wie man eine Webflow-Website mit Custom-Code mehrsprachig macht.

1. Basis Code

Den folgenden Basis-Code fügen wir in unseren Project-Settings in den «Before </body> tag» ein.

<!-- MULTI LANGUAGE CODE --> <script> window.onload = function() { var anchors = document.getElementsByTagName('*'); for(var i = 0; i < anchors.length; i++) { var anchor = anchors[i]; anchor.onclick = function() { code = this.getAttribute('whenClick'); eval(code); } } }
</script> <script>
var DEAFULT_LANG = "de";
var LANG_REG_EXP = /\[\[([a-z]{2})\]\]([^\[]+)/g;
var isStorageEnabled = ! (typeof localStorage == 'undefined');
var user_lang = (navigator.userLanguage||navigator.browserLanguage||navigator.language||DEAFULT_LANG).substr(0,2); var getLangParam = function(){ var arr = /lang=([a-z]{2})/g.exec(location.search); return arr ? arr[1] : null;
} var getLangFromStorage = function(){ return isStorageEnabled ? localStorage.getItem('lang') : undefined;
} var setLang = function(lang){ user_lang = lang; if(isStorageEnabled){ localStorage.setItem('lang', user_lang); } applyLang();
} var applyLang = function(){ globalDict.forEach(function(v){ $(v.elm).html(v.dict[user_lang]); }); // show or hide elements with autolang specifier $('*[autolang]').hide(); $('*[autolang="' + user_lang + '"]').show();
} function textNodesUnder(el){ var n, a=[], walk=document.createTreeWalker(el,NodeFilter.SHOW_ALL,null,false); while(n=walk.nextNode()){ a.push(n); } return a;
} var globalDict = []; $(function(){ user_lang = getLangParam() || getLangFromStorage() || user_lang; if(isStorageEnabled){ localStorage.setItem('lang', user_lang); } // bugfix for IE11 // if multilingual sentence is divided into sevaral text node, restore original text node $("*").each(function(i,v){ if(LANG_REG_EXP.test($(this).text().replace(/\n/g,"")) && $(this).html().indexOf("<") == -1){ $(this).text($(this).text().replace(/\n/g,"")); } var $v = $("#" + $(this).attr("id")); if($v.length > 0 && LANG_REG_EXP.test($v.text().replace(/\n/g,"")) && $v.html().indexOf("<") == -1){ $v.text($v.text().replace(/\n/g,"")); } }) textNodesUnder(document).filter(function(v){ return LANG_REG_EXP.test(v.nodeValue); }).forEach(function(v,i){ var dict = {}; var arr; while((arr = LANG_REG_EXP.exec(v.nodeValue)) != null){ dict[arr[1]] = arr[2]; } globalDict.push({elm:$(v).parent()[0], dict:dict}); }); applyLang();
});
</script> <!-- Language: Französisch --> <script> $(".fra").html(function(i,v) { return "[[fr]]" + v + "[[de]] <b></b>";}); </script> <!-- Language: German --> <script> $(".ger").html(function(i,v) { return "[[de]]" + v + "[[fr]] <b></b>";}); </script>

Kopieren

2. Anwendung

Die Sprache können wir nun ganz einfach mit folgendem Schema im Text definieren.

[[en]]This is English
[[de]]Das ist Deutsch

Um die Sprache zu definieren, muss unbedingt die standardisierte Abkürzung für die jeweiligen Sprachen verwendet werden
Liste der Abkürzungen:
https://www.w3schools.com/tags/ref_language_codes.asp

In der Zeile «var DEAFULT_LANG = "de";» des Basis-Codes wird die Standard-Sprache definiert, die beim Laden der Website benutzt werden soll.
Durch das ändern des Sprach-Codes (de) kann die Standardsprache geändert werden.

3. Sprache selektieren

Um als User die Sprache zu wählen, gibt es zwei Wege:

Per Link:

Im Link kann einfach am Ende der URL folgender Text angehängt werden: ?lang=en (en bestimmt die Sprache).

Per Button:

Um die Sprache per Button wechseln zu können, muss folgender Code in den <Head> Tag kopiert werden:

‍

<script> window.onload = function() { var anchors = document.getElementsByTagName('*'); for(var i = 0; i < anchors.length; i++) { var anchor = anchors[i]; anchor.onclick = function() { code = this.getAttribute('whenClick'); eval(code); } } }
</script>

Kopieren

Nun kannst du Buttons einsetzen, um die Sprache zu ändern. Füge den Buttons einfach das jeweilige Custom-Attribute hinzu:

Custom Attribute der Buttons für die Sprach-Wahl.

4. Sprachen mit CMS benutzen

Um im CMS für die jeweilige Sprache ein einzelnes Input-Feld zu haben, kannst ganz unten im Basis-Code die beiden Sprachen definieren, die du verwenden möchtest.
Jede Sprache hat ihren eigenen Abschnitt im Code.

Die gewünschten Sprachen werden in diesen beiden Abschnitten definiert

Die im Bild farbig markierten Textabschnitte müssen wir nun ändern.
Um also beispielsweise anstatt Französisch, Englisch als Sprache auf der Webseite zu verwenden, müssen wir die pink markierten Stellen ".fra" und [[fr]] in ".eng" und [[en]] ändern.

Die grün markierten Abschnitte müssen in die Sprache sein, die aktuell nicht angezeigt werden soll.

5. Bilder und andere Elemente

Um jegliche Elemente je nach Sprache ein- und auszublenden, kann folgendes Custom-Attribute verwendet werden:

Custom Attribute für Bilder und andere Elemente.

Dieses Attribut fügen wir einfach dem Element hinzu, das wir mit der Sprachauswahl beeinflussen wollen.

Wenn beispielsweise auf der deutschen Seite ein anderes Bild angezeigt werden soll, als auf der englischen Seite, dann fügen wir beiden Bildern dieses Custom Attribut hinzu und wählen jeweils den Sprach-Code für die Sprache des Bildes (en, de, usw.).

6. Kurzer Tipp

Da es manchmal Probleme bei formatierten Texten gibt, ist es oft am einfachsten, wenn man beim Text anstatt
[[de]]Das ist Deutsch
einfach dem Textelement das entsprechende Custom Attribut hinzufügt.

‍

Der Weg mit Weglot

Im Gegensatz zur Lösung mit Custom Code ist Weglot viel angenehmer in der Einrichtung und Wartung.
‍

Wie Weglot funktioniert

Mit Weglot schreibt man alle Texte in der Standard-Sprache in Webflow und fügt dann alle übersetzten Texte in Weglot ein. Weglot verbindet sich dann mit Webflow und speist alle übersetzten Texte ein, wenn diese vom User angefordert werden.

Von Weglot werden die Texte anfangs automatisch in die gewünschten Sprachen übersetzt. Diese Texte kann man aber einfach mit der eigenen Übersetzung überschreiben.

1. Weglot einrichten

Weglot bietet eine gute Anleitung an, mit der du Weglot einrichten kannst. Folge einfach diesem Link.

2. Übersetzungen editieren

Klicke in der Weglot-Navigation auf Translations. Hier kannst du nun zwischen dem Text-Editor und dem Visual-Editor (Frontend-Editor) wechseln.
Im Glossary kannst du automatisierte Regeln für die Übersetzung aufsetzen.

Wenn du bei Translations auf dein Projekt klickst, siehst du nun Links deine Texte von Webflow und rechts die jeweiligen Übersetzungen.
Klicke einfach in das Textfeld, um es zu editieren.

3. Bilder übersetzen

Falls du je nach Sprache unterschiedliche Bilder anzeigen möchtest, kannst du einerseits per Filter-Fuktion nach Medien sortieren und für die Übersetzung eine andere Bild-URL eingeben, oder unten über Add media translation eine neue Übersetzung für ein Bild definieren.

Kopieren

Autor

Martin

Veröffentlicht am

2020

15:02

geändert am

2022

13:27

Atelier

Multi Language Website

Webflow bietet keine Mehrsprachigkeit

Der manuelle Weg

1. Die Standardsprache festlegen

2. Seiten in Webflow anlegen

Tipp:

3. SEO Optimierung

Wie wird der Code benutzt?

Der Weg mit Custom Code

1. Basis Code

2. Anwendung

3. Sprache selektieren

4. Sprachen mit CMS benutzen

5. Bilder und andere Elemente

6. Kurzer Tipp

Der Weg mit Weglot

Wie Weglot funktioniert

1. Weglot einrichten

2. Übersetzungen editieren

3. Bilder übersetzen