Comment utiliser : Éditeur de composants Webflow
- Dans le Designer de Webflow, sélectionnez une section ou un composant et appuyez sur Ctrl/⌘+C. Cliquez dans la zone de collage ici, puis appuyez sur Ctrl/⌘+V.
- Cliquez sur un élément dans le Navigator pour modifier son texte, son lien, son image, sa balise, son ID, ses attributs personnalisés et ses classes. L’aperçu se met à jour pendant la saisie.
- Dans Classes, renommez une classe, modifiez ses styles, ajoutez un préfixe à toutes, ou supprimez les classes qu’aucun élément n’utilise. Annuler revient en arrière.
- Pour le réutiliser, cliquez sur Suggérer des props (ou sur Créer une prop à côté d’un champ), nommez les props, puis Enregistrer dans la bibliothèque. La prochaine fois, ouvrez-le depuis Votre bibliothèque, remplissez les props et copiez.
- Cliquez sur Copier vers Webflow, ouvrez l’autre projet, sélectionnez l’emplacement voulu et appuyez sur Ctrl/⌘+V. Télécharger .json conserve une copie pour plus tard.
Copier des composants entre projets Webflow — et les modifier au passage
Webflow permet déjà de copier des éléments d’un projet et de les coller dans un autre, dans le même navigateur. Ce qu’il ne permet pas, c’est de les modifier entre-temps : renommer les classes qui entrent en conflit avec le guide de style de l’autre projet, changer le texte, corriger les liens qui pointent vers l’ancien site ou retirer les parties dont vous n’avez pas besoin. Cet éditeur se place entre les deux. Il lit les données du presse-papiers de Webflow, les affiche comme le fait le Designer, vous permet de les modifier, puis les remet dans le presse-papiers dans le même format.
- Navigator et propriétés — chaque élément avec son type, ses classes et son texte. Modifiez le texte, les URL des liens et l’option « ouvrir dans un nouvel onglet », les sources et textes alternatifs des images, les niveaux de titre et les balises de section, l’ID et les attributs personnalisés, ou supprimez un élément avec tout son contenu.
- Classes avec leurs styles — renommez n’importe quelle classe, modifiez ses styles de base, voyez quels éléments l’utilisent et supprimez celles que personne n’utilise. Les styles par breakpoint et au survol suivent la classe.
- Préfixe de classe — ajoutez
acme-(ou tout autre préfixe) à toutes les classes en une fois, pour que les classes collées ne se mélangent pas à celles de l’autre projet ni ne soient confondues avec elles. - Props et bibliothèque — marquez comme props les textes, liens, images, icônes et interrupteurs d’affichage qui changent d’un usage à l’autre, enregistrez le composant dans votre bibliothèque dans ce navigateur, puis remplissez simplement un court formulaire la prochaine fois. Les props suivent le fichier .json téléchargé ; elles ne sont pas incluses lors de la copie vers Webflow, qui colle des éléments simples.
- Aperçu en direct en largeurs bureau, tablette et mobile, généré à partir des styles de classes.
- Avertissements pour les éléments qui ne se transfèrent pas proprement : interactions, composants dissociés lors de la copie, liaisons CMS supprimées et images stockées dans la bibliothèque d’assets de l’ancien projet.
- Aucun envoi — les données restent dans votre navigateur. Votre dernier composant est conservé sur cet appareil, afin qu’un rechargement de la page ne le fasse pas disparaître.
Webflow ouvert dans un autre navigateur ? Le Webflow Clipboard Bridge transfère les éléments d’un navigateur à l’autre. Vous créez quelque chose de nouveau à partir de code ? Utilisez HTML & CSS to Webflow ou SVG to Webflow. Vérifiez les noms de classes avec le Class Name Typo Checker.
Aussi recherché comme : copier un composant webflow dans un autre projet, webflow copier coller entre projets, copier une section webflow vers un autre site, modifier le presse-papiers webflow, préfixe de classe webflow, renommer les classes webflow, bibliothèque de composants webflow, alternative à relume class sync.
Outils complémentaires : Éditeur de composants Webflow
- 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.
- Figma CSS vers Webflow — Transformez la sortie « Copy as CSS » de Figma en valeurs nettes que vous pouvez saisir directement dans le panneau Style 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.
- 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.
Questions fréquentes
Comment copier une section d’un projet Webflow vers un autre ?
Sélectionnez la section dans le Designer et appuyez sur Ctrl/⌘+C, ouvrez l’autre projet dans le même navigateur, sélectionnez l’emplacement voulu et appuyez sur Ctrl/⌘+V. Pour la modifier avant, collez-la dans cet éditeur, modifiez-la, puis cliquez sur Copier vers Webflow avant de coller.
Que se passe-t-il avec les noms de classes déjà présents dans l’autre projet ?
Webflow associe les classes collées aux classes existantes par leur nom : une classe « button » collée peut reprendre ou entrer en conflit avec les styles de bouton de l’autre projet. Ajoutez un préfixe ici, ou renommez la classe, pour les garder séparées.
Les interactions et les composants sont-ils conservés ?
Les interactions sont incluses dans les données du presse-papiers et sont en général collées avec les éléments, mais vérifiez leurs déclencheurs ensuite. Les composants sont dissociés lors de la copie et sont donc collés comme des éléments simples ; l’éditeur vous indique combien il y en a.
Les images sont-elles conservées ?
Les images stockées dans la bibliothèque d’assets du projet source sont référencées par leur URL et sont en général réimportées par Webflow au moment du collage. Si une image ne fonctionne pas, remplacez sa source ici par une URL que vous contrôlez.
Puis-je copier un composant avec ses propriétés vers un autre projet ?
Pas via le presse-papiers : Webflow dissocie les composants lors de la copie et laisse de côté leurs propriétés. Ici, vous pouvez reconstruire cela sous forme de props devpack : remplissez-les, copiez, puis choisissez Créer un composant dans l’autre projet si vous voulez à nouveau un composant Webflow. La fonctionnalité Libraries de Webflow partage de vrais composants entre sites d’un même workspace, sur les forfaits qui l’incluent.
Où ma bibliothèque de composants est-elle stockée ?
Dans le stockage local de ce navigateur, uniquement sur cet appareil. Utilisez Télécharger .json pour conserver une sauvegarde ou transférer un composant sur un autre ordinateur, puis ouvrez le fichier ici pour continuer.
S’agit-il d’un outil officiel de Webflow ?
Non. devpack est indépendant. Il fonctionne avec les données du presse-papiers que le Designer crée lorsque vous copiez des éléments, et que Webflow peut modifier à tout moment.
Puis-je installer Éditeur de composants Webflow en tant qu’application web et l’utiliser hors ligne ?
Oui. Éditeur de composants Webflow est une application web installable (PWA) : elle s’installe depuis votre navigateur, sans passer par une boutique d’applications. Cliquez sur « Installer l’application » en haut de cette page dans Chrome ou Edge (Windows, macOS, Linux, ChromeOS) ; sur Android, utilisez « Partager » → « Ajouter à l’écran d’accueil » sur iPhone et iPad ; ou « Fichier » → « Ajouter au Dock » dans Safari 17+ sur Mac. L’application s’ouvre alors dans sa propre fenêtre avec sa propre icône, et comme elle s’exécute entièrement dans votre navigateur, elle continue de fonctionner hors ligne. Firefox sur ordinateur de bureau ne permet pas d’installer d’applications web. Comment fonctionne l’installation.