Webflow est un outil de création de sites qui se manipule à la souris, comme un logiciel de mise en page, mais qui produit un vrai code propre derrière. On y dessine chaque bloc, on règle ses marges et ses couleurs, et le site s’adapte aux écrans de téléphone et de tablette.
J’ai réalisé plusieurs sites Webflow pour des entreprises industrielles et des agences partenaires. Ce que j’ai appris, c’est que l’outil récompense ceux qui s’organisent dès le départ et punit ceux qui empilent les réglages au hasard.
Cette leçon vous donne les premiers pas : savoir si Webflow vous convient, comprendre sa logique de boîtes et de classes, utiliser le CMS et publier sans oublier les réglages qui comptent pour Google.
Les projets pour lesquels Webflow est un bon choix
Webflow convient bien à un site vitrine soigné : une entreprise de services, un artisan qui veut se démarquer, un cabinet de conseil, une startup qui présente son offre. Il brille quand le design compte et que le site doit rester rapide et stable, sans extensions à mettre à jour chaque mois.
Il devient moins pertinent dans trois cas :
- vous voulez vendre des centaines de produits en ligne, un outil dédié au e-commerce sera plus adapté ;
- vous avez besoin de fonctions très spécifiques (réservation complexe, espace client, forum) qui demandent des intégrations externes ;
- personne dans l’entreprise n’a le temps d’apprendre l’outil, et vous préférez un éditeur plus simple où l’on tape son texte dans une page.
Pensez aussi à l’abonnement : Webflow facture l’hébergement du site, avec des formules différentes selon que vous utilisez le CMS ou non. Regardez les offres sur leur site avant de vous lancer, elles évoluent régulièrement.
La logique des boîtes : section, conteneur, grille
Dans Webflow, tout est une boîte posée dans une autre boîte. Ce qui paraît déroutant au début devient vite un atout, à condition de suivre toujours la même hiérarchie :
- une section pour chaque grand bloc de la page (héros, services, avis, contact) ;
- un conteneur à l’intérieur, qui limite la largeur du contenu et le centre ;
- une grille ou une disposition en flex pour ranger les éléments côte à côte ;
- enfin les éléments eux-mêmes : titres, paragraphes, images, boutons.
Imaginons un paysagiste installé près de Givors qui veut présenter trois prestations. Une section « Prestations », un conteneur, une grille de trois colonnes, et dans chaque colonne une image, un titre H3 et un texte court. Sur téléphone, la grille passe à une colonne en deux clics.
Gardez le panneau « Navigator » ouvert en permanence. Il montre l’arbre de vos boîtes et vous évite de poser un titre au mauvais endroit.
Des classes nommées avec méthode pour garder un site cohérent
Le style dans Webflow passe par des classes : vous donnez un nom à un élément (par exemple « bouton-principal ») et tous les éléments qui portent ce nom partagent le même style. Modifiez la couleur une fois, elle change sur tout le site.
Commencez par régler les styles de base dans la page de style du site : la police du corps, les tailles des titres H1 à H3, la couleur des liens. Ensuite seulement, créez vos classes. Trois habitudes vous feront gagner des heures :
- des noms clairs en français et sans accent : « section-services », « carte-prestation », « titre-section » ;
- des couleurs enregistrées comme variables, pour ne jamais retaper un code couleur ;
- des composants pour l’en-tête et le pied de page, afin qu’une correction s’applique à toutes les pages.
L’erreur classique est de créer une nouvelle classe à chaque élément (« texte 2 », « texte 3 copie »). Au bout d’un mois, plus personne ne sait quel style s’applique où.
Le CMS pour les contenus qui se répètent
Le CMS de Webflow sert aux contenus qui ont toujours la même forme : articles de blog, réalisations, offres d’emploi, membres de l’équipe. Vous créez une collection avec ses champs (titre, image, date, texte riche), puis un modèle de page qui s’applique à chaque fiche.
Pour notre paysagiste, une collection « Réalisations » avec la commune, le type de chantier, trois photos et un texte. Chaque nouveau chantier se publie en remplissant un formulaire, sans toucher au design.
N’utilisez pas le CMS pour des pages uniques comme « À propos » ou « Contact » : elles se construisent comme des pages statiques. Et prévoyez dès le départ un champ pour le titre SEO et la description de chaque fiche.
Vérifier mobile, référencement et formulaires avant de publier
Webflow propose plusieurs points d’arrêt : ordinateur, tablette, téléphone en largeur et en hauteur. Un style modifié sur ordinateur descend vers les écrans plus petits, l’inverse n’est pas vrai. Passez chaque page en vue téléphone et corrigez les textes trop grands, les marges trop larges et les images coupées.
Ensuite, ouvrez les réglages de chaque page : titre SEO, description, image de partage, adresse courte et lisible. Vérifiez qu’il n’y a qu’un seul H1 par page. Remplissez le texte alternatif de chaque image dans le gestionnaire de fichiers.
Testez enfin le formulaire de contact : indiquez l’adresse e-mail qui reçoit les demandes et envoyez un message d’essai depuis un téléphone. Pour la mise en ligne, Webflow publie d’abord sur une adresse provisoire, puis sur votre domaine une fois les réglages DNS faits chez votre registraire.
Exercice : maquetter votre page d’accueil en trois sections
Créez un compte et un projet vierge, puis construisez seulement trois sections de votre future page d’accueil :
- un héros avec votre H1, une phrase d’explication et un bouton « Demander un devis » ;
- une grille de trois prestations avec image, titre et texte court ;
- un bloc de contact avec téléphone et adresse e-mail.
Imposez-vous de n’utiliser que cinq classes au total et de vérifier le résultat sur téléphone avant de passer à la suite. Si vous y arrivez sans vous perdre, l’outil est fait pour vous.
Les réflexes Webflow à installer dès le premier projet
Webflow est un bon outil pour un site vitrine où le design et la rapidité comptent. Sa force tient dans sa logique de boîtes et de classes partagées, qu’il faut respecter dès la première page.
Réglez les styles de base avant de créer vos classes, réservez le CMS aux contenus répétitifs et ne publiez qu’après avoir vérifié chaque page sur téléphone, avec ses réglages SEO et un formulaire testé.