Übersetzen Sie Ihre Webflow-Website und machen Sie sie mehrsprachig.

Eine Webflow-Website zu übersetzen und sie mehrsprachig zu machen, hat sich für viele Benutzer als kompliziert erwiesen. Die Plattform bietet keine eigene Lösung für die Übersetzung der gesamten Website an, so dass die Benutzer ihre Seiten in der Regel manuell neu erstellen, oder bestehende Seiten in einer übersetzten Sprache duplizieren.

Die Sache hat nur ein Problem: Diese Methoden sind nicht gut für die Suchmaschinenoptimierung (selbst übersetzte Seiten werden entweder schlecht oder gar nicht von den Suchmaschinen indexiert); außerdem erfordert es viel Zeit und Mühe, alles auf dem aktuellsten Stand zu halten.

Wir von Weglot wollten eine einfache Lösung schaffen, die Webflow-Benutzern hilft, ihre Websites zu übersetzen und mehrsprachig zu machen.

Beispiel einer übersetzten Webflow-Website

Bevor Sie es selbst ausprobieren, können Sie sich hier ein Beispiel für eine übersetzte Webflow-Website ansehen und mehr über BigBlue erfahren – ein Unternehmen, das Webflow mit Weglot nutzt!

Im Beispiel haben wir die Sprachauswahl-Schaltfläche als Dropdown in die Hauptmenüleiste integriert. Sie können darauf klicken, um die Sprache von Englisch auf Französisch zu ändern.

Die englische Version finden Sie unter https://www.weglot-translate-wbflow.com
Die französische Version finden Sie unter https://fr.weglot-translate-wbflow.com

Wir haben sogar unser eigenes Webflow UI-Kit mit 14 Schaltflächen zum Ändern der Sprache zum Klonen und 2 Tutorial-Videos erstellt, um Ihnen zu helfen, Webflow mehrsprachig online zu stellen!

Beginnen wir mit der Übersetzung Ihrer Webflow-Website.

10 minutes

1) Erstellen Sie ein Konto auf Weglot.

In diesem Konto können Sie alle Ihre Übersetzungen verwalten und bearbeiten. Erstellen Sie hier Ihr Weglot-Konto.

2) Fügen Sie Ihre neuen Sprachen hinzu.

Sobald Sie ein Konto eingerichtet haben, werden Sie aufgefordert, Ihren Domain-Namen, die Ausgangssprache Ihrer Website sowie die Sprachen, in die Sie Ihre Website übersetzen möchten, hinzuzufügen.

HINWEIS: Dieser Schritt ist nur für Benutzer, die über einen primären Domain-Namen verfügen, nicht für Benutzer, die einen temporären Domain-Namen mit der Endung .webflow.io verwenden. Klicken Sie auf „Javascript-Integration verwenden“, wenn Sie sich noch in der Testphase Ihrer Website befinden und noch keinen Domain-Namen erworben haben. Sie können Ihre Domain später hinzufügen.

Klicken Sie auf „Weiter“.

3) Konfigurieren Sie die Subdomains in den DNS-Einträgen.

Im nächsten Schritt konfigurieren Sie Ihre DNS-Einträge zum Erstellen und Verbinden der Subdomains. Auf diesen Subdomains werden nach der Konfiguration die Übersetzungen Ihrer Webflow-Website angezeigt.

In diesem Beispiels verwenden wir Google Domains als Provider Ihres Domain-Namens, aber der Prozess sieht bei den meisten anderen Host-Providern ähnlich aus. Sollten Sie jedoch Hilfe bei diesem Schritt benötigen, kontaktieren Sie uns bitte unter support@weglot.com.

Bei der Einrichtung Ihres Weglot-Kontos sehen Sie die folgenden DNS-Einträge, die Sie hinzufügen müssen. (Hinweis: Dieses Beispiel bezieht sich auf die Einrichtung in französischer Sprache.)

Melden Sie sich nun im Konto des Providers Ihres Domain-Namens an und gehen Sie zu dem Bereich oder der Seite, auf der Sie den DNS-Datensatz verwalten können. (Bei Google Domains z. B. finden Sie ihn in der linken Menüleiste unter einem Reiter namens „DNS“).

Erstellen Sie neue Einträge im DNS-Bereich Ihres Kontos (in unserem Beispiel im Bereich „Custom resource records“ (Benutzerdefinierte Ressourceneinträge)). Wählen Sie als Eintragstyp „CNAME“ aus und geben Sie im Bereich „Name“ (Wenn Sie Französisch hinzufügen) „fr“ ein, und unter „Data“ (Daten) „websites.weglot.com“.

Speichern Sie die Einträge, gehen Sie zurück zu Ihrem Weglot-Dashboard und klicken Sie auf die grüne Schaltfläche „DNS überprüfen“. Dies kann manchmal bis zu 10 Minuten dauern. Machen Sie sich also keine Sorgen, wenn das grüne Häkchen neben Ihrem DNS-Eintrag noch nicht erschienen ist!

4) Fügen Sie den JavaScript-Code hinzu.

Im letzten Schritt fügen Sie Ihrer Webflow-Website eine Schaltfläche zum Ändern der Sprache hinzu.

• Gehen Sie zu Ihrem Webflow-Adminbereich, klicken Sie auf „Settings“ > „Custom Code“ (der letzte Reiter auf der rechten Seite).
• Gehen Sie zu „Head Code“. Hier sollten Sie ein Feld mit dem Titel „Add code at the end of the <head> tag:“ sehen.

• Kopieren Sie das Ihnen in Ihrem Weglot-Konto zur Verfügung gestellte JavaScript-Snippet und fügen Sie es ein. Es sollte wie das folgende aussehen, aber stellen Sie sicher, dass Sie Ihren tatsächlichen API-Schlüssel einfügen anstelle des Platzhalters „YOUR_API_KEY“.

Klicken Sie auf die grüne Schaltfläche „Änderungen speichern“ und veröffentlichen Sie Ihre Änderungen, indem Sie oben rechts auf die blaue Schaltfläche klicken.

5) Ihre mehrsprachige Webflow-Website ist jetzt online!

Und das war auch schon alles. Wenn Sie auf Ihre Website gehen, werden Sie sehen, dass ganz unten rechts eine Schaltfläche zum Ändern der Sprache hinzugefügt wurde. Warten Sie ein paar Minuten, um sicherzustellen, dass Ihre Subdomains richtig eingerichtet sind, dann können Sie versuchen, die Sprache zu ändern und sich Ihre neu übersetzten Seiten anzusehen.

Bonus: Wir haben einige Webflow-Schaltflächen zum Ändern der Sprache erstellt, die Sie klonen und zu Ihrer Website hinzufügen können! Sie finden sie in unserem Webflow UI-Kit.