Tutoriel Webflow - Les Meilleures Ressources De 2021

Pourquoi apprendre Webflow ?

Webflow est une plateforme no code qui vous permet de créer des sites web responsives rapidement et sans taper une seule ligne de code. 

Comme la plupart des plateformes no code, Webflow vous permet de réaliser des sites via une interface visuelle extrêmement bien pensée. Sur cette interface visuelle, vous retrouverez tous les éléments vous permettant de structurer votre site web. 

A gauche, vous retrouverez tous les éléments HTML qui vont vous permettre de créer votre site : section, container, heading, paragraph, image,… Vous aurez même la possibilité d’intégrer du code HTML si vous ne trouvez pas votre bonheur. On apprécie tout particulièrement la possibilité d’intégrer la fonction grid qui est extrêmement puissante et qui vous permettra de faire tous les positionnements que vous souhaitez.

Sur la droite, vous retrouverez un panneau avec toute la partie CSS et configuration globale de l’élément. Si vous désirez donner des propriétés CSS à vos éléments (positionnement, espacements, couleur, fonts, ombres…) c’est à cet endroit que cela va se passer. Ce qui est assez incroyable avec Webflow, c’est que vous allez gagner un temps fou dans la mise en place des différents éléments et ainsi que lors de la création “de leur apparence”. On notera également que la notion des class

Vous aurez également la possibilité de gérer la mise en place du responsive et des breakpoints de manière simple. Au départ d’un projet web, vous démarrez sur un projet desktop fixé à 1280px, puis tablette ainsi que mobile. Vous avez la possibilité d’ajouter un élément plus large sur le desktop (en moyenne on fixe les projets web à 1440px). En cliquant sur chaque élément vous pourrez définir les options d’affichage CSS que vous le souhaitez en fonction de chaque taille d’écran. Comme vous l’aurez bien compris, vous pouvez aller dans le détail de chaque breakpoint et définir l’affichage de votre choix. 

Un autre point fait la différence sur Webflow : les interactions. Une interaction est définit comme une la possibilité d’assigner un mouvement à un élément en fonction des actions de l’utilisateurs. Elle se paramètre directement dans le panneau de droite. Au niveau des interactions, vous pouvez imaginer des interactions au click, au scroll, au hover… Vous pouvez ensuite contrôler les rotations, les translations, les effets d’affichage (easing), le delay… Il suffit de regarder le hall of fame de Webflow pour se rendre compte que les possibilités sont infinies et peuvent mener à des interactions extrêmement complexes qui méritent une très bonne connaissance de la plateforme et de l’expérience. Votre goût pour le design fera également toute la différence sur la création des animations. N’hésitez pas à vous inspirer de ce que d’autres créateurs ont fait pour tester de nouvelles interactions. De très nombreux tutoriels webflow sont disponibles sur internet ainsi que la communauté pourra vous aider à créer vos interactions si vous avez des difficultés.

D’un point de vue des interactions vous pouvez même encore aller plus loin. En effet, à chaque page, vous avez la possibilité d’intégrer des scripts javascript (<script></script>) qui vous permettront de customiser encore plus loin vos interactions avec vos utilisateurs. Finalement si Webflow est bien une plateforme no code, il n’en demeure pas moins que les codeurs peuvent également s’y retrouver puisqu’ils ont la possibilité d’intégrer du code directement.

Webflow bénéficie également d’une partie CMS qui est très bien pensée. Vous pourrez définir des “Collections” qui vous aideront à construire des éléments dynamiques sur votre site web. C’est un outil idéal si vous souhaitez créer un blog.

Le SEO (Search Engine Optimization) – ou référencement naturel permet à votre site internet de se positionner de manière organique dans les résultats de recherche de Google. L’objectif étant bien évidemment de vous positionner dans les premiers résultats afin d’avoir un maximum de traffic et de leads sur votre site web. Dans le cas de Webflow, la construction, le temps de chargement et les différentes options présentes, vous permettront d’avoir un référencement optimal. Bien évidemment, cela ne fait pas tout et ça sera à vous de définir une stratégie SEO efficace et cohérente, mais sachez que faire le choix de Webflow sera un très bon choix pour votre référencement.

Webflow vous permet également de mettre en place du e-commerce. Ils ne sont pas encore aussi performants que Shopify et ne possèdent pas autant d’options, mais le choix du e-commerce est un axe très clair que développe Webflow. C’est actuellement un vrai challenger pour Shopify. En effet, ils visent le même type de clientèle et Webflow permet de développer des expériences clients qui sont  bien plus impressionnantes et personnalisables que Shopify. 

Comme beaucoup d’outils no code, Webflow bénéficie également d’une API et donc d’automatisations possibles. Des outils comme Zapier ou Integromat vous permettent d’automatiser un grand nombre de tâches sur votre site web. N’hésitez pas à les utiliser, ils vont vous faire gagner un temps fou dans la gestion de votre site web.  

Autre élément intéressant proposé par Webflow : l’export de code. En effet, après avoir designé une page sur Webflow, vous avez la possibilité de ne pas publier sur le site de Webfloww, mais bien d’exporter le code pour pouvoir le publier sur une autre plateforme (par exemple Gatsby, WordPress…). Webflow peut donc servir de constructeur de thèmes pour d’autres plateformes. 

Comme vous le constatez, les potentialités de Webflow pour créer un site internet sont extrêmement intéressantes et multiples. Elles plairont à la fois au designer qui trouvera dans l’outil un moyen d’expression fabuleux et au développeur un moyen efficace de gagner du temps dans ses développements. En tant que débutant, si vous ne savez pas coder, la prise en main pourra être un peu plus difficile, mais vraiment rien d’insurmontable. Après avoir appris certaines règles de HTML et de CSS, vous serez capable de vous lancer dans le grand bain de Webflow et de sortir des sites web incroyables. 

Et pour cela, NoCode Station vous propose une liste des meilleurs tutoriels pour bien démarrer l’apprentissage de Webflow.