Webflow - Integration / Einrichtung

Video-Anleitung: Möchten Sie eine schnelle und einfache Erklärung, wie Sie Ihre Webflow-Site mit Weglot einrichten? Dann schauen Sie sich unser Video-Anleitung wie Sie Weglot in Ihre Webflow-Website integrieren können!

1. Registrieren Sie sich für ein Weglot-Konto

In diesem Konto können Sie alle Ihre Übersetzungen einsehen und verwalten. Erstellen Sie einfach ein Weglot-Konto hier.

2. Erstellen Sie Ihr Projekt (ca. 1 Minute)

Sobald Sie Ihr Konto eingerichtet haben, müssen Sie Ihr Projekt erstellen. Sie müssen ihm einen Namen geben und die Technologie Ihrer Website auswählen, nämlich "Webflow":

3. Geben Sie die gewünschten Sprachen ein (~ 1 Minute)

In diesem Schritt benötigen Sie die gewünschten Sprachen.

Die Originalsprache ist die Sprache Ihrer ursprünglichen Website und die übersetzte(n) Sprache(n) sind die Sprachen, in die Sie Ihre Website übersetzen möchten.

Geben Sie die Details der Website ein

**Fügen Sie NICHT IHREN TEMPORÄREN Domainnamen mit der Endung .webflow.io hinzu.

HINWEIS: Wenn Sie noch keinen eigenen Domainnamen erworben haben und nur eine .webflow.io-Domain besitzen, klicken Sie auf "Weglot mit Ihrer Website verbinden", wenn Sie sich noch in der Testphase Ihrer Website befinden. Sie können Ihren Domainnamen später hinzufügen.

Klicken Sie auf die Schaltfläche "Weiter", um zum nächsten Schritt zu gelangen.

4. Konfigurieren Sie die Subdomains in den DNS-Einträgen (~ 5 Minuten)

In diesem Schritt konfigurieren Sie Ihren DNS für die Erstellung und Verbindung der Subdomains.

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 auf Englisch):

Für die Zwecke dieses Beispiels verwenden wir Google Domains als unseren Domainnamen-Anbieter - die meisten anderen Host-Anbieter sehen ähnlich aus wie dieser. Aber bitte kontaktieren Sie uns unter support@weglot.com, wenn Sie Hilfe bei diesem Schritt benötigen.

Rufen Sie nun das Konto Ihres Domain-Namen-Anbieters auf und gehen Sie zu dem Bereich oder der Seite, auf der Sie den DNS verwalten können (bei Google Domains finden Sie dies z. B. unter einer Registerkarte auf der linken Menüleiste namens DNS).

In diesem Stadium sollten Sie in der Lage sein, neue Einträge im DNS-Abschnitt auf Ihrem Bildschirm zu erstellen (in unserem Beispiel im Abschnitt "Benutzerdefinierte Ressourceneinträge"). Wählen Sie CNAME als Typ des Eintrags.

Geben Sie " en"(für diejenigen, die Englisch hinzufügen) unter dem Abschnitt "Name" und den von Weglot bereitgestellten Wert unter dem Abschnitt "Daten" ein.

Wenn Sie Probleme haben, herauszufinden, wo Sie Ihre DNS-Einträge finden oder wie Sie sie aktualisieren können, können wir Ihnen helfen. Schicken Sie uns einfach eine E-Mail an support@weglot.com.

Wenn Sie die Einträge hinzugefügt und gespeichert haben, gehen Sie zurück zur Weglot-Seite. Sie können auf " Check DNS" klicken und ein grünes Häkchen sollte erscheinen: Das bedeutet, dass alles erfolgreich eingerichtet wurde (dies kann manchmal ein paar Minuten oder sogar 10 Minuten dauern, also seien Sie nicht beunruhigt, wenn das grüne Häkchen noch nicht neben Ihrem DNS-Eintrag erscheint). Klicken Sie auf"Weiter".

5. Installieren Sie die Weglot-Bibliothek (~ 3 Minuten)

In diesem letzten Schritt fügen Sie Ihrer Webflow-Website die Schaltfläche zur Sprachumschaltung hinzu und passen einige Einstellungen der App an.

Es ist schnell und einfach, Sie müssen nur die folgenden Schritte befolgen (auch im GIF unten gezeigt).

Gehen Sie zu Ihrem Webflow-Dashboard und klicken Sie dann auf Ihrer Website auf die 3 Punkte und dann auf "Einstellungen".
Wählen Sie auf der Seite "Einstellungen" die Option "Benutzerdefinierter Code" (die letzte Registerkarte auf der rechten Seite).
Go to “Head Code”, and you should see a field that’s titled “Add code at the end of the <head> tag:”
Kopieren Sie das JavaScript-Snippet, das Sie in Ihrem Weglot-Konto erhalten haben, und fügen Sie es ein. Er wird wie der folgende aussehen, aber stellen Sie sicher, dass Sie Ihren tatsächlichen API-Schlüssel anstelle des Platzhalters "YOUR_API_KEY" einfügen:

<script type="text/javascript" src="https://cdn.weglot.com/weglot.min.js"></script>
<script>
    Weglot.initialize({
        api_key: 'YOUR_API_KEY',
    });
</script>

Klicken Sie auf die grüne Schaltfläche "Änderungen speichern".
Veröffentlichen Sie Ihre Änderungen, indem Sie auf die blaue Schaltfläche ganz oben rechts klicken.

Sie sind fertig!

Geschafft! Rufen Sie Ihre Website auf, und Sie werden sehen, dass die Schaltfläche zum Wechseln der Sprache ganz unten rechts erscheint. Warten Sie ein paar Minuten, um sicherzustellen, dass Ihre Subdomains richtig eingerichtet sind. Dann können Sie versuchen, die Sprache zu ändern, und Sie werden Ihre übersetzten Seiten sehen.

Bonus: Wir haben einige Webflow-Sprachumschalter erstellt, die Sie klonen und zu Ihrer Website hinzufügen können! Schauen Sie sich diese in unserem Webflow UI Kit von Finsweet und in Weglot Components von Digidop an.