How-to: Mehrsprachige Websites mit Webflow erstellen

Unser heutiger Blogartikel ist ein How-to, in dem wir Euch zeigen, wie man aus einer einsprachigen Webflow-Website eine mehrsprachige Seite machen kann - und das innerhalb von wenigen Minuten!

Mehrsprachigkeit ist oftmals ein Thema, das einem beim Erstellen der Website Kopfzerbrechen bereitet. Das ist übrigens nicht nur bei Webflow der Fall: Auch wenn beispielsweise TYPO3 und WordPress Mehrsprachigkeit unterstützen, so ist es trotzdem aufwändig. Das liegt unter anderem daran, dass man alles manuell übersetzen muss.

Mehrsprachige Websites in Webflow mit Weglot

Daher zeigen wir Euch heute, wie Ihr Eure Website schnell in eine andere Sprache übersetzen und dafür eine Subdomain anlegen könnt. Dafür nutzen wir Weglot, ein Startup aus Frankreich.

Weglot für mehrsprachige Websites

Um auszuprobieren, ob Weglot für Euch eine gute Lösung ist, müsst Ihr erstmal nichts bezahlen. Geht einfach auf weglot.com auf “Try for free”, legt einen Account an und testet die Mehrsprachigkeits-Funktionalität 10 Tage lang gratis. Was Ihr außerdem zur Hand bzw. in weiteren Tabs offen haben solltet: Euren Webflow-Account und Euren Domain-Anbieter-Account.

Wir zeigen Euch jetzt am Beispiel von collectivetalents.de, wie Ihr Eure Seite ganz schnell übersetzen könnt. Collective Talents gibt es bisher nur auf Deutsch, daher legen wir heute eine englische Variante davon an.

Dafür legen wir in Weglot ein neues Projekt an und tragen unter “Setup” erst einmal die Infos zu Technologie (in unserem Fall Webflow), Domain, Originalsprache und übersetzter Sprache(n) ein.

Neues Projekt in Weglot erstellen
Projekt-Setup in Weglot

Dann wird es im nächsten Punkt, “Your DNS Settings”, ein ganz klein wenig technisch, aber keine Sorge: Ihr braucht dafür kein Informatikstudium!

DNS-Einstellungen Eurer mehrsprachigen Webflow-Website

Es geht um die Einstellungen bezüglich der Domain - der für die übersetzte Seite neu anzulegenden Subdomain, um genau zu sein. Die Domain unserer Beispielseite collectivetalents.de liegt bei Gandi, daher zeigen wir Euch, wie es dort funktioniert. Andere Domain-Anbieter funktionieren aber ähnlich.

Für die Subdomain braucht Ihr einen neuen CNAME. In Gandi legen wir also einen neuen CNAME für “en” an, um die Subdomain en.collectivetalents.de erstellen zu können. Dafür gehen wir in unserem Gandi-Account auf den Sidemenu-Punkt “Domain” und dann im Menü auf “DNS Records”. Dort können wir auf den Button “Add record” klicken und alle benötigten Infos angeben: Type ist CNAME, Name ist das Subdomain-Sprachkürzel, das der Domain vorangestellt werden soll (in unserem Fall also “en” für Englisch) und den Hostname könnt ihr unter dem Punkt “Your DNS Settings” aus Weglot heraus kopieren, indem Ihr einfach auf den Button “Copy DNS” klickt. Dann einfach in Gandi auf “Create” klicken - und schon ist die en-Subdomain so gut wie fertig!

Einstellungen für die mehrsprachige Website in Gandi: Bei Name muss noch "en" eingetragen werden.

Zurück im Weglot-Account klicken wir bei “Your DNS Settings” auf “Check DNS”. Weglot prüft dann, ob alles passt, und erstellt auf der Subdomain die automatische Übersetzung unserer Website. Das DNS-Checken kann ein paar Minuten dauern - man sieht es rödeln.

Custom Code in Webflow für Eure mehrsprachige Website

In der Zwischenzeit können wir uns aber schon mal um den nächsten Punkt kümmern: “Add the Javascript code”. Das klingt auch wieder ein bisschen technisch, erfordert aber keine eigenen Programmierkenntnisse!

Javascript-Code für den Sprachwechsler aus Weglot kopieren

Damit Website-User zwischen der deutschen und der englischen Version der Website hin- und herwechseln können, benötigen wir einen Sprachwechsler. Weglot hat den programmierten Code, also einen Code-Schnipsel, schon fertig, um einen Sprachwechsel-Button unten links auf unserer Website anzuzeigen. Diesen Code-Schnipsel müssen wir nur aus Weglot raus kopieren und bei Webflow in den Custom Code unserer Seite einfügen. Dafür gehen wir in Webflow oben links zu den Projekteinstellungen: Project Settings > Custom Code. Dort fügen wir den Custom Code ein. Wichtig: Der Custom-Code-Schnipsel muss in den Header, also unter “Head Code” eingefügt werden!

Javascript-Code aus Weglot in Webflow als Custom Code in den Header einfügen

Wenn der Custom Code in Webflow gespeichert und veröffentlicht ist und Weglot zwischenzeitlich die DNS-Einstellungen fertig geprüft hat, ist die neue Subdomain auch schon fertig! Das sehen wir daran, dass in unserem Weglot-Account nun “Domain ready” angezeigt wird.

Domain ist ready im Weglot-Account!

Dann müssen wir dort nur noch ganz unten auf “Finish” klicken - und können uns direkt unter en.collectivetalents.de die englische Variante unserer Website anschauen!

Tada!

Fertige englische Variante von Collective Talents mit Sprachwechsler unten links

Manuelle Anpassungen der Übersetzung Eurer mehrsprachigen Webflow-Website

Hierbei handelt es sich natürlich um automatische Übersetzungen, die eventuell noch nicht ganz perfekt sind. Aber das ist kein Problem: In unserem Weglot-Account können wir die automatischen Übersetzungen manuell anpassen. Unter dem Menüpunkt “Translations” können wir die Sprachen und alle Einzelübersetzungen einsehen und die Übersetzungen auch anpassen.

Übersetzungen für die mehrsprachige Website im Weglot-Account

Außerdem gibt es die Option “Glossary”. Dort können wir ein Glossar mit Regeln für einzelne Begriffe anlegen, die wir anders übersetzt haben wollen.

Glossar für die mehrsprachige Website im Weglot-Account

Für besonders gute Übersetzungen können wir natürlich auch einen professionellen Übersetzer engagieren - auch das geht unter “Professional Translations” direkt in unserem Weglot-Account!

Wir finden, Weglot ist eine sehr coole Lösung für mehrsprachige Websites, da man die automatisierte Vorübersetzung sofort bekommt und danach manuell optimieren kann. Was denkt Ihr?

Mehrsprachige Websites mit Webflow: Unser Video-Tutorial

Dieser Blogartikel basiert auf einem Video-Tutorial von Daniel. Wenn Ihr Euch also nochmal von Daniel durch Weglot, Gandi und Webflow führen lassen wollt, findet Ihr das Video hier auf unserem /gebrüderheitz-YouTube-Kanal!

Der Artikel hat Dir gefallen? Dann würden wir uns riesig freuen, wenn Du ihn teilst!

Auf Twitter teilen
Auf Facebook teilen
Auf LinkedIn teilen
Via Email teilen

Du möchtest mehr über unsere Arbeitsweise erfahren?