Webflow bietet bisher noch keine mehrsprachigen Webseiten an. Wir erklären, wie du deine Webflow Seite trotzdem mehrsprachig machen kannst.
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.
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.
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.
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).
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.
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/">
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.
Den folgenden Basis-Code fügen wir in unseren Project-Settings in den «Before </body> tag» ein.
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.
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:
Nun kannst du Buttons einsetzen, um die Sprache zu ändern. Füge den Buttons einfach das jeweilige Custom-Attribute hinzu:
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 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.
Um jegliche Elemente je nach Sprache ein- und auszublenden, kann folgendes Custom-Attribute verwendet werden:
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.).
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.
Im Gegensatz zur Lösung mit Custom Code ist Weglot viel angenehmer in der Einrichtung und Wartung.
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.
Weglot bietet eine gute Anleitung an, mit der du Weglot einrichten kannst. Folge einfach diesem Link.
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.
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.