Template Webflow : choisir et adapter un modèle
webflow

Template Webflow : choisir et adapter un modèle

9 min de lecture

Un template Webflow est un modèle de site complet, pages, styles et parfois collections, que la plateforme ajoute au tableau de bord comme un nouveau projet à personnaliser. Bien choisi, il épargne des jours de mise en page. Mal choisi, il impose des classes confuses, une licence inadaptée et un long nettoyage avant la mise en ligne.

Ce qu’un template Webflow contient vraiment

Chez Webflow, le modèle recouvre un site entier : arborescence de pages, styles organisés en classes, interactions, formulaires et, selon les cas, des collections du système de gestion de contenu (CMS) déjà garnies d’entrées de démonstration. Le centre d’aide de Webflow précise qu’un modèle sélectionné, gratuit ou payant, rejoint le tableau de bord sous la forme d’un site entièrement nouveau.

Un site à reprendre, pas un habillage à poser

Cette mécanique déroute les habitués des CMS à thèmes. Le même centre d’aide l’écrit sans détour : la conception d’un modèle ne remplace pas automatiquement celle d’un site existant de l’espace de travail. Changer de modèle revient donc à construire dans un nouveau projet, puis à y rapatrier le contenu, en s’appuyant sur deux passerelles documentées : la reprise des données de collections et la copie d’éléments entre sites.

Une page, plusieurs pages ou plusieurs mises en page

La place de marché range ses modèles en trois formats : page unique (One Page), multipage (Multi Page) et variantes de mise en page (Multi Layout). Le premier convient à une page d’atterrissage ou à un événement. Le deuxième couvre le site vitrine classique. Le troisième livre plusieurs versions de chaque section, pratiques pour composer par assemblage, au prix d’une feuille de styles plus dense.

Place de marché officielle : gratuits, payants et licence

La vitrine officielle revendique, dans le titre de sa page, plus de 7 000 modèles de sites gratuits et premium. Des pastilles signalent les modèles livrés avec des collections CMS ou avec le commerce en ligne intégré. Selon les consignes publiées pour les créateurs, chaque modèle soumis passe par une revue de l’équipe de la place de marché et doit atteindre au moins le niveau « Good » sur toutes les rubriques de sa grille de qualité. Ce filtre écarte le bâclé, sans garantir l’adéquation au projet.

Une licence pour un seul site

Point à lire avant tout paiement : d’après le centre d’aide de Webflow, chaque modèle payant s’accompagne d’une licence à usage unique, valable pour un seul site. Réutiliser le même modèle pour un autre client ou un autre site suppose une nouvelle licence, et la fonction de duplication le rappelle en demandant si la copie sert le même client. Pour un indépendant qui livre plusieurs sites par an, ce détail pèse autant que le prix affiché.

Deux pages, puis un forfait payant

Un site issu d’un modèle reste modifiable sans abonnement, mais le centre d’aide fixe une limite nette : au-delà de deux pages, il réclame un forfait de site payant ou un forfait d’espace de travail payant. Un modèle multipage implique donc un budget récurrent, distinct de son prix d’achat. Le nombre d’entrées de collections dépend lui aussi du forfait, détail sensible pour un modèle de blog chargé d’articles fictifs.

Un support assuré par le créateur

Webflow distribue les modèles, mais leur conception revient à des créateurs tiers. Le centre d’aide oriente donc les acheteurs vers l’auteur, joignable depuis la présentation du modèle ou l’onglet d’assistance de sa fiche. Sa documentation et sa disponibilité deviennent des critères à part entière.

Maquette en carton de pages de site faite de rectangles colorés, vue de dessus

Les critères qui départagent deux templates Webflow

Une capture flatteuse ne dit rien de la structure d’un template Webflow. Avant l’achat, l’aperçu dans l’interface de conception (Preview in Designer) ouvre le panneau des pages et le navigateur d’éléments comme dans un vrai projet. Quatre vérifications s’y mènent.

La structure des collections

Un modèle doté de collections impose un modèle de données : types de contenus, champs, liaisons. La comparaison utile se fait entre ces champs et les contenus réels du projet. Une collection de réalisations dépourvue de champ client, de date ou de catégorie obligera à bricoler dès la première semaine. La logique des champs et des références est détaillée dans notre article sur le fonctionnement des collections Webflow, et les consignes aux créateurs exigent des segments d’adresse (slugs) de collection au singulier.

Le nommage des classes

Les mêmes consignes demandent un format de nommage unique sur tout le modèle, choisi parmi plusieurs conventions reconnues : casse serpent, casse Pascal, casse chameau, casse kebab ou méthode BEM (bloc, élément, modificateur). La convention importe peu, sa constance beaucoup. Dans le navigateur, des noms génériques numérotés ou des empilements de classes combinées à rallonge annoncent des heures de démêlage au premier changement de couleur.

Le comportement sur mobile

Webflow décline chaque page sur plusieurs points de rupture, dont tablette, mobile en paysage, mobile en portrait. Les consignes de soumission demandent des variables à valeurs adaptatives pour ces trois tailles. L’aperçu se parcourt donc sur chacune, en observant les menus, les grilles de cartes et les titres longs, là où les défauts se cachent.

Les licences des ressources incluses

Le prix du modèle ne règle pas forcément le sort de tout ce qu’il contient. Les consignes exigent une page de licences, à l’adresse /licenses, et des informations de licence pour chaque ressource personnalisée : polices, icônes, illustrations, photos. Cette page se lit avant l’achat, pour savoir quelles images de démonstration peuvent rester en ligne et lesquelles devront être remplacées.

Adapter un modèle Webflow sans casser sa logique

