So übersetzen Sie Ihre Webflow-Website mit KI

Webflow erleichtert das Entwerfen einer Website und deren Veröffentlichung mit einem Klick. Die Übersetzung dieser Website ist jedoch der Punkt, an dem die Dinge langsamer werden.

Die gängigen Optionen verlangen, dass Sie Seiten in Sprachordner duplizieren, Text in und aus einem Übersetzungstool kopieren oder jedes Gebietsschema manuell im Designer einrichten. Das ist viel Wartungsaufwand für eine Website, die Sie für geringen Wartungsaufwand erstellt haben.

KI-Übersetzung erledigt den Großteil dieser Arbeit. Sie fügen eine Codezeile zu Webflow hinzu, wählen Ihre Sprachen aus und Besucher können Ihre Website in ihrer eigenen Sprache lesen. Und das alles ist in wenigen Minuten mit Universally möglich.

In diesem Leitfaden zeige ich Ihnen, wie Sie Ihre Webflow-Website mit KI übersetzen.

Warum Ihre Webflow-Website übersetzen?

Eine gut gestaltete Seite kann ihre Aufgabe nicht erfüllen, wenn der Besucher den Inhalt nicht lesen kann. Wenn Sie Traffic aus anderen Ländern erhalten, ist die Übersetzung das, was diese Besuche in Leser und Kunden verwandelt.

Das Problem ist, dass die üblichen Methoden dafür in Webflow mit zusätzlicher Arbeit verbunden sind:

• Das Duplizieren von Seiten verdoppelt Ihren Wartungsaufwand. Bei der Ordner-Methode muss jede Bearbeitung einer englischen Seite in jedem Sprachordner wiederholt werden.
• Die integrierte Option erhöht den Einrichtungsaufwand und die Kosten. Webflow Localize ist ein kostenpflichtiges Add-on, und Sie richten jede Locale im Designer ein und übersetzen sie.
• Kunden-Websites erfordern eine schnelle Abwicklung. Wenn Sie Webflow-Websites für Kunden erstellen, sollte das Hinzufügen einer Sprache keine Umstrukturierung des Projekts bedeuten.

Ein KI-Übersetzungstool, das außerhalb Ihres Webflow-Projekts sitzt, vermeidet alle drei Probleme, und das ist der Ansatz, den ich in diesem Leitfaden verwenden werde.

Übersetzen Sie Ihre Webflow-Website mit Universally

Universally ist ein KI-Website-Übersetzungstool, das Ihre Website mit kontextbezogener KI in über 110 Sprachen übersetzt. In Webflow wird es mit einem einzigen Skript-Tag im globalen Head-Code Ihrer Website verbunden. Es gibt kein zu installierendes Plugin und keine zu wartenden doppelten Seiten.

Das Beste daran ist, dass die Übersetzungen im Browser des Besuchers auf denselben Seiten und unter denselben URLs angewendet werden, sodass Ihr Webflow-Projekt genau so bleibt, wie Sie es erstellt haben.

Universally ist nicht auf Webflow beschränkt. Es funktioniert auch mit WordPress, Framer, Squarespace, Lovable und mehreren anderen Plattformen. Die vollständige Liste finden Sie auf der Seite Unterstützte Plattformen.

Hier ist, was Sie auf einer Webflow-Website erhalten:

• Ein Skript-Tag: Sie fügen eine einzelne Zeile in den Head-Code von Webflow ein. Nichts anderes in Ihrem Projekt ändert sich.
• Ihr Design bleibt intakt: Layouts, Interaktionen und URLs bleiben in jeder Sprache gleich.
• Integrierter Sprachumschalter: Er erscheint in der unteren rechten Ecke mit Flaggen und Sprachnamen, und Erstbesucher werden ihrer Browsersprache zugeordnet.
• Mehr als nur Text: Seitentitel, Meta-Inhalte und Attribute wie Alt-Texte, Platzhalter und Aria-Labels werden ebenfalls übersetzt.
• Sprachweise Veröffentlichung: Jede Sprache bleibt für Besucher verborgen, bis Sie sie live schalten.
• Glossar und manuelle Bearbeitung: In kostenpflichtigen Tarifen können Sie Markentermini sperren und jede übersetzte Zeile korrigieren.

Universally bietet einen kostenlosen Plan mit einer Website, einer Sprache und 2.000 übersetzten Wörtern. Das reicht aus, um es auf einigen Seiten zu testen. Bezahlte Pläne beginnen bei 7,50 $/Monat (jährlich abgerechnet) und beinhalten mehr Wörter und Sprachen sowie Glossarregeln und den visuellen Editor.

Schritt 1: Erstellen Sie ein Webflow-Projekt in Universally

Um loszulegen, melden Sie sich für ein kostenloses Konto auf der Universally-Website an. Sobald Sie sich im Dashboard befinden, klicken Sie auf + Projekt hinzufügen.

