Avant de commencer à développer votre site web sur Webflow, il est essentiel de prendre le style guide client-first de Finsweet comme base de départ. Pourquoi opter pour le style guide client-first sur Webflow ? Tout simplement parce que c’est la meilleure approche actuelle pour un développement propre sur Webflow, offrant de meilleures performances. Le style guide de Webflow vous permettra de développer rapidement en utilisant des classes préexistantes. Grâce à une combinaison de classes et de combos, votre projet Webflow sera fluide et rapide.
Dans cet article, nous allons vous montrer comment personnaliser le Style Guide Client-First de Finsweet directement dans Webflow.
1. Clonez le style guide client-first de Finsweet
Pour cloner cette ressource, rendez-vous dans le Webflow Showcase. Recherchez “Client-First Finsweet”. Sélectionnez le projet “Client-First” de Finsweet, clônez-le et renommez-le. Nous remercions Finsweet pour cette ressource magique.
2. Accédez à la page Style Guide
Maintenant que vous avez cloné la ressource, rendez-vous sur la page “Style Guide” de votre projet Webflow. C’est ici que vous pourrez personnaliser les différentes classes. Avant de commencer la personnalisation, nous vous recommandons vivement de préparer un style guide Figma optimisé. Cela vous facilitera la personnalisation.
3. Personnalisez les balises HTML
Les balises HTML correspondent à des éléments spécifiques et permettent de structurer le contenu de vos pages. Par exemple, la balise <!- fs-richtext-ignore -><body> définit le corps de votre page, tandis qu’une balise <H1> correspond au titre principal de votre page.
Dans Webflow, il est possible de personnaliser le style de ces balises, ce qui vous permet d’avoir un style prédéfini pour vos éléments.
3.1 Personnalisez la balise <body> dans votre style guide Webflow
Personnaliser la balise <body> permet de donner un style à l’ensemble du contenu de vos pages web. Pour ce faire, dans le style guide, sélectionnez d’abord l’élément <body>. Ensuite, cliquez sur le sélecteur et choisissez directement la balise HTML “Body (toutes les pages)”. Vous pouvez maintenant personnaliser le corps de vos pages en modifiant, par exemple, la police ou la couleur.
3.2 Personnalisez les titres dans votre style guide Webflow
Chaque titre possède sa propre balise HTML (H1 -> tous les titres H1, H2 -> tous les titres H2, etc.). Pour les personnaliser, accédez à la section “Balises HTML des titres” du style guide. Sélectionnez le titre H1, par exemple, et choisissez la balise HTML “Tous les titres H1”. Faites de même pour H2, H3, H4, H5, H6. Grâce à ces balises HTML, vous pourrez personnaliser vos titres.
3.3 Personnalisez les autres balises HTML dans votre style guide Webflow
En dessous de la section “Balises HTML des titres”, vous trouverez d’autres éléments que vous pouvez styliser. De la même manière que pour le corps et les titres, il vous suffit de sélectionner la balise HTML appropriée dans le sélecteur (pour les images, sélectionnez d’abord une image).
4. Personnalisez les classes du Style Guide Client-First
4.1 Ajoutez une palette de couleurs dans Webflow
Dans la page “Style Guide”, vous trouverez une section “Palette de couleurs”. Cette section contient différents cadres (avec différentes combos classes) où vous pouvez insérer la palette de couleurs de votre site web. Ajoutez toutes les couleurs que vous allez utiliser et insérez-les en même temps dans la palette Webflow.
4.2 Ajoutez vos différentes couleurs de texte
Dans la même page, vous trouverez une section “Couleurs de texte”. Cette section vous permet de créer des classes pour chaque couleur de texte que vous allez utiliser. Lors du développement, vous pourrez attribuer ces classes à vos textes. Par défaut, vous disposez des classes “text-color-grey” et “text-color-black”. Pour ajouter des classes de couleurs de texte supplémentaires, il vous suffit de copier-coller l’une de ces deux classes. Ensuite, dans le sélecteur, dupliquez la classe, renommez-la et attribuez-lui une couleur spécifique. Par exemple, vous pouvez ajouter une classe “text-color-gold”.
4.3 Personnalisez vos boutons dans le Style Guide
Sur cette même page, vous trouverez une section “Boutons” qui vous permet de styliser l’apparence de vos boutons. Par défaut, il existe 3 styles de boutons (bouton, bouton secondaire et bouton texte). Sélectionnez-les et personnalisez-les à l’aide du gestionnaire de styles. Pour en ajouter, procédez de la même manière que pour les couleurs de texte : copiez-collez l’un des boutons existants, dupliquez-le, renommez sa classe et modifiez-le selon vos besoins.
4.4 Ajoutez des couleurs de fond
Tout comme pour les couleurs de texte, vous pouvez modifier les couleurs de fond en utilisant des classes dans le Style Guide. Dans la section “Fonds”, vous pouvez réaliser la même manipulation que pour les textes, en modifiant le fond dans le gestionnaire de styles.
4.5 Autres classes à personnaliser dans le Style Guide Client-First
Maintenant que vous comprenez comment fonctionne la personnalisation des classes dans le style guide client-first de Finsweet, explorez les différentes sections et effectuez des modifications selon vos préférences. Notez qu’il existe des classes “cachées” dans le style guide. Pour les voir, déroulez tous les éléments dans l’arborescence. Lorsque vous apportez des modifications, assurez-vous de donner des noms appropriés à vos classes dans Webflow.
Maintenant que vous avez personnalisé votre Style Guide Client-First dans Webflow, vous pouvez passer à la phase de développement. Si vous n’êtes pas familier avec la méthode de développement client-first, nous vous recommandons de vous renseigner pour garantir des performances optimales à votre futur site.
Si vous avez un projet Webflow et souhaitez être accompagné dans votre stratégie de visibilité en ligne, notre agence, Digidop, serait ravie de vous aider.
