Code-Export - Webflow-Hilfe
Auf bezahlten Workspace-Plänen können Sie den HTML-, CSS-, JavaScript-Code und die Assets Ihrer Seite exportieren, um Ihren Code zu sichern, ihn Ihrem Kunden bereitzustellen oder ihn überall zu hosten, wo Sie möchten — ohne Namensnennung.
So exportieren Sie Ihren Code
- Öffnen Sie Ihre Seite in Webflow
- Gehen Sie zu Hauptmenü > Code-Export (klicken Sie auf das "W"-Logo in der oberen linken Ecke, um das Hauptmenü zu öffnen), oder drücken Sie Shift + E
- Klicken Sie auf ZIP vorbereiten
- Laden Sie die ZIP-Datei herunter
So exportieren Sie minifiziertes HTML
Das Minifizieren Ihres HTML-Codes kann die Ladezeiten der Seite verbessern, indem Leerzeichen, Kommentare und andere Code-Elemente entfernt werden, die Browser nicht zum Laden der Seite benötigen. Um minifiziertes HTML zu exportieren:
- Öffnen Sie Ihre Seite in Webflow
- Gehen Sie zu Hauptmenü > Code-Export (klicken Sie auf das "W"-Logo in der oberen linken Ecke), oder drücken Sie Shift + E
- Drücken Sie Befehl + O (auf Mac) oder Strg + O (auf Windows)
- Aktivieren Sie das HTML minifizieren-Kontrollkästchen, das im Exportfenster erscheint
- Klicken Sie auf ZIP vorbereiten
- Laden Sie die ZIP-Datei herunter
Was Ihre exportierten Dateien enthalten
Die heruntergeladene ZIP-Datei enthält alle Seiten, Stile, Skripte und Bilder Ihrer Website:
- Ein CSS-Ordner mit allen Stilen Ihrer Website, enthalten in 3 .css-Dateien: - eine CSS-Datei (z.B.
your-site-name.css), die alle benutzerdefinierten Stile Ihrer Website enthält -webflow.css, das allgemeine Basisstile für Webflow-Layoutkomponenten enthält -normalize.css, das dafür sorgt, dass Browser alle Elemente konsistenter darstellen - Ein JS-Ordner mit allen JavaScript-Dateien für Ihre Website. Elemente und Funktionen wie Formulare, Navigationsleisten, Slider, Tabs und Interaktionen basieren auf diesen Dateien. Wenn Sie diese Dateien löschen, könnte Ihre Seite korrekt aussehen, aber sie wird nicht wie erwartet funktionieren.
- Ein Bilder-Ordner mit allen Bildern, die im Asset-Panel Ihrer Website hochgeladen wurden
- .html-Dateien für alle Seiten Ihrer Website (einschließlich leerer Vorlagenseiten für Sammlungen)
Gut zu wissen
Wenn Sie ein Beispiel des von Webflow exportierten Codes sehen möchten, sehen Sie sich den Quellcode der Startseite an — sie ist komplett in Webflow erstellt!
Was Ihre exportierten Dateien nicht enthalten
Die folgenden Funktionen und Inhalte sind im exportierten Code nicht enthalten und funktionieren auf exportierten Websites nicht wie erwartet:
- CMS-Inhalte und -Funktionen (einschließlich Sammlungselementen und Sammlungsliste)
- Benutzerkonten-Inhalte und -Funktionen (einschließlich Benutzer und Zugriffsgruppen)
- E-Commerce-Inhalte und -Funktionen (einschließlich Produkte und Checkout)
- Passwortschutz für die Website und/oder Seiten
- Formularverarbeitungsprozesse
- Bereits vorhandene Formulareinreichungen (können separat exportiert werden)
- reCAPTCHA-Elemente innerhalb von Formularen
- Seitensuche
- Lokalisierte Inhalte (nur die Seiten, Elemente und Inhalte der primären Sprache Ihrer Website sind enthalten)
- Code-Komponenten
FAQ und Tipps zur Fehlerbehebung
Warum gibt es ein „w-“ Präfix vor Klassennamen?
Webflow versieht komponentenspezifische Klassen mit dem Präfix „w-“, um Konflikte mit anderen Code-Frameworks zu vermeiden.
Kann ich wählen, nur einen Teil des Codes meiner Website zu exportieren?
Derzeit können Sie nicht auswählen, was exportiert wird. Jeder exportierbare Teil Ihrer Website wird in jedem Export enthalten sein.
Kann ich den Code nach dem Export bearbeiten?
Sie können den Code nach dem Export bearbeiten. Manuelle Änderungen an exportierten Dateien können einige Webflow-Komponenten beeinträchtigen.
Kann ich die .html-Erweiterungen aus der URL meiner exportierten Seiten entfernen?
Wenn Sie die .html-Erweiterungen aus Ihren exportierten Seiten entfernen möchten, können Sie dies mit einer .htaccess-Datei tun.
Muss ich Webflow erwähnen, wenn ich meine Website extern hoste?
Nein, Sie müssen Webflow nicht erwähnen oder einen Webflow-Plan beibehalten, damit Ihre exportierte Website auf Ihrem eigenen Server funktioniert.
Enthält der exportierte Code meine CMS-, Mitgliedschafts- und E-Commerce-Inhalte?
Nein. CMS-, Benutzerkonten- und E-Commerce-Inhalte (Datenbanken) sind im exportierten Code nicht enthalten. Sammlungsliste zeigt den leeren Zustand.
Enthält der exportierte Code meine lokalisierten Seiten, Elemente und Inhalte?
Nein. Lokalisierte Seiten, Elemente und Inhalte sind im exportierten Code nicht enthalten. Exportierter Code enthält nur die primäre Sprache.
Werden passwortgeschützte Seiten nach dem Export meines Codes weiterhin geschützt sein?
Nein. Alle passwortgeschützten Seiten auf Ihrer Website sind nach dem Code-Export nicht mehr geschützt. Ihre Website muss mit Webflow gehostet werden, damit der Passwortschutz wie erwartet funktioniert.
Werden alle Elemente auf meiner Website funktionieren, wenn ich den Code woanders hoste?
CMS, Benutzerkonten, E-Commerce-Inhalte und -Funktionen sowie lokalisierte Seiten, Elemente und Inhalte sind im exportierten Code nicht enthalten. Diese Funktionen erfordern Hosting, um wie erwartet zu funktionieren. Außerdem funktionieren die Seitensuche und Formulare (einschließlich Dateiupload und reCAPTCHA) auf exportierten Seiten nicht, um die DSGVO einzuhalten.
Warum funktionieren meine Lottie-Animationen nicht lokal, wenn ich meine Website exportiere?
Aus Sicherheitsgründen werden Lottie-JSON-Dateien nicht von Ihrem lokalen Dateisystem geladen, daher erscheinen Lottie-Animationen nicht, wenn Sie Ihre Website lokal laden — sie benötigen einen Webserver, um wie erwartet zu funktionieren.