devpack
EnglishEspañolPortuguêsBahasa IndonesiaFrançaisРусскийDeutschTiếng Việt
Website-Check

SVG & HTML in Webflow einfügen – kostenlose Erweiterung

Kopiere SVG, HTML oder einen Teil einer beliebigen Webseite, drücke im Webflow Designer Strg+V (⌘+V auf dem Mac), und sie landen als native Webflow-Elemente. Kostenlos, ohne Konto, und alles läuft auf deinem Gerät.

Zu Chrome hinzufügenZu Firefox hinzufügen

Edge, Brave, Opera, Vivaldi und Arc installierst du aus dem Chrome Web Store.

SVG als echte ElementeIcons aus Figma („Als SVG kopieren“), Icon-Seiten, Code oder eine .svg-Datei werden zu svg- und path-Custom-Elements, die du stylen kannst, oder zu einem Code Embed.
HTML als native ElementeKlassen bleiben erhalten, und CSS in <style> wird zu Webflow-Klassen mit Breakpoints, Hover-Zuständen und Combo-Klassen.
Beliebige WebseitenKopierte Seiteninhalte werden zu Überschriften, Absätzen, Listen, Links und Bildern, ohne die Styles der Seite.
KomponentenbibliothekSpeichere Elemente, die du im Designer kopierst, und füge sie danach mit neuen Texten, Links und Bildern wieder ein.
PrivatKeine Netzwerkanfragen und keine Analytics. Die einzige Berechtigung ist Speicher.
KostenlosKein Konto, keine Limits, keine Werbung.

So funktioniert es

  1. Füge die Erweiterung deinem Browser hinzu.
  2. Kopiere ein SVG, HTML-Code oder einen Teil einer Webseite.
  3. Wähle im Webflow Designer die Stelle aus, an der es hin soll, und drücke Strg+V (⌘+V auf dem Mac).

Einfügen in Textfelder und Code-Editoren sowie echte Webflow-Elemente und reiner Text bleiben unverändert, sodass normales Kopieren und Einfügen weiterhin funktioniert.

Komponentenbibliothek

Kopiere Elemente im Designer und klicke auf In devpack speichern, oder drücke Alt+Shift+L, um die Bibliothek zu öffnen. Wähle eine Komponente, fülle Texte, Links, Bilder und Icons aus und klicke auf In Designer einfügen. Im Webflow Component Editor legst du fest, welche Teile bearbeitbar sind, und beide zeigen dieselbe Bibliothek.

Einstellungen

  • Ein- oder ausschalten.
  • Auswählen, was konvertiert wird: SVG, HTML-Code, Inhalte von Webseiten.
  • Bei SVG: native Elemente oder Code Embed, Klassenname, Größe und currentColor.
  • Kalibrieren: Füge ein kopiertes Custom Element in die Einstellungen ein, damit die Erweiterung das aktuelle Format von Webflow lernt.

Browser

BrowserInstallation über
Chrome, Microsoft Edge, Brave, Opera, Vivaldi, ArcChrome Web Store
FirefoxFirefox-Add-ons (Strg/⌘+V zweimal drücken: Das erste Einfügen legt die konvertierten Elemente in deine Zwischenablage)

Keine Installation nötig

Dieselben Konverter laufen auf devpack.app: SVG zu Webflow, HTML & CSS zu Webflow und die Webflow Clipboard Bridge. Konvertieren, auf Kopieren klicken und im Designer einfügen. Alle Webflow-Tools ansehen.

Datenschutz

Die Erweiterung läuft nur auf Webflow-Designer-Seiten und devpack.app. Beim Einfügen im Designer liest sie die Zwischenablage, um nach SVG oder HTML zu suchen, konvertiert die Inhalte auf deinem Gerät und sendet deine Zwischenablage, Designs oder Surfaktivitäten nirgendwohin. Details stehen in der Datenschutzerklärung.

Fragen

Ist die Erweiterung kostenlos? Ja. Sie ist kostenlos, braucht kein Konto und hat keine Limits.

Warum muss ich in Firefox zweimal einfügen? Firefox erlaubt Erweiterungen nicht, konvertierte Inhalte direkt an eine Seite zu übergeben. Das erste Strg+V legt die konvertierten Webflow-Elemente in deine Zwischenablage, das zweite fügt sie ein.

Kann ich sie ohne Installation nutzen? Ja: Nutze das Tool SVG zu Webflow oder HTML & CSS zu Webflow, klicke auf Kopieren und füge im Designer ein.