Comment utiliser : HTML et CSS vers Webflow
- Collez votre HTML à gauche et le CSS correspondant à droite. Il peut provenir d'un export de code, d'un template, d'une sortie Tailwind compilée en CSS, ou d'un code écrit par ChatGPT ou Claude. Les balises
<style>présentes dans le HTML sont récupérées automatiquement. - Vérifiez l'aperçu et le rapport de conversion : il indique le nombre d'éléments, de classes, de combo classes et de styles par breakpoint créés, ainsi que le CSS qui n'a pas pu être converti.
- Choisissez Éléments natifs (Div Block, Heading, Paragraph, Link, Image, List…) ou Custom Elements (chaque balise exactement telle qu'écrite), puis cliquez sur Copier vers Webflow.
- Dans le Webflow Designer, sélectionnez un élément parent et appuyez sur Ctrl/⌘+V. Les classes apparaissent dans le Style Manager, et les styles tablette et mobile sont appliqués à leurs breakpoints.
Pourquoi convertir du HTML en éléments natifs Webflow ?
Le moyen rapide d'intégrer du code dans Webflow est un Code Embed, mais un embed fonctionne comme une boîte noire : vos clients ne peuvent pas modifier le texte, vous ne pouvez pas le restyler dans le panneau Style, et il n'apparaît pas dans le Navigator. Ce convertisseur transforme votre balisage en mêmes éléments que vous créeriez à la main : Div Blocks, Sections, Headings, Paragraphs, Text Links, Link Blocks, Images et Lists, chacun avec ses classes. Le texte reste modifiable dans le Designer comme dans l'Editor, et chaque style est géré dans le Style Manager de Webflow.
Comment le CSS est converti en classes Webflow
| Votre CSS | Dans Webflow |
|---|---|
.card { … } | Classe card avec ces styles |
class="button is-secondary" + .button.is-secondary | Combo class button is-secondary |
@media (max-width: 991px) | Breakpoint tablette |
@media (max-width: 767px) / 479px | Mobile paysage / Mobile portrait |
.button:hover, :focus, :active | États Hover, Focused et Pressed |
var(--brand) depuis :root | Remplacée par sa valeur |
margin: 0 auto, gap, border, flex: 1 | Développées en propriétés individuelles Webflow |
h1 { }, .card p { }, @keyframes | Conservées dans un petit Code Embed (<style>), car les classes Webflow ne peuvent pas exprimer les sélecteurs de balise ou de descendance |
Le CSS mobile-first fonctionne aussi : le convertisseur calcule les styles effectifs pour chaque breakpoint Webflow (ordinateur, tablette, mobile paysage, mobile portrait) et n'écrit que les différences, à la manière de la cascade de Webflow, du bureau vers les écrans plus petits.
Éléments natifs ou Custom Elements
Les éléments natifs offrent la meilleure expérience d'édition pour le contenu : les titres, paragraphes et liens se comportent exactement comme les éléments glissés depuis le panneau Add. Les balises sans équivalent natif dans Webflow, comme button, form, input, video ou svg en ligne, deviennent des Custom Elements avec tous leurs attributs. Choisissez Custom Elements (balises exactes) si vous voulez conserver chaque balise à l'identique, par exemple pour un balisage sémantique ou des composants que vous ne modifierez jamais dans l'Editor. Pour les icônes SVG en ligne, l'outil dédié SVG vers Webflow donne les meilleurs résultats.
D'où provient le HTML ?
- Sections générées par IA : demandez à ChatGPT ou Claude une section en HTML et CSS avec des noms de classes, puis collez-la ici au lieu de la reconstruire à la main.
- Templates et kits d'interface : templates HTML/CSS ou prototypes exportés.
- Tailwind : les classes utilitaires de Tailwind ne se traduisent pas bien en classes Webflow. Compilez d'abord en CSS simple avec des noms de classes sémantiques, ou utilisez le générateur de noms de classes pour obtenir une structure propre.
- Anciens sites : copiez le balisage d'une section et son CSS pour la migrer vers Webflow.
Conseils pour un collage propre
- Adoptez une convention de nommage, par exemple Client-First, avant de coller. Le vérificateur de fautes de noms de classes repère les fautes de frappe et les doublons.
- Les images conservent leur URL. Importez-les ensuite dans le panneau Assets de Webflow et remplacez la source : elles seront servies depuis le CDN de Webflow avec des tailles adaptatives.
- Si une classe portant le même nom existe déjà dans votre projet, Webflow conserve les deux et ajoute un numéro à celle collée. Renommez-les ou fusionnez-les dans le Style Manager.
- Convertissez les espacements fixes en valeurs fluides avec le Clamp Calculator, et reprenez les valeurs de design depuis Figma avec Figma CSS vers Webflow.
Fonctionnement de « Copier vers Webflow »
Lorsque vous copiez des éléments dans le Designer, Webflow place sur le presse-papiers une description JSON des éléments et de leurs classes. Le convertisseur construit les mêmes données (nœuds, textes, classes, combo classes et variantes par breakpoint) et les place dans votre presse-papiers pour que le Designer puisse les lire. Webflow ne documente pas officiellement ce format. Si un collage échoue après une mise à jour de Webflow, utilisez une fois la zone de calibrage de la page SVG vers Webflow ; les Custom Elements créés ici utilisent le même format appris.
Aussi recherché comme : html vers webflow, css vers webflow, code vers webflow, coller html dans webflow, convertisseur html webflow, webflow clipboard, xscpdata, tailwind vers webflow.
Outils complémentaires : HTML et CSS vers Webflow
- HTML vers Webflow Rich Text — Collez du HTML désordonné (ancien site, export WordPress, Google Docs ou Word) et obtenez un balisage sémantique propre, accepté par l’élément Rich Text de Webflow et par l’import CMS sans résidus.
- Redirections WordPress vers Webflow — Migrer un site de WordPress vers Webflow modifie presque toutes les URL : chemins d'articles datés, archives /category/, slashes finaux et slugs de pages.
- Webflow Clipboard Bridge — Webflow place les éléments dans le presse-papiers dans un format spécial qui ne voyage pas d’un navigateur à l’autre (Firefox → Chrome, Safari → Edge…).
- Éditeur de composants Webflow — Déplacez des sections et composants d’un projet Webflow à l’autre et modifiez-les au passage.
Questions fréquentes
Puis-je coller directement du HTML dans Webflow ?
Les styles responsives et les effets au survol sont-ils conservés ?
max-width correspondent aux breakpoints Webflow tablette (991px), mobile paysage (767px) et mobile portrait (479px). Les pseudo-classes :hover, :focus et :active deviennent les états Hover, Focused et Pressed. Le CSS en min-width (mobile-first) est recalculé pour chaque breakpoint.Que devient le CSS qui n'est pas un simple sélecteur de classe ?
h1), les sélecteurs de descendance (.card p), @keyframes, @font-face et règles similaires ne peuvent pas être stockés comme classes Webflow. Par défaut, ils sont placés dans un petit Code Embed avec une balise <style> à l'intérieur de la section collée, ce qui préserve le rendu visuel. Décochez l'option pour les ignorer.Cela fonctionne-t-il avec du HTML Tailwind ou Bootstrap ?
px-4 ou col-md-6) deviendrait une classe Webflow sans style, sauf si vous collez le CSS correspondant. Pour Webflow, il vaut mieux utiliser quelques classes sémantiques : compilez votre design en CSS simple ou partez du générateur de noms de classes.