So nutzt du: HTML & CSS zu Webflow
- Füge dein HTML links und das passende CSS rechts ein – aus einem Code-Export, einer Vorlage, Tailwind-Output (zu CSS kompiliert) oder Code von ChatGPT oder Claude.
<style>-Tags im HTML werden automatisch erkannt. - Prüfe die Vorschau und den Konvertierungsbericht: Er zeigt, wie viele Elemente, Klassen, Combo-Klassen und Breakpoint-Styles erstellt wurden und welches CSS nicht zugeordnet werden konnte.
- Wähle Native elements (Div Block, Heading, Paragraph, Link, Image, List …) oder Custom Elements (jeder Tag exakt so, wie geschrieben) und klicke dann auf Copy to Webflow.
- Wähle im Webflow Designer ein übergeordnetes Element aus und drücke Ctrl/⌘+V. Die Klassen erscheinen im Style Manager, Tablet- und Mobile-Styles auf ihren Breakpoints.
Warum HTML in native Webflow-Elemente umwandeln?
Der schnelle Weg, Code nach Webflow zu bringen, ist ein Code Embed – aber ein Embed ist eine Blackbox: Kunden können den Text nicht bearbeiten, du kannst ihn nicht im Style-Panel umstylen, und er taucht nicht im Navigator auf. Dieser Konverter macht aus deinem Markup dieselben Elemente, die du von Hand bauen würdest: Div Blocks, Sections, Headings, Paragraphs, Text Links, Link Blocks, Images und Lists, jeweils mit ihren Klassen. Text bleibt im Designer und im Editor bearbeitbar, und jeder Style liegt im Style Manager von Webflow.
Wie CSS auf Webflow-Klassen abgebildet wird
| Dein CSS | In Webflow |
|---|---|
.card { … } | Klasse card mit diesen Styles |
class="button is-secondary" + .button.is-secondary | Combo-Klasse button is-secondary |
@media (max-width: 991px) | Tablet-Breakpoint |
@media (max-width: 767px) / 479px | Mobile Landscape / Mobile Portrait |
.button:hover, :focus, :active | Hover-, Focused- und Pressed-Zustände |
var(--brand) aus :root | Auf seinen Wert aufgelöst |
margin: 0 auto, gap, border, flex: 1 | Auf Webflows einzelne Eigenschaften aufgeteilt |
h1 { }, .card p { }, @keyframes | Bleibt in einem kleinen Code Embed (<style>) erhalten – Webflow-Klassen können keine Tag- oder Nachfahren-Selektoren ausdrücken |
Mobile-First-CSS funktioniert auch: Der Konverter berechnet die wirksamen Styles für jeden Webflow-Breakpoint (Desktop, Tablet, Mobile Landscape, Mobile Portrait) und schreibt nur die Unterschiede, so wie Webflow vom Desktop nach unten kaskadiert.
Native Elemente vs. Custom Elements
Native Elemente bieten das beste Bearbeitungserlebnis für Inhalte: Headings, Paragraphs und Links verhalten sich genau wie Elemente, die du aus dem Add-Panel ziehst. Tags ohne native Webflow-Entsprechung – button, form, input, video, Inline-svg und so weiter – werden zu Custom Elements mit allen ihren Attributen. Wähle Custom Elements (exakte Tags), wenn du jeden Tag 1:1 erhalten willst, zum Beispiel für semantisches Markup oder Komponenten, die du im Editor nie bearbeitest. Inline-SVG-Icons funktionieren am besten mit dem eigens dafür gedachten Tool SVG to Webflow.
Woher das HTML kommt
- KI-generierte Sections – bitte ChatGPT oder Claude um eine Section in HTML und CSS mit Klassennamen und füge sie hier ein, statt sie von Hand nachzubauen.
- Vorlagen und UI-Kits – HTML/CSS-Templates oder exportierte Prototypen.
- Tailwind – Tailwind-Utility-Klassen lassen sich nicht gut in Webflow-Klassen übersetzen. Kompiliere vorher zu reinem CSS mit semantischen Klassennamen oder lass dir mit dem Class Name Generator eine saubere Struktur erstellen.
- Alte Websites – kopiere das Markup einer Section samt CSS, um sie nach Webflow zu migrieren.
Tipps für ein sauberes Einfügen
- Nutze vor dem Einfügen ein Benennungssystem, zum Beispiel Client-First. Der Class Name Typo Checker findet Tippfehler und Duplikate in deinen Klassen.
- Bilder behalten ihre URL. Lade sie danach im Assets-Panel von Webflow hoch und tausche die Quelle aus, damit sie über das CDN von Webflow mit responsiven Größen ausgeliefert werden.
- Existiert im Projekt bereits eine Klasse mit gleichem Namen, behält Webflow beide und hängt der eingefügten Klasse eine Zahl an. Benenne sie im Style Manager um oder führe sie zusammen.
- Wandle feste Abstände mit dem Clamp Calculator in fluide Werte um und übernimm Designwerte aus Figma mit Figma CSS to Webflow.
Wie „Copy to Webflow“ funktioniert
Wenn du im Designer Elemente kopierst, legt Webflow eine JSON-Beschreibung der Elemente und ihrer Klassen in die Zwischenablage. Der Konverter erstellt dieselben Daten – Nodes, Text, Klassen, Combo-Klassen und Breakpoint-Varianten – und legt sie in deine Zwischenablage, damit der Designer sie lesen kann. Webflow dokumentiert dieses Format offiziell nicht. Schlägt ein Einfügen nach einem Webflow-Update einmal fehl, nutze einmalig die Kalibrierungsbox auf der Seite SVG to Webflow. Die hier erstellten Custom Elements verwenden dasselbe gelernte Format.
Auch gesucht als: html zu webflow, css zu webflow, code zu webflow, html in webflow einfügen, webflow clipboard, xscpdata, html zu webflow konverter, tailwind zu webflow.
Passende Tools zu: HTML & CSS zu Webflow
- HTML zu Webflow Rich Text — Füge unsauberes HTML ein, etwa von einer alten Website, einem WordPress-Export, aus Google Docs oder Word.
- 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.
- Webflow Clipboard Bridge — Webflow legt Elemente in einem speziellen Format in die Zwischenablage, das nicht zwischen Browsern übertragen wird (Firefox → Chrome, Safari → Edge …).
- Webflow Komponenten-Editor — Verschiebe Abschnitte und Komponenten zwischen Webflow-Projekten und ändere sie unterwegs.
Häufige Fragen
Kann ich HTML direkt in Webflow einfügen?
Bleiben responsive Styles und Hover-Effekte erhalten?
max-width-Media-Queries werden auf Webflows Breakpoints Tablet (991px), Mobile Landscape (767px) und Mobile Portrait (479px) abgebildet. :hover, :focus und :active werden zu den Zuständen Hover, Focused und Pressed. Min-width-CSS (Mobile First) wird für jeden Breakpoint neu berechnet.Was passiert mit CSS, das kein einfacher Klassen-Selektor ist?
h1), Nachfahren-Selektoren (.card p), @keyframes, @font-face und Ähnliches lassen sich nicht als Webflow-Klassen speichern. Standardmäßig landen sie in einem kleinen Code Embed mit einem <style>-Tag im eingefügten Bereich, damit das Design trotzdem korrekt aussieht. Deaktiviere die Option, um sie wegzulassen.Funktioniert es mit Tailwind- oder Bootstrap-HTML?
px-4 oder col-md-6) würde zu einer Webflow-Klasse ohne Styles, sofern du nicht das passende CSS mit einfügst. Für Webflow ist es deutlich besser, wenige semantische Klassen zu verwenden. Kompiliere dein Design zu reinem CSS oder starte mit dem Class Name Generator.