Les bases de Webflow pour débutants

Webflow, du no-code mais surtout du low code

Webflow construit des sites en HTML et en CSS comme le ferait un développeur, sans que tu écrives une ligne de code. Ce que peu de gens savent, c’est que l’outil ne s’arrête pas là : tu peux injecter du code personnalisé à l’intérieur. C’est ce qui en fait un outil low code, et c’est une bonne nouvelle même si tu ne sais pas coder : l’IA, elle, sait le faire. Tu demandes la fonctionnalité que tu veux, tu récupères le code, tu le colles.

Ça change ce que tu peux viser : reproduire les sites les plus travaillés que tu croises, monter une marketplace, une page de vente animée ou un espace de formation complet, et vendre ces prestations à des prix haut de gamme si tu es freelance.

Templates, éléments et classes sur Webflow

Partir d’un template

La librairie se trouve sur webflow.com/templates : des créations rangées par catégorie, portfolio, technologie et le reste, avec un filtre pour n’afficher que les gratuites. C’est le raccourci contre la page blanche.

Les deux panneaux et les classes

Le bouton plus ajoute les éléments : c’est le HTML, la structure que tu retrouves dans le navigateur. Le panneau de droite leur donne une apparence : c’est le CSS. Entre les deux, il y a les classes, et c’est le premier réflexe à prendre.

Une classe n’est rien d’autre que la sauvegarde du style que tu viens de régler. Si plusieurs images doivent se ressembler, tu copies la classe de la première et tu la colles sur les autres.

Animations, composants et variables

Le panneau d’interactions

Il se divise en deux familles de déclencheurs.

Un éclair vert signale l’élément qui porte une interaction. Au survol, tu obtiens deux états, on hover et on hover out, et l’animation se règle en propriétés CSS, d’un état initial vers un état final, le long d’une timeline. Le déclencheur while scrolling in view fonctionne autrement : une seule timeline complète, parcourue au fil du scroll entre un début et une fin que tu délimites.

Composants et variables

• Un composant apparaît en vert dans la hiérarchie. Tu modifies un lien de la navigation une fois, toutes les pages suivent.
• Ses variantes portent chacune leur style : bouton primaire et bouton secondaire dans le même composant, que tu échanges depuis les propriétés.
• Les variables stockent couleurs, dimensions, pourcentages et polices, rangées en collections : changer les couleurs d’un site de quarante pages se règle à la source, en deux clics.
• Les modes ajoutent une seconde valeur sur la même ligne. Une collection en mode base et en mode dark, appliquée au body, fait basculer le site entier.

CMS, e-commerce et code personnalisé

Le CMS contient deux zones : les collections classiques (articles de blog, membres d’une équipe, prestations) et l’e-commerce, avec ses produits et ses catégories. Une page template, en violet, est reliée à sa collection : tu la designes une fois, tu connectes chaque élément à son champ, puis tu passes d’un item à l’autre. Pour afficher ces données sur une page statique, tu poses une liste de collection et tu ne stylises qu’un seul item.

Le code personnalisé s’ajoute page par page dans les paramètres, avec un bloc chargé avant la structure du site et un bloc chargé après. Un compte à rebours écrit avec ChatGPT suffit à comprendre le principe : le script vise l’élément par son ID. Au niveau du site, l’onglet custom code accueille les scripts de tracking et les outils externes, le JavaScript toujours avant la fermeture de la balise body. C’est là aussi que se branche GSAP pour des animations plus poussées.

SEO et responsive dans Webflow

Chaque page a son meta title et sa meta description, avec l’aperçu du rendu dans les moteurs de recherche et l’image qui s’affichera au partage. Les images affichées, pas les images de fond, reçoivent une balise alt : le nom du fichier, une mention décorative, ou une description que tu écris. La structure passe par les éléments heading, H1, H2, H3 et paragraphes.

Côté responsive, tu designes sur le breakpoint de référence, puis tu reprends la tablette, le mobile paysage et le mobile portrait. Plus de la moitié du trafic vient du mobile.

Après chaque modification, redescends toujours vers la version la plus petite.

Trois breakpoints supplémentaires peuvent être ajoutés pour les grands écrans.

Conclusion

Classes, interactions, composants, variables, CMS, code personnalisé, SEO et breakpoints : voilà ce qui compose vraiment Webflow. Le reste est une question de pratique sur un vrai projet.