Webflow, tout le monde en parle. Tu as vu des sites magnifiques faits avec, tu t'es dit « je veux faire pareil », et puis tu as ouvert l'outil. Là, panique.
Des panneaux partout. Du vocabulaire bizarre. L'impression qu'il faut un diplôme d'informatique pour poser un simple bouton.
Respire. C'est normal.
L'outil a une courbe d'apprentissage réelle, mais elle est franchissable. Dans ce parcours Webflow débutant, on construit ensemble ton tout premier site : une page one-page propre, du genre que tu pourrais vendre à un client. Du compte vierge jusqu'à la mise en ligne.
Pas de théorie en l'air. On clique, on construit, on publie.
Avant de plonger, voici le cours complet en vidéo qui suit exactement cette logique, de la page blanche au site animé. Garde-le sous le coude, on déroule la version écrite juste en dessous.
VIDEO
Faut-il savoir coder pour se lancer sur Webflow ?
Non, tu n'as pas besoin de coder. Pour débuter sur Webflow, tu crées un compte gratuit, tu ouvres le Designer, et tu construis ta page en empilant des blocs que tu mets en forme visuellement. Compte une dizaine d'heures pour être à l'aise avec les bases, et un premier site one-page en un week-end.
La vraie question, ce n'est pas « est-ce que c'est dur ». C'est « est-ce que tu suis une méthode, ou pas ».
La plupart des débutants ouvrent l'outil, balancent des blocs au hasard, et se retrouvent avec un fouillis impossible à modifier.
On appelle ça la « div soup » : des boîtes empilées sans logique et sans noms clairs. Le site marche. Mais le jour où tu veux changer une couleur, tu galères une heure.
L'objectif ici, c'est de t'éviter ce piège dès la première page.
Tu veux d'abord la vue d'ensemble de la plateforme, à quoi elle sert et où elle se place face à Wix ou WordPress ? Garde de côté le guide complet de Webflow . Ici, on passe direct à la pratique.
Crée ton compte et ouvre le Webflow Designer
Rends-toi sur le site officiel de Webflow et clique sur « Get started ». Tu peux t'inscrire avec ton e-mail ou ton compte Google.
C'est gratuit. Et tu n'as pas besoin de carte bancaire pour commencer.
Une fois connecté, tu arrives sur ton tableau de bord. Clique sur « New site », puis choisis « Blank site » (une page blanche).
Pourquoi partir d'une page blanche plutôt que d'un template (un site déjà construit que tu personnalises) ? Parce qu'au début, tu apprends dix fois plus vite en construisant toi-même. Un template tout prêt, tu ne comprends pas ce qu'il y a dessous.
Cela dit, pour un vrai projet pressé, un bon template fait gagner des jours. On a trié les meilleurs templates pour débuter si ça t'intéresse plus tard.
Donne un nom à ton site, valide, et te voilà dans le Webflow Designer.
Le Designer, c'est ton atelier. Le canvas au centre, le panneau des éléments à gauche, le panneau des styles à droite. C'est là que tout se passe.
Le canvas et la box model : comment Webflow pense ta page
Avant de poser quoi que ce soit, un concept à intégrer. Un seul. Mais il change tout.
Sur le web, tout est une boîte. Une image, un titre, un bouton : chaque élément est une boîte rectangulaire, et ces boîtes s'emboîtent les unes dans les autres. C'est ce qu'on appelle la box model (le modèle de boîte).
Ouvre n'importe quel site, fais clic droit puis « Inspecter ». Tu vas voir des boîtes dans des boîtes dans des boîtes. L'outil n'a rien inventé : il te montre juste cette structure de façon visuelle, sans que tu touches au code.
Le canvas, lui, c'est la zone blanche au centre du Designer où ta page prend forme. Tout ce que tu glisses dessus, tu le vois en direct.
Ta brique de base s'appelle une div (une boîte vide qui sert à regrouper et organiser d'autres éléments). Tu vas en empiler beaucoup.
Une section, un container, une div : au fond, c'est la même brique. Juste avec des réglages par défaut différents pour t'aider à t'y retrouver.
La box model gère aussi l'espace : le padding (l'espace intérieur de la boîte) et le margin (l'espace extérieur, entre deux boîtes). Maîtrise ces deux réglages et 70 % de ta mise en page est déjà sous contrôle.
Comprendre la box model, c'est comprendre Webflow. Le reste, c'est de la pratique.
Monte ta première section hero (et nomme tes classes)
On attaque le concret. La section hero, c'est le grand bloc en haut de page : un titre, une phrase d'accroche, un bouton. La première chose que voit ton visiteur.
Voici les étapes :
Dans le panneau de gauche, glisse une « Section » sur le canvas. Une section, c'est une grande div qui délimite une zone de la page. Glisse un « Container » à l'intérieur. Le container centre ton contenu et l'empêche de coller aux bords de l'écran. Ajoute un titre (« Heading ») et un paragraphe (« Text block ») dedans. Ajoute un bouton (« Button »). Maintenant, le moment clé. Sélectionne ta section et, dans le panneau de droite, donne-lui un nom dans le champ « Selector ». Par exemple « section-hero ».
Ce nom, c'est une classe. Une classe, c'est une étiquette de style que tu réutilises. Quand tu colores une classe en bleu, tout ce qui porte cette classe devient bleu, partout sur le site, d'un coup.
C'est LE réflexe qui sépare un Webflow débutant d'un pro : nommer ses classes proprement, dès le départ. Pas « Div Block 12 », mais « section-hero » ou « bouton-principal ».
Bien gérer tes classes Webflow, c'est ce qui rend un site modifiable en deux clics plutôt qu'en deux heures.
Attention : ne laisse jamais une classe garder son nom par défaut, du genre « Div Block 7 ». Dans six mois, tu ne sauras plus à quoi elle sert. Nomme chaque classe selon son rôle (section-hero, carte-prix, bouton-principal) : ton futur toi te remerciera.
Ajoute une navbar et empile le reste de tes sections
Ton hero est posé. On continue vers le haut, puis vers le bas.
En haut, il te faut une navbar (la barre de navigation, ce menu tout en haut du site avec le logo et les liens). Bonne nouvelle : l'outil en propose une toute prête.
Glisse l'élément « Navbar » depuis le panneau. Elle arrive avec un logo, des liens et un menu mobile déjà fonctionnels. Tu n'as plus qu'à remplacer le texte et les couleurs.
Pour le reste de la page, tu répètes la logique du hero. Une section égale un bloc de contenu :
Ajoute une section. Mets un container dedans. Remplis avec tes titres, tes textes, tes images. Nomme tes classes au fur et à mesure. Empile une section « à propos », une section « services », une section « tarifs », puis un footer (le pied de page, en bas, avec les mentions et les liens). Et voilà une page one-page complète.
Le rythme devient vite naturel. Section, container, contenu, classes. Section, container, contenu, classes.
Rendre le site responsive sans tout casser
Ton site est beau sur ton écran d'ordinateur. Mais plus de la moitié de tes visiteurs seront sur mobile. Il faut que ça tienne sur petit écran aussi.
Ça porte un nom : le responsive, le fait qu'un site s'adapte tout seul à la taille de l'écran.
En haut du Designer, tu as des icônes : ordinateur, tablette, mobile paysage, mobile portrait. Ce sont les breakpoints (les différentes tailles d'écran sur lesquelles tu ajustes ton design).
La règle d'or : tu construis d'abord sur la vue ordinateur, puis tu descends vers le mobile pour corriger ce qui dépasse.
Et l'astuce qui sauve du temps. Un changement fait sur la vue ordinateur se répercute sur toutes les tailles en dessous. Mais un changement fait sur mobile ne remonte pas vers le haut.
Donc tu travailles toujours du plus grand au plus petit.
Sur mobile, tu vas surtout réduire des tailles de texte, passer des éléments côte à côte en empilé, et alléger les marges. Rien de sorcier une fois que tu as la logique.
Et teste sur ton propre téléphone, vraiment.
Astuce de pro : avant de publier, clique sur l'icône oeil (Preview) et redimensionne ta fenêtre à la main. Tu repères en dix secondes les textes qui débordent et les images mal cadrées sur petit écran, sans changer d'appareil.
Mettre ton site en ligne et brancher un domaine personnalisé
Le moment de vérité. Tu vas publier, c'est-à-dire rendre ton site accessible à tout le monde sur internet.
En haut à droite, le bouton « Publish ». Clique dessus.
L'outil te propose d'office une adresse gratuite en .webflow.io (du genre ton-site.webflow.io). Parfait pour tester, montrer un brouillon à un client ou t'entraîner. Gratuit, sans engagement.
Mais pour un vrai site pro, tu veux ta propre adresse : un domaine personnalisé (ton nom de domaine à toi, du style ton-agence.com).
Pour brancher un domaine personnalisé, il te faut un plan payant (le plan Site).
Tu achètes ton domaine chez un fournisseur (OVH, Gandi, Infomaniak), puis tu le relies à ton projet via les réglages. L'hébergement (le stockage qui rend ton site visible en ligne) est géré par la plateforme, tu n'as rien à installer.
Petit point budget. Les plans se ressemblent, et la facturation annuelle piège plus d'un débutant. On a démêlé les tarifs et plans Webflow pour que tu choisisses sans te tromper.
Une fois publié, ton site est en ligne. Pour de vrai.
Après ton premier site : Client-First, CMS et la suite
Premier site en ligne. Bravo, sincèrement. La marche la plus haute, c'est celle-là.
Maintenant, deux mots qui vont vite revenir dans ta vie de webdesigner.
Le premier : Client-First. C'est une méthode de nommage des classes, créée par l'agence Finsweet et devenue un standard chez les pros.
Au lieu de nommer tes classes au feeling, tu suis une convention claire et réutilisable. Jette un œil à la méthode Client-First de Finsweet quand tu seras prêt.
Adopte-la tôt. Ça t'évite de tout réapprendre plus tard.
Le second : le CMS (le système qui gère le contenu dynamique, comme un blog ou un portfolio).
Plutôt que de recréer 30 pages à la main, tu crées un seul modèle. Le CMS génère ensuite les pages tout seul à partir de ta liste de contenus.
Tu n'as pas besoin de ça pour ton premier site one-page. Mais sache que ça existe : c'est la suite logique.
Construire seul, c'est super formateur. Mais pour vendre des sites haut de gamme sans tâtonner pendant des mois, un cadre accélère tout.
La formation Webflow de CORIACE déroule exactement ce chemin. Plus de 270 leçons, de ta première section jusqu'à l'e-commerce, en passant par le SEO et la livraison au client.
Le vrai plus, c'est l'assistance prioritaire.
Si tu bloques, l'équipe intervient directement sur ton projet et te filme un tuto vidéo perso pour ta situation, sous 48 heures. C'est ce qui fait qu'on termine une formation au lieu de la lâcher en route.
Pas encore prêt à investir ? Commence par l'initiation Webflow offerte . Tu verras si la méthode te parle avant de te lancer.
Ton premier site, tu viens de le faire. Le centième sera dix fois plus rapide.
.avif)
