Badge Webflow Award Winner 2023

L'anatomie des fonctionnalités du Designer de Webflow

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 !

Publié le 
12/8/2022
Modifié le 
27/3/2023
5 min
Anatomie Designer Webflow

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

Anatomie designer 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 :

Prêt(e) à avoir un site qui convertit ?

Améliorer votre visibilité en ligne grâce à l’experience, l’excellence et la réactivité de Digidop !

Restez informés de l’actu Digidop !