So nutzt du: Webflow Komponenten-Editor
- Wähle im Webflow Designer einen Abschnitt oder eine Komponente aus und drücke Strg/⌘+C. Klicke hier auf den Einfügebereich und drücke Strg/⌘+V.
- Klicke im Navigator auf ein Element, um Text, Link, Bild, Tag, ID, benutzerdefinierte Attribute und Klassen zu bearbeiten. Die Vorschau aktualisiert sich beim Tippen.
- Unter Klassen kannst du eine Klasse umbenennen, ihre Stile bearbeiten, allen ein Präfix hinzufügen oder Klassen entfernen, die kein Element nutzt. Rückgängig macht Schritte zurück.
- Um sie wiederzuverwenden, klicke auf Props vorschlagen (oder auf Prop erstellen neben einem Feld), benenne die Props und klicke auf In Bibliothek speichern. Beim nächsten Mal öffnest du sie unter Deine Bibliothek, füllst die Props aus und kopierst.
- Klicke auf In Webflow kopieren, öffne das andere Projekt, wähle die Stelle aus und drücke Strg/⌘+V. .json herunterladen legt eine Kopie an, die du später wiederverwenden kannst.
Komponenten zwischen Webflow-Projekten kopieren — und unterwegs ändern
Webflow erlaubt es dir bereits, Elemente aus einem Projekt zu kopieren und im selben Browser in ein anderes einzufügen. Was nicht geht, ist, sie dazwischen zu ändern: Klassen umbenennen, die mit dem Style Guide des anderen Projekts kollidieren, den Text austauschen, Links reparieren, die auf die alte Seite zeigen, oder Teile entfernen, die du nicht brauchst. Genau hier setzt dieser Editor an. Er liest die Clipboard-Daten von Webflow, zeigt sie so an, wie der Designer es tut, lässt dich sie bearbeiten und legt sie im selben Format zurück in die Zwischenablage.
- Navigator und Eigenschaften — jedes Element mit Typ, Klassen und Text. Bearbeite Text, Link-URLs und „in neuem Tab öffnen“, Bildquellen und Alt-Text, Überschriftenebenen und Section-Tags, die ID und benutzerdefinierte Attribute, oder lösche ein Element samt allem, was darin liegt.
- Klassen mit ihren Stilen — benenne jede Klasse um, bearbeite ihre Basisstile, sieh nach, welche Elemente sie nutzen, und entferne die, die nichts nutzt. Breakpoint- und Hover-Stile wandern mit der Klasse mit.
- Klassen-Präfix — füge allen Klassen auf einmal
acme-(oder ein beliebiges Präfix) hinzu, damit eingefügte Klassen nicht mit den Klassen im anderen Projekt verschmelzen oder verwechselt werden. - Props und eine Bibliothek — markiere Text, Links, Bilder, Icons und Ein-/Ausblend-Schalter, die sich zwischen den Verwendungen ändern, als Props, speichere die Komponente in deiner Bibliothek in diesem Browser und fülle beim nächsten Mal nur ein kurzes Formular aus. Props wandern mit der heruntergeladenen .json-Datei mit; beim Kopieren nach Webflow werden sie weggelassen, da dort nur einfache Elemente eingefügt werden.
- Live-Vorschau in Desktop-, Tablet- und Smartphone-Breite, aufgebaut aus den Klassenstilen.
- Warnungen für Teile, die sich nicht sauber übertragen lassen: Interaktionen, Komponenten, die beim Kopieren entkoppelt wurden, entfernte CMS-Bindungen und Bilder, die in der Asset-Bibliothek des alten Projekts liegen.
- Nichts wird hochgeladen — die Daten bleiben in deinem Browser. Deine letzte Komponente wird auf diesem Gerät gespeichert, damit ein Neuladen sie nicht verliert.
Webflow ist in einem anderen Browser geöffnet? Der Webflow Clipboard Bridge verschiebt Elemente zwischen Browsern. Baust du etwas Neues aus Code? Nutze HTML & CSS zu Webflow oder SVG zu Webflow. Prüfe Klassennamen mit dem Class Name Typo Checker.
Auch gesucht als: webflow komponente in anderes projekt kopieren, webflow elemente zwischen projekten kopieren, webflow section kopieren, webflow clipboard bearbeiten, webflow class prefix, webflow klassen umbenennen, webflow komponenten bibliothek, webflow xscpdata editor.
Passende Tools zu: Webflow Komponenten-Editor
- Klassennamen-Generator — Beschreibe einen Bereich in einfachen Worten – „Hero mit Tagline, Überschrift, zwei Buttons und einem Bild rechts“ – und erhalte eine konsistente Klassenstruktur in Client-First, BEM oder einfachem Kebab-Case, bereit zum Einfügen in Webflow als Elemente.
- Figma CSS zu Webflow — Verwandle Figmas „Copy as CSS“-Ausgabe in saubere Werte, die du direkt ins Webflow-Style-Panel eintragen kannst.
- WordPress zu Webflow Weiterleitungen — Beim Umzug einer Seite von WordPress zu Webflow ändert sich fast jede URL: datierte Blog-Pfade, /category/-Archive, Schrägstriche am Ende und Seiten-Slugs.
- Markdown zu Webflow Rich Text — Markdown einfügen, die Vorschau prüfen und als formatierten Rich Text kopieren.
Häufige Fragen
Wie kopiere ich einen Abschnitt von einem Webflow-Projekt in ein anderes?
Wähle den Abschnitt im Designer aus und drücke Strg/⌘+C, öffne dann das andere Projekt im selben Browser, wähle die Stelle aus und drücke Strg/⌘+V. Willst du ihn vorher ändern, füge ihn in diesen Editor ein, bearbeite ihn und klicke vor dem Einfügen auf In Webflow kopieren.
Was passiert mit Klassennamen, die im anderen Projekt schon existieren?
Webflow ordnet eingefügte Klassen anhand des Namens bestehenden zu. Dadurch kann eine eingefügte „button“-Klasse die Button-Stile des anderen Projekts übernehmen oder mit ihnen kollidieren. Setze hier ein Präfix oder benenne die Klasse um, damit sie getrennt bleiben.
Kommen Interaktionen und Komponenten mit?
Interaktionen sind in den Clipboard-Daten enthalten und werden meist zusammen mit den Elementen eingefügt, prüfe ihre Trigger aber danach. Komponenten werden beim Kopieren entkoppelt und daher als einfache Elemente eingefügt; der Editor zeigt dir an, wie viele es sind.
Kommen Bilder mit?
Bilder, die in der Asset-Bibliothek des Quellprojekts liegen, werden per URL referenziert und beim Einfügen meist von Webflow erneut hochgeladen. Schlägt ein Bild fehl, ändere hier die Quelle auf eine URL, die du kontrollierst.
Kann ich eine Komponente mitsamt ihren Props in ein anderes Projekt kopieren?
Nicht über die Zwischenablage: Webflow entkoppelt Komponenten beim Kopieren und lässt ihre Props weg. Hier kannst du das als devpack-Props nachbauen: Fülle sie aus, kopiere und wähle dann im anderen Projekt Komponente erstellen, wenn du wieder eine Webflow-Komponente möchtest. Die Libraries-Funktion von Webflow teilt echte Komponenten zwischen Sites eines Workspaces, sofern dein Tarif sie enthält.
Wo wird meine Komponentenbibliothek gespeichert?
Im Local Storage dieses Browsers, nur auf diesem Gerät. Nutze .json herunterladen für ein Backup oder um eine Komponente auf einen anderen Rechner zu übertragen, und öffne die Datei hier, um weiterzuarbeiten.
Ist dies ein offizielles Webflow-Tool?
Nein. devpack ist unabhängig. Das Tool arbeitet mit den Clipboard-Daten, die der Designer beim Kopieren von Elementen erzeugt, und Webflow könnte deren Format jederzeit ändern.
Kann ich Webflow Komponenten-Editor als Web-App installieren und offline nutzen?
Ja. Webflow Komponenten-Editor ist eine installierbare Web-App (PWA) – sie wird über Ihren Browser installiert und nicht aus einem App-Store heruntergeladen. Klicken Sie oben auf dieser Seite in Chrome oder Edge (Windows, macOS, Linux, ChromeOS) auf „App installieren“ oder verwenden Sie auf Android-Geräten „Teilen“ → „Zum Startbildschirm hinzufügen“ auf dem iPhone und iPad bzw. „Datei“ → „Zum Dock hinzufügen“ in Safari 17+ auf einem Mac. Die App öffnet sich dann in einem eigenen Fenster mit einem eigenen Symbol, und da sie vollständig in Ihrem Browser ausgeführt wird, funktioniert sie auch offline. Firefox auf dem Desktop kann keine Web-Apps installieren. So funktioniert die Installation.