Tuto Webflow 2026 : créer son site en 7 étapes, sans coder

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. Si votre objectif est un site d'entreprise livré à date, avec design sur mesure et SEO, comparez le temps à y passer avec l'accompagnement d'une agence Webflow : chez Synqro, un site complet est livré en 8 à 12 semaines.

Étape 0 : préparer l'arborescence et les contenus

La plupart des débutants ouvrent le Designer trop tôt. Une heure de préparation évite de reconstruire des pages entières ensuite.

• Listez les pages et leur objectif : accueil, offres, à propos, contact, blog. Un cahier des charges de site internet, même court, suffit à fixer le périmètre.
• Rassemblez l'identité visuelle : logo, couleurs, polices et règles d'usage. Si vous n'avez pas de charte graphique, fixez au moins deux polices et une palette de cinq couleurs.
• Préparez les textes et les images : même en version provisoire. Construire avec des faux textes cache les problèmes de longueur et de hiérarchie.

É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.

Les erreurs de débutant qui coûtent le plus cher

1. Une classe par élément : le site devient impossible à modifier d'un coup. Réutilisez les classes et ajoutez des classes combinées pour les variantes.
2. Des tailles fixes en pixels partout : la page casse sur mobile. Utilisez des largeurs maximales et des unités relatives.
3. Le style du titre confondu avec sa balise : un texte qui ressemble à un H2 n'en est pas un pour Google. Vérifiez la balise dans Element settings.
4. Des images trop lourdes : elles ralentissent le site et consomment la bande passante du plan. Exportez en WebP ou AVIF au bon format avant l'import.

La liste complète est dans notre article sur les erreurs de création de 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. Refaites ensuite ce tuto sur un vrai projet : c'est là que les réflexes de classes et de composants s'installent.