Comment utiliser : Webflow Clipboard Bridge
- Copiez l’élément : dans le Webflow Designer (sélectionnez-le puis appuyez sur Ctrl/⌘+C) ou avec un bouton devpack « Copy to Webflow ».
- Ouvrez cette page dans le navigateur où le Webflow Designer est ouvert, cliquez dans la zone de collage et appuyez sur Ctrl/⌘+V.
- Vérifiez le récapitulatif — éléments, classes et ressources détectés — et modifiez le JSON si nécessaire.
- Cliquez sur Copy to Webflow, puis collez dans le Designer.
Pourquoi la copie entre navigateurs échoue
Lorsque vous copiez des éléments, Webflow (et des outils comme devpack) les placent dans le presse-papiers sous forme de application/json, au format @webflow/XscpData de Webflow. Seuls le texte brut et le HTML sont partagés de manière standard entre navigateurs : les types personnalisés comme celui-ci restent dans le format privé de chaque navigateur. Une copie faite dans Firefox arrive donc dans Chrome sous forme de simple texte, et le Designer l’ignore. Cela se produit aussi entre Safari, Edge, Arc, Brave et les profils Chrome dans certaines configurations.
La copie en texte brut contient pourtant toutes les données. Cette page la lit, la vérifie et la réécrit dans le presse-papiers en tant que application/json dans le navigateur actuel — exactement ce qu’attend le Designer.
Bon à savoir
- Même navigateur, même presse-papiers : si devpack et Webflow sont ouverts dans le même navigateur, inutile de passer par ce pont — collez directement dans le Designer.
- Entre projets Webflow : copier des éléments d’un site à un autre fonctionne aussi dans un seul navigateur ; les classes sont recréées et les images sont reliées aux ressources du site d’origine.
- Conservez des composants : téléchargez le JSON et rouvrez-le à tout moment — une petite bibliothèque de sections que vous réutilisez.
- Aucun envoi de données : les données du presse-papiers restent dans votre navigateur.
Générez des éléments Webflow avec HTML & CSS vers Webflow, SVG vers Webflow ou le HubSpot Form Styler.
Aussi recherché comme : webflow coller ne fonctionne pas, webflow copier coller entre navigateurs, webflow clipboard, xscpdata, webflow copier coller chrome firefox, webflow clipboard json, coller dans webflow, webflow copier des éléments entre projets.
Outils complémentaires : Webflow Clipboard Bridge
- Générateur de classes Webflow — Décrivez une section en quelques mots — « hero avec accroche, titre, deux boutons et une image à droite » — et obtenez une structure de classes cohérente en Client-First, BEM ou kebab-case simple, prête à être copiée dans Webflow sous forme d'éléments.
- Vérificateur de classes CSS — Collez du HTML ou saisissez une URL pour auditer chaque nom de classe : détectez les fautes de frappe comme hero_heding, les doublons orthographiés différemment (hero-title et hero_title), les classes Webflow nommées automatiquement comme div-block-12, ainsi que les non-respects des règles Client-First ou BEM.
- Markdown vers Webflow Rich Text — Collez du Markdown, vérifiez l’aperçu et copiez-le en texte mis en forme : titres, listes, liens et gras s’affichent correctement dans l’élément Rich Text de Webflow.
- 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.