Il n'est pas rare d'avoir besoin de dupliquer des sections sur plusieurs pages de notre site. Webflow nous facilite le développement avec la possibilité de créer des components (ex symboles) .
Ces éléments peuvent être utilisés comme des blocs de construction pour créer des pages et des modèles de collections, et peuvent être facilement personnalisés et réutilisés dans différentes parties du site web.
Dans cet article, nous allons passer en revue les avantages de cet élément dans Webflow et comment voir comment l'utiliser.
Comment créer et modifier les components dans l'outil Webflow ?
- Ouvrez votre projet Webflow pour accéder au designer
- Sélectionnez l'élément ou la section que vous souhaitez transformer en component. Il est possible de sélectionner un élément individuel, ou un groupe d'éléments
- Cliquez sur l'icône "Component" dans la barre d'outils
- Cliquez sur l'icône "+ create new component"
- Saisissez un nom pour votre component qui identifiera clairement celui-ci dans le designer Webflow
- N'oubliez pas d'enregistrer "save".
Pour modifier le component vous avez 2 possibilités :
- Placez vous sur l'élément pour ouvrir l'éditeur
- Cliquez sur "Edit component" → dans la barre latérale de droite du designer
⚡️ Pro Tips : utiliser le raccourci clavier CMD + A sur mac ou CRTL + A sur PC pour déconnecter un component
Pourquoi utiliser des components ?
L'avantage de créer un component dans Webflow est de créer des éléments de design réutilisables / duplicables.
Une fois que vous avez créé votre component, vous pouvez choisir de l'intégrer sur votre site web dans la page de votre choix.
Pour cela il faut sélectionner un component et le glisser ou vous le souhaitez.
Voici des exemples d'éléments que l'on peut retrouver sur toutes ou plusieurs pages du site web:
- navbar
- footer
- newsletter
- faq
- etc.
Les avantages des components de Webflow
- Réutilisables: vous pouvez utiliser un component dans plusieurs parties de votre site. Cela vous permet de gagner du temps et de l'effort en ne devant pas recréer ces éléments à chaque fois, et de maintenir une apparence cohérente sur votre site.
- Flexibilité: vous pouvez facilement personnaliser le contenu et les styles de votre component et créer des symboles polyvalents qui s'adaptent à différentes situations et contextes.
- Modifications faciles: vous pouvez effectuer des modifications sur l'ensemble de votre site en une seule fois en modifiant le component original. Cela vous permet de gagner du temps et de maintenir facilement votre site à jour.
- Amélioration de la qualité de la structure de développement: pour améliorer la lisibilité de la structure du component.
- Cela peut également aider à éviter les erreurs.
Cette fonctionnalité "Component" que propose Webflow peut donc être très utile pour créer et personnaliser facilement des éléments réutilisables sur votre site internet, tout en conservant une grande flexibilité et un contrôle sur l'apparence. Vous savez maintenant comment créer et modifier un component pour vous aider à élaborer votre site de manière organisée, et gagner du temps durant la conception de votre site web, à vous de tester !
Pour aller plus loin, voici un article à découvrir sur les components dans Webflow.
.jpg)