Als Nächstes müssen Sie die Plattform auswählen, auf der sich Ihre Website befindet.

Wählen Sie unter „Technologie auswählen“ die Option Webflow.

Geben Sie als Nächstes die Domain Ihrer Website ein, z. B. example.com, und geben Sie Ihrem Projekt einen Projektnamen.

Bestätigen Sie dann die Quellsprache, d. h. die Sprache, in der Ihre Website verfasst ist. Standardmäßig ist dies Englisch (Amerikanisch). Überprüfen Sie dies sorgfältig, da eine falsche Quellsprache zu schlechten Übersetzungen ohne Fehlermeldung führt.

Klicken Sie einfach auf Weiter, wenn Sie fertig sind.

Schritt 2: Fügen Sie das Universally-Skript zu Webflow hinzu

Universally zeigt Ihnen nun ein Skript-Tag mit dem eindeutigen Schlüssel Ihres Projekts an. Es sieht so aus:

<script src="https://scripts.universally.com/p/YOUR_PUBLIC_KEY/s.js" async></script>

Klicke einfach auf Zeile kopieren.

Als Nächstes können Sie zu Ihrem Webflow-Projekt wechseln, das Sie übersetzen möchten.

Klicken Sie einfach auf das Webflow-Symbol in der oberen linken Ecke und gehen Sie zu Website-Einstellungen.

Danach können Sie zu Benutzerdefinierter Code » Head-Code gehen und das Skript einfügen.

Stellen Sie sicher, dass Sie das websiteweite Feld für den Head-Code verwenden und nicht die benutzerdefinierten Code-Einstellungen einer einzelnen Seite. Auf diese Weise wird das Skript auf jeder Seite Ihrer Website geladen.

Klicken Sie von hier aus auf Änderungen speichern und veröffentlichen Sie diese Änderungen dann auf Ihrer Website.

Hinweis: Benutzerdefinierter Code in Webflow erfordert einen aktiven Website-Plan oder einen Core-, Growth-, Agency- oder Freelancer-Workspace-Plan. Wenn Sie das Feld für den Head-Code nicht sehen, überprüfen Sie zuerst Ihren Plan.

Wenn das erledigt ist, gehen Sie zurück zu Universally und klicken Sie auf Verbindung prüfen.

Universally lädt Ihre Homepage und bestätigt, dass das Skript vorhanden ist.

Profi-Tipp: Wenn die Prüfung fehlschlägt, stellen Sie sicher, dass Sie nach dem Speichern veröffentlicht haben. Nicht veröffentlichte Änderungen in Webflow enthalten das Skript nicht, und die Prüfung betrachtet nur Ihre Homepage.

Schritt 3: Wählen Sie Ihre Sprachen und gehen Sie live

Sobald die Verbindung bestätigt ist, können Sie die Sprachen auswählen, die Sie anbieten möchten.

Klicken Sie einfach auf Sprache hinzufügen.

Klicken Sie als Nächstes auf das Dropdown-Menü und wählen Sie aus über 110 Sprachen.

Nachdem Sie eine Sprache ausgewählt haben, können Sie eine Region und ein URL-Format auswählen.

Wenn Sie fertig sind, klicken Sie einfach auf Sprache hinzufügen.

Das war's! Ihre Webflow-Website wird nun automatisch in die von Ihnen hinzugefügten Sprachen übersetzt.

Um eine Sprache zu deaktivieren, können Sie den Schalter Live daneben ausschalten.

Das ist praktisch, wenn Sie an einer Kunden-Website arbeiten. Sie können das Skript frühzeitig installieren, die übersetzten Seiten überprüfen und jede Sprache live schalten, sobald der Kunde zustimmt. Wenn ein Markt noch nicht bereit ist, schalten Sie dessen Schalter aus, und die gespeicherten Übersetzungen bleiben erhalten.

Wenn Sie weitere Sprachen hinzufügen möchten, wiederholen Sie einfach diesen Schritt.

Schritt 4: Testen Sie Ihre übersetzte Webflow-Website

Um zu überprüfen, ob alles funktioniert, öffnen Sie Ihre veröffentlichte Website in einem privaten Browserfenster, damit Sie keine zwischengespeicherte Version sehen.

Sie sollten den Sprachumschalter unten rechts sehen. Wählen Sie Ihre neue Sprache aus, und der Seiteninhalt wird umgeschaltet.

Der erste Ladevorgang in einer neuen Sprache kann einen Moment dauern, während die Seite übersetzt wird. Danach werden Übersetzungen zwischengespeichert, sodass wiederholte Besuche ohne Wartezeit geladen werden.

Bonus: Verfeinern Sie Ihre Webflow-Übersetzungen

KI-Übersetzung bringt Sie weit. Diese drei Einstellungen helfen beim Rest.

