Découvrez les différentes fonctionnalités du designer de Webflow : un schéma détaillé avec tous les éléments à connaître lors d'un développement !
Dans notre article du jour, nous allons faire un tour rapide des différentes fonctionnalités présentes dans le Designer de Webflow.
Schéma de l'anatomie du Designer de Webflow
1. Page Actuelle
Ce premier élément nous permet de nous repérer dans notre projet Webflow et savoir sur quelle page nous nous trouvons !
2. Mode prévisualisation
Le second élément nous permet lorsqu'on clique dessus de prévisualiser notre page. Une fonctionnalité utile avant de publier son projet. Attention tout de même, le code javascript et le code présent dans les paramètres du projet et de la page ne fonctionne que sur une version publiée.
3. Responsive
Webflow permet de gérer le responsive de son site web avec différents points de rupture. Nous pouvons accéder à nos versions tablette et téléphone pour personnaliser notre Design. Nous pouvons également redimensionner la taille de visualisation pour vérifier la bonne adaptation du design.
4. Read Only Link
Cet élément permet de partager un lien en lecture seule de votre projet. Ainsi, la personne qui reçoit le lien peut voir l'intérieur du projet partagé. Les modifications réalisées sur un read only link ne s'affectent pas au projet réel.
5. Publication
Avec cette fonctionnalité, nous pouvons publier notre projet pour le mettre live sur une version webflow(io) ou sur un nom de domaine personnalisé.
6. Styles de l'élément
Ce panneau nous permet de voir, modifier et appliquer des styles à l'élément que nous avons sélectionné.
7. Paramètres de l'élément
Ce panneau nous permet de voir, modifier et appliquer des paramètres à l'élément que nous avons sélectionné. Nous pouvons également ajouter des attributs à l'élément en question.
8. Style Manager
Ce panneau nous offre la possibilité de voir toutes les classes que nous avons créées et de les renommer. Nous pouvons également supprimer toutes les classes qui ne sont plus utilisées pour optimiser les performances de notre site web.
9. Interactions
Ce panneau nous permet de gérer les interactions / animations de notre projet.
10. Fil d'Arianne de l'élément
Cette fonctionnalité est utile pour voir tous les ancêtres de notre élément sélectionné. On y voit l'ordre des éléments assemblés jusqu'à notre élément sélectionné.
11. Ressources d'aide
Grâce à ces différents liens, vous pouvez trouver des ressources écrites ou vidéos pour vous aider dans votre projet.
12. Audit Webflow
Webflow possède une fonctionnalité d'audit interne. L'outil vous montre les différents points à améliorer sur votre page. L'audit se base sur des principes SEO et d'accessibilité web.
13. Extensions Webflow
A l'inverse de Wordpress, il n'y a pas de système de plugin natif dans Webflow. Cependant, certaines agences ont développé des extensions chrome pour vous aider dans le développement de votre projet. Vous pouvez donc retrouver ces extensions dans le designer.
Exemples d'extension :
14. Paramètres
Accédez en quelques clics à des paramètres de votre projet.
15. Bibliothèques de fichiers médias
Accédez à tous les fichiers médias que vous avez uploadé.
16. Ecommerce
Créez ou gérez la partie e-commerce de votre projet Webflow.
17. Gestions des collections
Gérer vos collections ou les items de vos collections directement depuis le Designer en cliquant sur cette icône.
18. Pages du projet
Accédez aux pages de votre projet et à leurs paramètres.
19. Navigator
Développez la structure de développement de votre page et sélectionnez les éléments de celle-ci facilement.
20. Gestion des Symbols
Créez de nouveaux symbols ou regardez ceux que vous avez déjà créés.
21. Ajout d'éléments
Ajoutez des éléments ou des layouts sur votre page avec le système de glisser-déposer.
Voilà pour un tour rapide du Designer de Webflow. Pour en apprendre plus, voici quelques ressources sur des fonctionnalités plus approfondies :
.jpg)
