Tuto Webflow : créer son site pas à pas (guide 2026)

Un tuto Webflow utile ne liste pas tous les boutons : il donne l'ordre dans lequel travailler. C'est ce que fait ce guide. Chaque étape indique où cliquer, ce qui peut bloquer et quel plan Webflow est nécessaire.

Ce qu'il faut savoir avant de commencer un tuto Webflow

Webflow est un éditeur visuel qui écrit le HTML et le CSS à votre place. Chaque réglage du panneau Style correspond à une propriété CSS réelle : marge, padding, display flex, grille. C'est ce qui rend l'outil puissant, et c'est aussi ce qui surprend les débutants habitués aux constructeurs par blocs.

• Prérequis : aucun code, mais les notions de boîte, de marge et de hiérarchie de titres aident beaucoup.
• Coût pour apprendre : zéro. Le Workspace Starter est gratuit et permet de construire et de prévisualiser un site.
• Coût pour publier : un plan Site payant pour utiliser votre domaine, 15 $ par mois sans CMS ou 25 $ avec CMS en facturation annuelle.

Si vous partez de zéro, lisez d'abord notre guide Webflow pour débutants, qui explique le vocabulaire de base.

Étape 1 : créer votre compte et votre premier site

1. Créez un compte sur webflow.com. Le Dashboard affiche ensuite vos sites et votre Workspace.
2. Cliquez sur New site, puis choisissez une page blanche ou un template. Un template aide à comprendre une structure existante, une page blanche oblige à tout penser.
3. Nommez le site. Ce nom sert de sous-domaine de test (nom.webflow.io) tant que vous n'avez pas branché votre domaine.
4. Dans les réglages du site, renseignez dès maintenant la favicon, le fuseau horaire et la langue du site. Ces réglages sont souvent oubliés au moment du lancement.

Étape 2 : comprendre l'interface du Designer

Le Designer s'organise autour d'un canevas central et de panneaux latéraux. Cinq panneaux couvrent l'essentiel du travail courant :

• Add (à gauche) : les éléments à glisser sur la page (section, container, div, texte, image, formulaire) et les layouts prêts à l'emploi.
• Navigator : l'arborescence des éléments de la page. C'est le moyen le plus sûr de sélectionner un élément imbriqué.
• Style (à droite) : les classes et leurs propriétés CSS : mise en page, espacements, typographie, couleurs, effets.
• Element settings : les réglages propres à l'élément sélectionné : balise de titre, texte alternatif, lien, attributs.
• Pages et CMS : la liste des pages statiques et des Collections, avec les réglages SEO de chaque page.

Étape 3 : construire une page responsive

Construisez toujours de l'extérieur vers l'intérieur : une Section pleine largeur, un Container qui limite la largeur du contenu, puis les blocs de contenu. Donnez une classe claire à chaque élément dès sa création, par exemple section_hero ou hero_title, et réutilisez-la plutôt que d'en créer une nouvelle.

• Flexbox : pour aligner des éléments sur une ligne ou une colonne, avec un espacement (gap) régulier.
• Grid : pour les mises en page en colonnes, comme une grille de cartes ou une page tarifs.
• Breakpoints : le style se définit sur la vue de base (desktop) et descend en cascade vers la tablette puis le mobile. Une modification faite en vue mobile ne remonte pas vers le desktop.
• Unités : préférez rem pour les tailles de texte et les largeurs maximales en pourcentage ou en rem, pour que la page s'adapte sans retouches à chaque taille d'écran.

Vérifiez chaque page sur tablette et mobile avant de passer à la suivante. Depuis le 5 juillet 2024, Google explore les sites avec son robot smartphone, comme l'a confirmé le blog Google Search Central (juin 2024). La version mobile est donc celle qui compte pour le référencement.

Étape 4 : créer des composants réutilisables

La navigation, le footer, un bouton d'appel à l'action ou une carte d'article reviennent sur plusieurs pages. Transformez-les en composants : sélectionnez l'élément, ouvrez le panneau Components (Cmd + Maj + A sur Mac, Ctrl + Maj + A sur Windows) et choisissez Convert selection, comme le décrit la documentation Webflow sur les composants (mise à jour en septembre 2026). Toute modification du composant principal se répercute partout. Les propriétés, variantes et slots sont expliqués dans notre guide des composants Webflow personnalisés.

Étape 5 : configurer le CMS Webflow

Le CMS stocke vos contenus répétitifs dans des Collections : articles, études de cas, membres de l'équipe, offres d'emploi. Chaque Collection a ses champs et génère une page modèle qui affiche chaque élément.

1. Dans le panneau CMS, créez une Collection, par exemple Articles.
2. Ajoutez les champs utiles : titre, slug, résumé, texte enrichi, image, catégorie (champ de référence), date, et deux champs dédiés au titre SEO et à la meta description.
3. Mettez en page la page modèle de la Collection et reliez chaque élément à un champ.
4. Affichez les articles ailleurs avec une Collection List, filtrée et triée (par exemple les trois plus récents).

Pour publier un site avec CMS sur votre domaine, il faut le plan Premium (25 $ par mois en annuel), qui inclut 20 000 items et 40 Collections. Chez Synqro, avant de remplir le moindre champ, nous collectons les données réelles du client (plaquettes, chiffres, cas concrets) : c'est ce qui évite les contenus génériques que ni Google ni les IA ne reprennent.

Étape 6 : régler le SEO de base dans Webflow

• Titre et meta description : dans les réglages de chaque page. Pour les pages CMS, reliez-les aux champs SEO de la Collection.
• Un seul H1 par page : la balise se choisit dans Element settings, indépendamment de la taille visuelle du texte.
• Texte alternatif : renseignez-le pour chaque image porteuse de sens, et marquez les images décoratives comme telles.
• Sitemap : activez la génération automatique dans les réglages SEO du site, puis déclarez-le dans Google Search Console.
• Redirections 301 : à créer dans l'onglet Publishing des réglages du site dès qu'une URL change.
• Données structurées : ajoutez votre JSON-LD dans le code personnalisé de la page (zone head).

Pour aller plus loin (maillage, contenus, netlinking), suivez notre stratégie SEO pour un site Webflow.

Étape 7 : publier et maintenir votre site

Le bouton Publish, en haut à droite, publie vers le sous-domaine webflow.io, vers votre domaine, ou les deux. Avant la première mise en ligne sur votre domaine, passez cette liste :

• Chaque page vérifiée en desktop, tablette et mobile.
• Formulaires testés : l'adresse de notification reçoit bien les envois.
• Aucun lien vers une adresse webflow.io dans le menu ou le footer.
• Titres, meta descriptions et images de partage renseignés.
• Outils de mesure branchés, avec un bandeau cookies conforme si vous déposez des traceurs.

Ensuite, Webflow gère l'hébergement et les mises à jour de la plateforme. Vous gardez la main sur le contenu, et vous pouvez revenir à une version précédente grâce aux sauvegardes, expliquées dans notre guide pour sauvegarder et restaurer un site Webflow.

Récapitulatif : quelle étape demande quel plan ?

Pour progresser après ce tuto, les parcours gratuits de Webflow University sont la meilleure suite. Si le temps vous manque, une agence Webflow comme Synqro livre une landing page en 2 semaines et un site complet en 8 à 12 semaines.