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.