• Bearbeiten Sie jede übersetzte Zeile. Auf einem kostenpflichtigen Universally-Tarif öffnen Sie den visuellen Editor aus Ihrer Projekt-Seitenleiste, filtern nach Sprache und klicken auf den Text, den Sie ändern möchten. Dies ist wirklich nützlich, wenn Sie sicherstellen möchten, dass Ihre Website visuell beeindruckend aussieht und gleichzeitig der übersetzte Inhalt erhalten bleibt.
• Halten Sie Markentermini konsistent. Glossarregeln weisen die KI an, Wörter wie Ihre Marken- oder Produktnamen nicht zu übersetzen oder einen Begriff immer auf eine bestimmte Weise zu übersetzen. Unser Leitfaden zur Einrichtung eines Übersetzungsglossars führt Sie durch die einzelnen Schritte. Die Regeln funktionieren auf Webflow genauso.
• Lassen Sie einige Inhalte unübersetzt. Gehen Sie zu Übersetzungsregeln und fügen Sie die Elemente, die Sie überspringen möchten, in das Feld CSS-Selektoren ausschließen ein, einen pro Zeile, z. B. .pricing-table oder #code-examples. Sie können auch translate="no" zu einem Element in Webflow hinzufügen. Beachten Sie, dass die Einstellung Seiten ausschließen für Webflow-Websites nicht gilt, daher sind CSS-Selektoren der richtige Weg. Weitere Details finden Sie in unserer Dokumentation zu CSS-Selektoren einschließen und ausschließen.

FAQs zum Übersetzen einer Webflow-Website

1. Benötige ich einen kostenpflichtigen Webflow-Plan, um Universally zu nutzen?

Universally benötigt die benutzerdefinierte Codefunktion von Webflow, die einen aktiven Site-Plan oder einen Core-, Growth-, Agency- oder Freelancer-Workspace-Plan erfordert. Die Universally-Seite kann mit dem kostenlosen Plan beginnen, der 1 Website, 1 Sprache und 2.000 übersetzte Wörter abdeckt.

2. Worin unterscheidet sich Universally von Webflow Localize?

Webflow Localize ist die integrierte Lokalisierungsfunktion von Webflow, bei der Sie jedes Gebietsschema einrichten und dessen Inhalt im Designer verwalten. Universally arbeitet von außerhalb Ihres Projekts mit einem einzigen Skript-Tag und übersetzt Seiten bei Bedarf mit KI.

3. Beeinflusst die Übersetzung meiner Webflow-Website meine SEO?

Ihre bestehenden Rankings bleiben gleich, da Ihre URLs und Quellseiten unverändert bleiben. Suchmaschinen sehen weiterhin Ihren Inhalt in der Originalsprache. Das bedeutet auch, dass die übersetzten Versionen nicht separat indiziert werden und Universally keine hreflang-Tags auf Webflow-Websites hinzufügt.

4. Übersetzt Universally Webflow CMS-Inhalte?

Universally übersetzt den Text in der HTML Ihrer veröffentlichten Seite, einschließlich CMS-Inhalten, die Webflow in die Seite rendert. Text, den JavaScript nach dem Laden der Seite hinzufügt, wie z. B. einige Widgets von Drittanbietern, bleibt möglicherweise in der Originalsprache.

5. Kann ich die KI-Übersetzungen bearbeiten?

Jede Übersetzung kann auf einem kostenpflichtigen Plan bearbeitet werden. Öffnen Sie den Bildschirm Übersetzungen in Ihrem Projekt, suchen Sie die Zeile und klicken Sie darauf, um sie zu bearbeiten. Ihre Änderung ersetzt die KI-Version und wird als Verifiziert markiert. Universally speichert die letzten 50 Versionen jeder Übersetzung, sodass Sie eine frühere wiederherstellen können.

6. Was wird auf einer Webflow-Seite nicht Universally übersetzt?

Einige Dinge bleiben in Ihrer Originalsprache. Dazu gehören passwortgeschützte Seiten, Text, der nach dem Laden der Seite per JavaScript hinzugefügt wird, und strukturierte JSON-LD-Daten. Außerdem gibt es eine Obergrenze von etwa 2.000 Textzeichenfolgen pro Seite, die die meisten Seiten bei weitem nicht erreichen.

Sobald das Skript integriert ist und Ihre erste Sprache live geschaltet ist, dauert die Hinzufügung eines weiteren Marktes nur ein paar Klicks.

Ich hoffe, dieser Artikel hat Ihnen geholfen zu lernen, wie Sie Ihre Webflow-Website mit KI übersetzen können. Möglicherweise möchten Sie auch unseren Leitfaden zum Einrichten einer Übersetzungs-Glossars und zum Übersetzen von WooCommerce-Checkout-Seiten lesen.

Beginnen Sie mit der kostenlosen Übersetzung Ihrer Webflow-Website.