Skalieren Sie Ihre visuelle Entwicklung global ohne Backend-Code.
Webflow ist die führende Plattform für visuelle Entwicklung, aber native Lokalisierung kann komplex und teuer sein. MultiLipi integriert sich direkt in die Architektur von Webflow über eine einzige Skript-Injektion und verwandelt Ihre statischen Seiten und CMS-Sammlungen sofort in eine mehrsprachige Infrastruktur mit vollständiger SEO-Indizierung.
Diese Anleitung beschreibt den Integrationsprozess mithilfe von Webflows Benutzerdefinierter Code Funktion.
1. Voraussetzungen für die Bereitstellung
Stellen Sie vor Beginn sicher, dass Ihre Umgebung die Anforderungen erfüllt:
Webflow Website-Plan
Sie müssen sich auf einem Basis-Website-Plan (oder höher), um die Funktion "Benutzerdefinierter Code" freizuschalten.
MultiLipi API-Schlüssel
Finden Sie dies in Ihrem Dashboard unter Einstellungen > Allgemein.
2. Schritt 1: Zugriff auf die Website-Architektur
Wir werden die Übersetzungs-Engine in die globale Kopfzeile einfügen, um sicherzustellen, dass sie auf allen Seiten und CMS-Vorlagen bestehen bleibt.
- 1
Melden Sie sich bei Ihrem an Webflow-Dashboard.
- 2
Finden Sie Ihre Projektkarte und klicken Sie auf Einstellungssymbol (⚙️) (oder wählen Sie Website-Einstellungen aus dem Designer-Menü).
- 3
Navigieren Sie zu Benutzerdefinierter Code Registerkarte in der oberen Navigationsleiste.
3. Schritt 2: Einfügen des Infrastruktur-Skripts
- 1
Scrollen Sie nach unten zu dem Feld mit der Bezeichnung "Head Code".
- 2
Hinweis: Platzieren Sie dies nicht im "Footer Code", da dies die Ladezeit der Übersetzung verzögert und zu einem "Flash of untranslated content" führt.
Aktion: Einfügen des Verbindungsskripts
Fügen Sie das folgende Verbindungsskript in das Feld ein:
⚠️ Kritische Konfiguration
- •Ersetzen
IHREN_API_SCHLÜSSEL_HIERmit dem tatsächlichen API-Schlüssel, der von Ihrem MultiLipi-Dashboard kopiert wurde. - •Klicken Sie auf das grüne Änderungen speichern Schaltfläche in der oberen rechten Ecke.
4. Schritt 3: Bereitstellung & Verifizierung
Webflow führt keinen benutzerdefinierten Code in der Designer-Ansicht aus. Sie müssen veröffentlichen, um die Engine in Aktion zu sehen.
Veröffentlichen
Klicken Sie auf das Blaue Veröffentlichen Schaltfläche und wählen Sie Ihre Produktionsdomäne (oder .webflow.io Staging-Domain).
Überprüfen
Öffnen Sie den Live-Link.
Visuelle Prüfung
Der Sprachumschalter sollte unten links erscheinen.
CMS-Prüfung
Navigieren Sie zu einer CMS-Sammlungsseite (z. B. /blog/post-1) und wechseln Sie die Sprachen, um sicherzustellen, dass dynamische Inhalte korrekt übersetzt werden.
Fehlerbehebungsprotokoll
- •Switcher fehlt? Bestätigen Sie, dass Sie die Website nach dem Speichern des Codes veröffentlicht haben.
- •Planprüfung: Stellen Sie sicher, dass Ihr Webflow-Hostingplan aktiv ist; kostenlose Staging-Seiten beschränken oft die Ausführung von benutzerdefiniertem Code auf benutzerdefinierten Domains.
5. Optimierung & Styling
Nach der Bereitstellung arbeitet MultiLipi still im Hintergrund.
Design-Integrität
Da wir nur Textknoten austauschen, bleiben Ihre Webflow-Interaktionen (IX2) und Scroll-Animationen perfekt erhalten.
Switcher-Anpassung
Sie können den Umschalter über unsere Dashboard-Einstellungen neu positionieren oder sein CSS überschreiben, um die spezifische Typografie Ihrer Website anzupassen.
SEO-Automatisierung
Wir generieren automatisch die sitemap.xml Einträge und hreflang Tags für Ihr Webflow-Projekt, damit Sie in globalen Suchergebnissen ranken, ohne manuell SEO betreiben zu müssen.