L’adaptation commence par les fondations et se termine par le contenu. Remplacer les textes avant d’avoir réglé couleurs et typographies produit un site hybride, à moitié aux couleurs du créateur.

Partir de la page de guide de style

Les modèles conformes aux consignes actuelles livrent une page de guide de style qui rassemble titres, paragraphes, liens et boutons. Cette page sert de banc d’essai : un style modifié à cet endroit se répercute partout où la classe est utilisée. Les styles globaux passent en premier (corps de texte, niveaux de titres, liens), puis les classes de boutons et de sections.

Faire travailler les variables

La Webflow University présente les variables comme le socle d’un système de conception cohérent : une couleur, une taille ou une police enregistrée une fois, puis appelée depuis le panneau de styles. Changer sa valeur la met à jour partout, y compris sur des éléments de classes différentes. La place de marché en exige pour les couleurs, la typographie, les espacements, les rayons de bordure et les ombres. Un modèle qui les respecte change d’identité visuelle en une séance.

Mains qui classent des cartes de couleur en colonnes sur un bureau

Garder les composants intacts

Les composants transforment un groupe d’éléments en brique réutilisable. Les consignes imposent que la barre de navigation, le pied de page et les blocs d’appel à l’action soient des composants sur chaque page du modèle. Le menu se retouche alors une seule fois, à condition de ne jamais détacher ces composants pour une correction ponctuelle.

Remplacer le contenu de démonstration

Vient enfin le contenu : textes, visuels, entrées de collections. Chaque entrée fictive se supprime ou se réécrit, car une fiche oubliée finit indexée. Les consignes demandent un texte alternatif pour les images importantes et un seul titre de premier niveau par page, deux réglages à revérifier une fois le contenu réel en place.

Les pièges qui coûtent cher après l’achat

Des interactions que personne ne sait retoucher

Le centre d’aide prévient que les modèles riches en interactions, en menus personnalisés ou en fenêtres modales peuvent dérouter les nouveaux utilisateurs. Les consignes de soumission exigent dans ce cas une page d’instructions. Son absence, sur un modèle très animé, laisse présager des animations figées faute de savoir les modifier.

Des collections plus riches que le besoin

Un modèle prévu pour un magazine embarque parfois des collections d’auteurs, de catégories et d’étiquettes dont un site vitrine n’a aucun usage. Les conserver alourdit la maintenance et consomme des entrées comptées par le forfait. Les supprimer exige de repérer chaque liste qui s’y rattache.

Ordinateur portable vu de dos et lampe sur un bureau minimaliste

Template ou page vierge : trancher selon le projet

Le modèle l’emporte quand la structure est standard, l’équipe réduite et l’identité visuelle encore souple. La page vierge reprend l’avantage dans trois situations, à commencer par la maquette déjà dessinée, qui se construit plus proprement depuis zéro selon notre méthode du passage de Figma à Webflow.

Une refonte qui conserve une arborescence et des adresses existantes s’organise plutôt autour du plan de redirections, décrit dans notre dossier sur les étapes d’une migration vers Webflow. Enfin, une équipe qui veut maîtriser l’outil apprend davantage sur un site vide. Le centre d’aide recommande d’ailleurs le cours d’initiation Webflow 101 pour acquérir les bases avant d’exploiter pleinement un modèle.

Les parcours plus complets figurent dans notre panorama des formations Webflow. Une équipe qui produit plusieurs sites peut aussi ériger l’un d’eux en modèle partagé de l’espace de travail. Quand l’adaptation dépasse le temps disponible, les critères pour la confier figurent dans notre guide pour choisir une agence Webflow.

Liste de contrôle avant de payer un modèle

Sept vérifications écartent la plupart des mauvaises surprises :

  • licence : un site couvert, une licence par client ;
  • forfait : budget récurrent prévu dès que le site dépasse deux pages ;
  • collections : champs comparés aux contenus réels ;
  • classes : convention de nommage constante, classes combinées en nombre raisonnable ;
  • affichage mobile : aperçu parcouru sur tablette, en paysage et en portrait ;
  • ressources : page de licences présente et lue ;
  • créateur : documentation, page d’instructions et contact d’assistance accessibles.

Un modèle Webflow qui échoue à deux de ces contrôles mérite d’être écarté, même gratuit.

Questions fréquentes sur les templates Webflow

Webflow propose-t-il des modèles gratuits ?

Oui. Le centre d’aide de Webflow mentionne de nombreux modèles gratuits, du site d’une seule page au site d’entreprise multipage. Un bouton d’utilisation gratuite, puis le choix d’un nom de site, suffisent à l’ajouter au tableau de bord. La gratuité porte sur le modèle lui-même : la règle des deux pages et le forfait éventuel s’appliquent de la même manière qu’à un modèle payant.

Un modèle s’ajoute-t-il à un projet déjà en cours ?

Pas comme un thème. Un modèle crée systématiquement un nouveau site dans l’espace de travail, et son design ne remplace pas celui d’un site existant. Pour emprunter une section précise, la copie d’éléments entre sites du même espace de travail reste possible, tout comme la reprise des données de collections. Cette méthode convient à un bloc isolé ; pour une refonte entière, reconstruire dans le site issu du modèle donne un résultat plus propre.

Le code d’un site issu d’un modèle peut-il être exporté ?

Oui, sous condition. Le centre d’aide de Webflow indique que l’exportation du code d’un site bâti sur un modèle suppose un forfait d’espace de travail payant. Le point se tranche au moment du choix, avec la licence et le forfait de site, pour éviter une dépense imprévue le jour où une copie autonome du site devient nécessaire, pour l’archiver ou la confier à un autre hébergeur.