Do you want to develop your site cleanly on Webflow? The first step is to customize the Finsweet Client-First guide style in your Webflow project. Discover in this article how to do it!
Before starting the development of your website on Webflow, it is important to clone the client-first guide style of Finsweet. Why use the client-first guide style on Webflow? Simply because it is the best current way to develop in Webflow cleanly, for better performances. The Webflow guide style will allow you to develop quickly with pre-existing classes. With a stack of classes and class combos, you will have a smooth and fast Webflow project.
In this article we will show you how to customize the Finsweet Client-First Guide Style directly in Webflow.
1. Clone the Finsweet client-first guide style
To clone the resource, just go to the Webflow Showcase. From there you can type the query "Client-First Finsweet". All you have to do is select the Client-First project from Finsweet, clone it and rename it. Thanks to Finsweet for this magical resourcef
2. Go to the Style Guide page
Now that you have cloned the resource, you can go to the Style Guide page of your Webflow project. It is in this page that you will be able to customize the different classes. Before starting the customization, we strongly recommend you to prepare your optimized Figma guide style. This will help you in the customization.
3. Customise HTML Tags
Les HTML Tag sont les balises HTML qui correspondent à des éléments précis. Elles permettent de structurer le contenu de vos pages. Par exemple, la balise <!-- fs-richtext-ignore --><body> définit le corps de votre page ou une balise <H1> le titre principal de votre page.
In Webflow, it is possible to customise the style of these tags. This will allow you to have a predefined style for your elements.
3.1 Personnaliser le <!-- fs-richtext-ignore --><Body> dans votre style guide Webflow
Customizing the body tag will allow you to give a style to the whole body of your web pages. To do this, in the style guide, first select the body element. Then, click on the selector and directly select the HTML Tag: "Body (All pages)". Now you can style the body of your pages. For example, you can change the font of your site, its colour, etc.
3.2 Customizing Headings in your Webflow Guide Style
Each Heading has its own HTML Tag (H1 → All H1 Headings, H2 → All H2 Headings, etc.). To customize them, you can go to the HTML Headings Tags section of the Style Guide, select the H1 heading for example and in the selector choose the tag "All H1 Headings, H2 → All H2 Headings, etc.). To customise them, you can go to the HTML Headings Tags section of the Style Guide, select the H1 title for example and in the selector choose the tag "All H1 Headings". Do the same for H2, H3, H4, H5, H6. Thanks to these HTML tags, you will be able to customise your headings.
3.3 Customizing other HTML Tags in your Webflow Guide Style
Below the "HTML Headings Tag" section, you have other elements that you can style. In the same way as for the body or headings, you just need to select the appropriate HTML Tag in the selector (For images, you need to select an image first).
4. Customise the Client-First Guide Style classes
4.1 Adding a colour palette in Webflow
In the Style Guide page, you have a "Color Palette" section. In this section, there are different frames (with different class combos) to insert the colour palette of your website. You can put here all the colours you are going to use and insert them at the same time in the Webflow palette.
4.2 Adding your different text colours
On the same page, there is a "Text colors" section. This section will allow you to create classes for each text colour you will use. In development, you can add these classes to your texts. By default, there are the classes "text-color-grey" and "text-color-black". To add text colour classes, you can copy and paste one of the two classes. Then in the selector duplicate the class, rename it and give it a colour style. For example, we can add a class "text-color-gold".
4.3 Customizing your buttons in the Style Guide
On the same page, there is a "buttons" section to style the look of your buttons. There are 3 default button styles (button, button-secondary and button-text). Select them and customise them with the style manager. To add one, in the same way as for text colours, copy and paste one of the buttons, duplicate and rename its class and modify it.
4.4 Adding background colours
Just like the colours of your texts, you can modify the colours of the backgrounds thanks to classes in the Style Guide. In the backgrounds section, you can do the same manipulation as for the texts, but by modifying the background in the style manager.
4.5 Other classes to modify in the Client-First Guide Style
Now that you understand how the customisation of classes in the Finsweet client-first guide style works, you can explore the different sections and make changes as you see fit. There are "hidden" classes in the guide style, to see them you can collapse all the elements in the navigator. When you make modifications, be careful to name your classes in Webflow.
Now that you have customized your Client-First Guide Style in Webflow, you can move on to development. If you are not familiar with the Client-First development method, we recommend that you learn more about it to ensure that your future site performs at its best.
If you have a Webflow project, our agency, Digidop, would be delighted to accompany you in your online visibility strategy.
.jpg)
