Le guide de style gratuit et clonable de Webflow University réunit les balises de base que vous pouvez styler. Clonez-le, collez-le dans un nouveau projet et partez avec un design system.
Webflow est aussi simple et flexible qu'un outil peut l'être, mais au démarrage d'un projet, on peut passer des heures à styler des éléments de base, puis recommencer à l'identique sur le suivant. Certains configurent un guide de style dès le départ : quand vous déposez un paragraphe ou n'importe quel autre élément, son style de base est déjà en place. C'est comme ça que ça devrait se passer : un design system solide rend tout simple et rapide, et les règles de votre projet sont posées. Le problème, c'est que personne n'a envie d'ajouter chaque balise de base, comme <p>, <h1>, <h2> et les autres, à chaque nouveau projet. Oui, on y gagne à la longue, mais pourquoi s'en charger quand les experts de Webflow l'ont déjà fait pour vous ? Et oui, encore une fois, c'est pour cela que nous adorons l'équipe Webflow.
Suivez simplement le lien vers le projet clonable que Webflow University a créé, clonez-le, ouvrez-le, copiez tout et collez le contenu dans la page de guide de style de votre nouveau projet vide, puis stylez les éléments et c'est terminé. Webflow a fait tout le travail, et le projet contient chaque balise de base de Webflow. Il ne vous reste qu'à les styler pour obtenir un design system pour votre projet Webflow, dont tout studio ou designer Webflow a besoin.
Rendez-vous ici pour trouver le projet.
Qu'est-ce que le modèle de guide de style Webflow ?
C'est un projet Webflow gratuit et clonable (le guide de style « Acme ») qui réunit sur une seule page les balises HTML que vous pouvez styler dans Webflow : titres, paragraphes, liens, listes, images, citations, étiquettes, code, etc. Voyez-le comme un design system vierge. Vous ne partez pas d'une page blanche, mais d'une page qui liste déjà tout ce que vous aurez à styler.
Comment l'utiliser sur un nouveau projet
- Ouvrez le lien ci-dessus et clonez le projet dans votre propre espace de travail.
- Ouvrez le clone dans le Designer et allez à sa page de guide de style.
- Sélectionnez la section du guide de style sur cette page (tout ce qu'elle contient) et copiez-la.
- Ouvrez votre nouveau projet et collez-la dans une page de guide de style vide.
- Stylez chaque élément une seule fois (vos titres, paragraphes, liens, etc.) et tout ce que vous construirez ensuite héritera de ces règles.
- Stylez vous-même la balise Body (All pages) : le body d'une page ne peut pas être copié, il n'est donc pas dans le modèle. Sélectionnez l'élément Body sur la page de guide de style de votre nouveau projet et définissez-y votre police par défaut, sa taille, l'interligne et l'arrière-plan (le guide des balises HTML de Webflow).
À savoir : selon Webflow, les styles appliqués aux balises HTML de base ne sont pas conservés quand vous collez d'un projet à l'autre. La page collée apporte la structure et les classes, vous faites donc le stylage dans votre nouveau projet, ce qui est de toute façon le but de l'exercice (la note de Webflow sur le copier-coller entre projets).
Pourquoi démarrer chaque projet avec un guide de style ?
Parce que vous stylez chaque élément de base une seule fois au lieu de le refaire sans cesse. Modifiez le style d'un titre ou d'un paragraphe à un seul endroit et il se répercute sur tout le site, ce qui garde le projet cohérent et vous fait gagner du temps sur chaque page créée ensuite. Si vous voulez aller plus loin, notre article sur Finsweet Client-First présente un système de nommage des classes qui s'associe très bien à un guide de style, et notre sélection d'extensions Chrome essentielles pour Webflow propose quelques outils de plus pour accélérer le Designer. Vous trouverez d'autres outils et astuces dans l'article sur les outils gratuits et payants pour petites agences et freelances, et si la spécificité vous joue des tours pendant le stylage, lisez maîtriser la spécificité CSS dans Webflow.
Pour des tutoriels Webflow approfondis, rendez-vous ici.
FAQ
Existe-t-il un modèle de guide de style Webflow gratuit ?
Oui. Webflow University publie un projet de guide de style gratuit et clonable qui contient les balises HTML de base que vous pouvez styler dans Webflow. Clonez-le, copiez la section du guide de style et collez-la dans votre propre projet.
Les styles des balises de base sont-ils conservés quand je colle d'un projet à l'autre ?
Non. Webflow précise que les styles appliqués aux balises HTML de base ne sont pas importés quand vous collez d'un projet à un autre : prévoyez donc de styler les éléments de base dans votre nouveau projet, y compris la balise Body (All pages), qui ne peut pas du tout être copiée.
Faut-il une page de guide de style sur chaque projet Webflow ?
Ce n'est pas obligatoire, mais cela vaut le coup. Styler les éléments de base à un seul endroit dès le départ signifie que chaque page construite ensuite hérite des mêmes règles.
