Dans cet article, nous allons apprendre à utiliser le Style Manager de Webflow ! L'objectif est de comprendre toutes (ou presque) les fonctionnalités de design que nous propose Webflow pour personnaliser ses pages Web.
Aujourd’hui, nous allons apprendre les bases et les notions pour apprendre à faire du Webdesign dans Webflow. La partie Design est un grand avantage de Webflow par rapport à ses concurrents puisque de base, c’est un outil pour les Webdesigners. Grâce à cet outil nocode de création de sites, on peut rendre chacune des pages de notre site web uniques.
Comprendre le responsive de Webflow
Avant de commencer, il est nécessaire de parler du design pour les mobiles dans Webflow. En effet, avant de commencer à créer son site, il faut chercher une plateforme qui nous permettra de designer en mobile first. Cela est tout à fait possible avec Webflow qui permet de faire des designs responsifs et personnalisés.
En fait, Webflow fonctionne avec un système de cascade (Cascading Rules). Ce système marche de manière à ce que le design d’un type appareil (device) “supérieur” influe sur tous ceux qui lui sont “inférieurs”. Cependant, une modification faite sur un type d’appareil n’influe pas sur le design des types d’appareils qui lui sont “supérieurs”. La hiérarchie actuelle dans Webflow est celle-ci : Desktop > Tablet > Mobile Landscape > Mobile Portrait. Ainsi, lorsque je design la version Desktop, les modifications se font également sur tablette et mobile. A l’inverse, si je fais une modification sur Mobile Landscape, cela aura une influence sur Mobile Portrait, mais pas sur Desktop et Tablet.
Apprendre à utiliser le Style Manager de Webflow
Le manager de style de Webflow correspond au panneau latéral droit qui vous permet d’attribuer des classes aux éléments de votre page et de les styliser (Raccourci clavier : “E”).
Comprendre l’utilité du Selector
Le Selector permet d’attribuer un nom à un élément que l’on sélectionne pour lui donner un style et ainsi créer une “Class”. Une “Class” est un type de sélection qui permet d’affecter à tous les éléments de celle-ci le même style.
Il est possible de combiner plusieurs “class” pour personnaliser des éléments. Nous appelons ça des “Combo Class”. Une “Combo Class” permet comme son nom l’indique de combiner deux à plusieurs classes pour appliquer à un élément différents styles.
En plus de cela, il est possible de modifier le style d’un élément lorsqu’il est survolé (Hover), pressé (Pressed) ou sélectionné (Focused) grâce à la fonction “Selector State”.
Avec un bon Style Guide et avec une méthodologie Client First, le Selector vous fera gagner un temps considérable pour le développement de votre projet.
Personnaliser l’affichage des ses éléments avec la section Layout
La fonctionnalité Layout dans le Style permet de disposer les éléments d’une page de plusieurs manières :
Display: block
Cette disposition affiche les éléments du bloc sur une nouvelle ligne. Ceux-ci occupent toute la largeur disponible.
Display: flex
Cette disposition permet d’organiser les éléments d’un bloc horizontalement ou verticalement. Des options supplémentaires sont disponibles pour justifier ou aligner les éléments.
Display: grid
Cette disposition permet d’afficher les éléments dans une grille. Vous pouvez choisir le nombre de colonnes et de lignes pour personnaliser la grille et donc l’affichage de vos éléments.
Display: inline
Cette disposition permet d’afficher un élément à côté d’un autre sans qu’il n’y ait une coupure. Les marges peuvent être changées, mais pas la hauteur ni la largeur.
Display: inline-block
Cette disposition permet d’afficher les éléments côte à côte. La largeur de cet élément est déterminée par le contenu qu’elle possède.
Display: none
Cette disposition cache tout simplement les éléments de votre page.
Définir des écarts et des marges grâce à la section Spacing
Dans cette section, il va être possible de définir des marges (Margin) et des écarts (padding) entre les éléments de sa page. Plus concrètement, les marges définissent l’espacement externe entre la bordure d’un élément et les éléments environnants. Le padding quant à lui définit l’espacement intérieur entre la bordure d’un élément et ceux qui sont à l’intérieur.
Left margin
Définit l'espacement externe entre la bordure gauche d'un élément et les éléments environnants.
Left padding
Définit l'espacement entre la bordure gauche d'un élément et les éléments qu'il contient.
Bottom margin
Définit l'espacement entre la bordure inférieure d'un élément et les éléments en dessous.
Bottom padding
Définit l'espacement entre la bordure inférieure d'un élément et les éléments qu'il contient.
Right Margin
Définit l'espacement extérieur entre la bordure droite d'un élément et les éléments qui lui sont adjacents.
Right Padding
Définit l'espacement intérieur entre la bordure droite d'un élément et les éléments qui s'y trouvent.
Top Margin
Définit l'espacement extérieur entre la bordure supérieure d'un élément et les éléments situés au-dessus.
Top Padding
Définit l'espacement intérieur entre la bordure supérieure d'un élément et les éléments qui s'y trouvent.
Définir la taille des éléments avec la section Size
La section “Size” permet de donner une hauteur et une largeur définit à des éléments. Plusieurs fonctionnalités sont présentes et peuvent être définies en pixel (PX), pourcentage (%), emphemeral unit (EM), root empheral unit (REM), character width (CH), viewport width (VW) ou Viewport Height (VH).
Width
Width définit la largeur d'un élément.
Height
Height définit la taille d'un élément.
Minimum width (min w)
Min W définit la largeur minimale d'un élément.
Minimum height (min h)
Min H définit la hauteur minimale d'un élément.
Maximum width (max w)
Max W définit la largeur maximale d'un élément.
Maximum height (max h)
Max H définit la hauteur maximale d'un élément.
Définir la position des éléments dans Webflow
La section “Position” de l’onglet “Style” va permettre de personnaliser le positionnement de vos éléments.
Personnaliser les textes grâce à la section Typography
Cette section va permettre de modifier la famille de police, la taille, l’alignement, la couleur etc. de votre texte. Des polices sont directement disponibles dans Webflow, mais vous pouvez importer vos propres polices (custom font).
Font
Modifier sa police
Weight
Modifier l’épaisseur de trait de sa police
Size
Modifier la taille de la police
Height
Modifier l'espace vertical entre les lignes
Color
Modifier la couleur du texte
Align
Modifier l’alignement du texte
Style
Modifier la décoration du texte
Tout un tas d’autres options de personnalisation sont disponibles, mais sachez que vous pouvez entièrement personnaliser votre texte.
Modifier l'arrière-plan grâce à la section Backgrounds
La section “Backgrounds” permet de modifier l’arrière-plan d’un élément. Ainsi, il est possible d’insérer une image, un gradient ou encore une couleur de remplissage pour le fond d’un élément.
Ajuster les bordures avec la section Borders
Cette section permet de styliser les bords d’un élément. Ainsi, vous avez la possibilité de modifier le style, la couleur ou encore le radius des bordures d’un élément.
Créer des effets grâce à la section Effects
Enfin, cette dernière section de l’onglet “Style” permet de modifier l’apparence d’un élément en lui ajoutant une opacité, une certaine taille, une rotation, un effet d’ombre (Shadow) etc.
Voilà, vous connaissez maintenant plus en détail les éléments de l’onglet Style ! Vous pouvez maintenant commencer à faire le design de votre site. Si vous avez besoin d’aide pour votre projet Webflow, Digidop est une agence experte dans cet outil.