Personnaliser le style guide client-first de Finsweet.
Comme nous l'avons mentionné dans notre article sur le style guide, une telle méthode est nécessaire pour les projets de site web. Pourquoi on utilise spécialement la template «Client first» de Finsweet chez Viby ? c'est tout simplement, car c'est la meilleure manière de développer votre site Webflow aujourd'hui.
Dans cet article, nous allons vous montrer comment utiliser le style guide de Client First dans Webflow.
Cloner le modèle Webflow du style guide client-first
Pour commencer, vous devez vous rendre dans Made in Webflow.
Pour cloner la ressource, il suffit de naviguer et de vous rendre dans Made in Webflow. Une fois là-bas, vous n'avez plus qu'à effectuer la requête "Client-First Finsweet". Ensuite, il vous faudra sélectionner le projet Client-First de Finsweet, le dupliquer et lui donner un nom.
Aller à la page Style Guide
Une fois le projet Webflow ouvert, accéder à la page style guide. C’est dans cette page que vous allez pouvoir personnaliser tous les éléments de votre style guide.
Personnaliser les balises HTML
Il est possible de personnaliser le style de ces balises HTML pour obtenir un style prédéfini pour vos éléments. Cela vous permet de structurer le contenu de vos pages et de donner un aspect professionnel à votre site Web, en plus d’améliorer votre expérience de conception.
Personnaliser le <Body> dans votre style guide Client First
La balise <Body> permet, comme son nom l'indique, de personnaliser l'ensemble du corps de vos pages web. Vous pouvez ainsi styliser la police, la couleur, etc. Cela vous permet de définir la police et la couleur principale de votre site web.
Il vous suffit pour cela de cliquer sur le Body dans votre navigateur Webflow sur la gauche ("Navigator"), et de venir chercher la balise HTML “Body (All pages)” dans votre sélecteur à droite.
Personnaliser les Headings dans le style guide client-first de Finsweet
Une fois que cela est fait, vous avez la possibilité de modifier la couleur, la taille de vos titres.
Dans le style guide, chaque titre, ou heading, possède une balise HTML spécifique : un heading H1 possède la balise "All H1 Headings", un H2 la balise "All H2 Headings", etc. Pour les personnaliser, il faut donc que vous sélectionniez votre heading (titre H1 par exemple) dans le navigateur à gauche et la balise correspondante dans le sélecteur ("All H1 Headings" par exemple) à droite.
Ainsi, vous pouvez choisir la taille et la couleur de chaque heading spécifiquement : un gain de temps pour la suite de votre projet !
Personnaliser les autres balises HTML dans le style guide client-first sur Webflow
Dans votre style guide, après la section HTML Headings Tags, vous avez une section nommée other HTML Tags qui vous permettent de personnaliser d'autres éléments tels que les paragraphes, les liens ou encore les listes à point.
Cela fonctionne de la même façon que le reste. Vous sélectionnez votre élément dans le navigateur à gauche, puis la balise à droite dans le sélecteur. Par exemple, pour un paragraphe, la balise sera "All Paragraphs".
Personnaliser et utilisez les classes CSS globales de texte
Définissez le style de vos Headings dans Webflow
La 1ʳᵉ version du projet clonable de Client First ne proposait pas la possibilité de créer des classes globales pour vos headings. Vous pouvez utiliser ces classes lorsque le style de typographie de vos balises HTML ne correspond pas à certains headings de votre projet Webflow. Ces classes CSS vous offrent une plus grande variété d'options pour uniformiser et personnaliser votre site Webflow plus rapidement.
Définissez les classes pour vos tailles de textes dans Webflow
La V2 du modèle Client First de Finsweet vous permet de personnaliser la taille de vos textes ainsi que le style. L'objectif ici est de définir une classe pour chaque taille de texte que vous allez utiliser dans votre projet (text-size-tiny, text-size-regular, text-size-medium, etc.).
Les classes CSS pour les différents aspects de vos textes dans Webflow
Vous n'aurez que rarement besoin de toucher cette partie de style guide Webflow. Toutefois, il peut arriver que aillez besoin d'ajouter 2 classes de textes globales personnalisées (voir image ci-dessous). La plupart du temps, elles vous serviront de combo classes pour permettre un développement plus rapide dans Webflow (text-style-strikethrough, text-style-italic, etc.).
Les classes CSS pour la largeur de vos textes dans Webflow
Comme mentionné ci-dessus avec les classes d'aspect, les classes pour les largeurs de vos textes vous serviront la plupart du temps en combo classes.
Les classes CSS pour les différents alignements de vos textes
Même fonctionnement pour les classes d'alignement, utiliser les en combo classes, c'est un gain de temps énorme lorsque vous développez sur Webflow.
Personnaliser les couleurs de votre site Webflow
Définissez les classes et les combos classes de vos boutons
Sur cette partie, il y a une classe principale avec son système de combo classes. Stylisez alors le bouton principal de votre projet et utiliser les combos classes pour créer différentes variantes. Vous pouvez copier-coller autant de boutons que nécessaire.
Créer votre palette de couleurs dans Webflow
Dans cette partie, vous avez la possibilité de venir insérer toutes les couleurs que vous allez utiliser dans la palette Webflow. Vous avez différents cadres avec la même classe, mais chaque cadre à une combo classe différente. Pour ajouter un nouveau cadre (couleur) à votre palette de couleurs, copier-coller le cadre et ajoutez une nouvelle combo classe (exemple : "fs-styleguide_color" "is-4").
Définissez les classes pour les couleurs de vos textes
Dans la partie "Text colors" du style guide, vous pouvez ajouter autant de classes que nécessaire. Mais la template finsweet vous propose déjà trois classes à déterminer pour la couleur de vos textes. Pour ajouter d'autres classes de couleur de texte, dupliquez une des classes existante, puis dans le sélecteur, dupliquez la classe pour ensuite la renommer en gardant la méthode de nomination de classes de Client First (text-colors-votrecouleur).
Lors du développement, vous pourrez ajouter ces classes à vos textes pour gagner du temps et faciliter la collaboration et la compréhension des classes par votre client.
Définissez les classes pour les couleurs de fond de votre site Webflow
Cette partie fonctionne comme votre palette de couleur, vous avez des cadres avec une classe pour une couleur d'arrière-plan (background) spécifique. Pour ajouter plus de classes d'arrière plan à votre projet webflow, même chose : vous copiez-collez l'élément avec la classe en question, puis vous dupliquez et renommer, en gardant la nomination Client First de Finsweet.
Les classes de structure de site Webflow
Si vous êtes arrivé jusqu'ici, vous avez surement remarqué que nous avons sauté une étape en début de page du style guide. Si nous n'avons pas abordé cette partie, c'est que la plupart du temps, vous n'allez pas venir personnaliser ces classes de structure. Mais ce n'est pas impossible, nous allons donc vous expliquer ça rapidement. Ces classes vont être utilisées pour chaque page de site webflow, vous allez donc définir une classe globale pour les marges de votre site web, déterminer la largeur des différents "container" à utiliser pour votre site webflow, etc.
Les classes de largeur max
Sur cette même page, vous pouvez utiliser la propriété CSS "max-width" pour contenir du contenu à une largeur maximale. Pour déterminer la largeur des différentes classes, cliquez sur un des rectangles bleus avec les contours en pointillé, puis dans la partie "size" définissez la largeur max ("max width").
Personnaliser les composants de votre site Webflow
Désigner les composants de formulaires
Avec la V2 du modèle de Client first, vous pouvez pré-designer les éléments de vos formulaires (borders, radius, colors, etc.). Chaque élément a déjà une classe prédéfinie, il vous suffit alors de styliser les éléments pour utiliser les classes lors du développement.
Désigner votre Rich text
Par défaut, les headings et paragraphes du Rich text prennent les mêmes propriétés que vos balises HTML.
Les autres classes à modifier dans le Style Guide Client-First
Nous avons omis volontairement certaines étapes, comme les classes de marges de paddings, mais vous n'avez pas forcément besoin de les prédéfinir en amont, elles sont déjà là. Maintenant que vous êtes familier avec le style guide Client First, vous pouvez l'explorer et le modifier à votre convenance. C'est un outil que vous devez utiliser avant de commencer le développement de votre site Webflow.
Il est désormais temps de passer à la phase de développement de votre site, si vous n'êtes pas familier avec le système Client First, nous vous conseillons de vous renseigner sur la documentation, elle est en français.
Contactez notre agence Webflow pour vous faire accompagner dans votre projet Webflow.
OPTIMISEZ VOTRE SITE
RECOS ET AUDIT GRATUIT
Votre site ne convertit pas ? ❌
Vous ne générez pas suffisamment de lead ?❌
Votre n'avez pas de visibilité ? 😭
