Un guide complet pour la création de boutons fluides dans Divi

La conception de boutons fluides est le processus de conception d’un bouton qui s’adapte de manière fluide à la taille de la fenêtre de votre navigateur (ou viewport). Il s’agit d’appliquer les pratiques de la conception web fluide à toutes les propriétés de conception d’un bouton. Cela rend la conception du bouton prévisible et cohérente sur tous les appareils. Il s’agit d’une alternative rafraîchissante aux techniques traditionnelles de conception réactive qui impliquent de nombreux ajustements de la conception à certains points de rupture.

Dans ce tutoriel, nous allons vous guider dans le processus de création de boutons fluides dans Divi. Voici ce que nous allons couvrir :

Parce que la conception de boutons fluides repose sur la mise en œuvre de la typographie fluide, il peut être utile de consulter notre guide complet sur la typographie fluide dans Divi.

C’est parti !

Coup d’œil rapide

Voici un aperçu du design que nous allons créer dans ce tutoriel.

Et voici un codepen qui illustre ce concept de bouton fluide.

Téléchargez la mise en page GRATUITEMENT

Pour mettre la main sur les modèles de ce tutoriel, vous devez d’abord le télécharger à l’aide du bouton ci-dessous. Pour accéder au téléchargement, vous devez vous inscrire à notre liste de diffusion Divi Daily à l’aide du formulaire ci-dessous. En tant que nouvel abonné, vous recevrez encore plus d’astuces Divi et un pack de mises en page Divi gratuit chaque lundi ! Si vous êtes déjà sur la liste, il suffit d’entrer votre adresse e-mail ci-dessous et de cliquer sur télécharger. Vous ne serez pas « réinscrit » et ne recevrez pas d’e-mails supplémentaires.

Pour importer la mise en page de section dans votre bibliothèque Divi, accédez à la bibliothèque Divi.

Cliquez sur le bouton Importer.

Dans la popup de portabilité, sélectionnez l’onglet d’importation et choisissez le fichier à télécharger depuis votre ordinateur.

Cliquez ensuite sur le bouton d’importation.

Une fois cela fait, la mise en page de la section sera disponible dans le Divi Builder.

Passons au tutoriel, voulez-vous ?

Ce dont vous avez besoin pour commencer

Pour commencer, vous devez effectuer les opérations suivantes :

1. Si vous ne l’avez pas encore fait, installez et activez le thème Divi.
2. Créez une nouvelle page dans WordPress et utilisez le Divi Builder pour modifier la page sur le front-end (constructeur visuel).
3. Choisissez l’option « Build From Scratch ».

Après cela, vous aurez une toile vierge pour commencer à concevoir dans Divi.

L’anatomie d’un bouton Divi

Par défaut, un bouton Divi possède des styles intégrés qui incluent les unités de longueur px et em (voir illustration ci-dessus). Les propriétés qui utilisent l’unité de longueur px sont les suivantes :

• Taille de la police : 20px
• Coins arrondis : 3px
• Largeur de la bordure : 3px
• Taille de la police de l’icône : héritée de la taille de la police (20px)

Ces valeurs px sont absolues et resteront les mêmes, que vous changiez la taille de la police ou la taille de la fenêtre du navigateur.

Les propriétés qui utilisent l’unité de longueur em sont les suivantes :

• Padding : 0.3em haut, 0.3em bas, 0.7em gauche, 2em droite
• Hauteur de ligne : 1,7 mm
• Marge gauche de l’icône : 0,3em

Ces valeurs em sont relatives à la taille de la police de l’élément (ou du bouton) et changent (s’adaptent) lorsque la taille de la police change.

Comment créer un bouton fluide dans Divi

Comprendre l’unité de longueur em

Pour créer un bouton fluide dans Divi, il est essentiel de comprendre le fonctionnement des unités de longueur em. L’unité de longueur em est relative à la taille de la police de l’élément (quelle qu’elle soit). Essentiellement, la valeur de em est un multiple de la taille de la police de l’élément. Par exemple, si la taille de la police de l’élément est de 20px, 2em équivaut à 2(20px). Cela signifie que l’unité de longueur em change chaque fois que la taille de la police de l’élément change. L’unité de longueur px, en revanche, ne changera pas.

Pour poursuivre avec notre exemple par défaut, le remplissage droit par défaut du bouton est de 2em (ou 2 multiples de em). La taille de la police du bouton étant de 20 px, le remplissage de droite est de 2 fois 20 px (soit 40 px). Le remplissage supérieur et inférieur est de 0,3em. Le remplissage supérieur et inférieur est donc de 6px (0,3 fois 20px égale 6px).

Consultez l’illustration ci-dessous pour comprendre la valeur réelle des unités de longueur em en fonction de la taille de la police.

Utilisation d’une taille de police fluide (ou à échelle réduite) pour le bouton

Lors de la conception d’un bouton fluide utilisant des unités de longueur em, tout dépend de la taille de la police du bouton. En d’autres termes, la taille de la police sera appliquée à la valeur de toutes les propriétés utilisant l’unité de longueur em pour le bouton. Ainsi, si vous voulez que les styles de bouton deviennent fluides, vous devez donner au bouton une taille de police fluide (ou à échelle variable). L’unité de longueur fluide la plus courante est l’unité de longueur vw, qui est relative à la largeur de la fenêtre d’affichage du navigateur. En d’autres termes, l’unité de longueur vw varie en fonction de la largeur du navigateur.

Pour créer un bouton fluide, remplacez la taille de police de 20px par quelque chose comme 2,4vw. Étant donné que cette valeur varie en fonction de la largeur du navigateur, toutes les propriétés des boutons utilisant l’unité de longueur em seront également adaptées à la largeur du navigateur.

Anatomie d’un bouton Divi fluide

Pour faire simple, la création d’un bouton Divi fluide repose sur deux principes clés :

1. Utilisez une unité de longueur fluide (vw) pour la taille de la police
2. Utilisez des valeurs d’unité de longueur em pour toutes les propriétés de style du bouton

Cela signifie que vous pouvez utiliser des unités de longueur em pour la largeur et le rayon des bordures, et même pour les ombres des boîtes.

Voici une illustration d’un bouton fluide qui comprend une taille de police fluide (2,4 vw) et des unités de longueur em pour toutes les propriétés de style.

Les valeurs réelles de chaque propriété utilisant des unités de longueur em hériteront de la valeur de la taille de police fluide et seront mises à l’échelle par rapport à la largeur de la fenêtre d’affichage du navigateur (vw).

Création de designs de boutons fluides dans Divi

Maintenant que nous avons une meilleure compréhension de la façon de créer un bouton fluide. Créons quelques modèles de boutons fluides dans Divi.

#Exemple de base n°1

Pour commencer, créons l’exemple de base que nous avons illustré précédemment.

Dans Divi Builder, créez une nouvelle rangée d’une colonne.

Dans l’onglet Conception, mettez à jour la taille du texte du bouton avec une valeur unitaire de longueur vw afin qu’il soit adapté à la largeur de la fenêtre d’affichage :

• Taille du texte du bouton : 2,4vw (ordinateur de bureau et tablette), 18,4px (téléphone)

Mettez ensuite à jour les propriétés suivantes avec une valeur d’unité de longueur em qui est relative à la taille du texte du bouton :

• Largeur de la bordure du bouton : 0,15em
• Rayon de la bordure du bouton : 1,3em
• Espacement des lettres du bouton : 0.05em
• Rembourrage : 0.3em haut, 0.3em bas, 1em gauche, 2em droite
• Ombre de la boîte : voir la capture d’écran
• Position verticale de l’ombre de la boîte : 0.15em

Voici le résultat final.

bouton fluide #2 avec coins arrondis et ombre de boîte

Pour commencer, créez un nouveau bouton et mettez à jour le texte du bouton en indiquant « Get Started ».

Dans l’onglet Conception, mettez à jour les éléments suivants :

• Utiliser des styles personnalisés pour le bouton : OUI
• Taille du texte du bouton : 2.4vw (ordinateur de bureau et tablette), 18.4px (téléphone)
• Couleur du texte du bouton : #000000
• Couleur d’arrière-plan du bouton : #ffffff (ordinateur de bureau), #d9f9e9 (survol)
• Largeur de la bordure du bouton : 0,15em
• Couleur de la bordure du bouton : #d9f9e9
• Rayon de la bordure du bouton : 1,3em

• Espacement des lettres du bouton : 0.05em
• Police du bouton : Jura
• Poids de la police du bouton : Semi-bold
• Icône de bouton : flèche droite
• Couleur de l’icône du bouton : #000000
• Afficher l’icône au survol du bouton uniquement : NON

• Rembourrage : 0.2em haut, 0.2em bas, 1em gauche, 2em droite
• Ombre de la boîte : voir la capture d’écran
• Position verticale de l’ombre de la boîte : 0.3em
• Intensité du flou de l’ombre portée : 0.5em
• Force d’étalement de l’ombre de la boîte : -0.3em

Voici le résultat.

#Bouton fluide n° 3 avec une ombre de boîte et un placement d’icône uniques

Pour le prochain bouton fluide, nous allons utiliser une ombre de boîte et un placement d’icône uniques.

Pour commencer, dupliquez l’exemple précédent (n° 2). Ouvrez ensuite les paramètres du bouton dupliqué pour mettre à jour le design.

Sous l’onglet design, mettez à jour les éléments suivants :

• Rayon de la bordure du bouton : 0px
• Couleur de l’icône du bouton : #ffffff
• Ombre de la boîte : voir la capture d’écran
• Position horizontale de l’ombre de la boîte : -1.75em
• Position verticale de l’ombre de la boîte : 0px
• Couleur de l’ombre : #000000

Sous l’onglet Avancé, ajoutez le CSS personnalisé suivant à l’élément After :

margin-right : .3em ;
droite : 0 ;

Voici le résultat.

#Bouton fluide n° 4 avec fond tricolore dégradé

Pour le prochain bouton fluide, nous allons créer un dégradé d’arrière-plan tricolore unique pour le bouton en combinant le dégradé d’arrière-plan avec un style d’ombre de boîte unique.

Pour créer le bouton, dupliquez l’exemple de bouton #3 précédemment conçu.

Ouvrez ensuite les paramètres du bouton pour mettre à jour les styles.

Sous l’onglet Avancé, supprimez le CSS personnalisé dans l’élément After.

Sous l’onglet Design, mettez à jour les éléments suivants :

• Couleur du texte du bouton : #ffffff
• Couleur de l’arrière-plan du bouton : dégradé à gauche : #f475ee
• Couleur d’arrière-plan du bouton, dégradé à droite : #9694fc
• Direction du dégradé : 90deg
• Position finale : 2.5em
• Largeur de la bordure du bouton : 0px
• Ombre de la boîte : voir la capture d’écran
• Position horizontale de l’ombre de la boîte : -2.5em
• Position verticale de l’ombre de la boîte : 0px
• Intensité du flou de l’ombre de la boîte : 1.5em
• Force d’étalement de l’ombre de la boîte : -1em
• Couleur de l’ombre : #85c6f2

Et voici le résultat.

#Bouton fluide n° 5 avec largeur de fluide personnalisée

Pour le prochain design de bouton fluide, nous allons ajouter une largeur fluide personnalisée à notre bouton. Cela nous permettra de créer des boutons plus grands qui s’adaptent de manière fluide à la largeur du navigateur.

Pour créer le bouton, dupliquez l’exemple de bouton n° 2 précédemment conçu.

Dans l’onglet Conception, mettez à jour l’alignement du bouton en le centrant.

Dans l’onglet Avancé, ajoutez le CSS personnalisé suivant à l’élément principal :

Desktop

display:block ;
width : 100% ;
largeur maximale : 15em ;

Voici le résultat.

Résultats finaux

Voyez maintenant les résultats finaux de nos 4 designs de boutons fluides.

Boutons fluides utilisant la fonction Clamp() pour la taille de police

Si vous souhaitez mieux contrôler la taille minimale et maximale de votre bouton fluide, vous pouvez utiliser la fonction CSS Clamp() pour définir une taille de police minimale, une taille de police d’échelle et une taille de police maximale.

Pour ce faire, vous devez réinitialiser la taille du texte de chacun de vos boutons afin de rétablir le paramètre par défaut.

Ensuite, sous l’onglet « Avancé », ajoutez le fichier CSS suivant à l’élément principal de chacun de vos boutons.

Cela permettra de s’assurer que la taille de la police est de 20px au minimum, de 4vw à l’échelle (ou fluide) et de 40px au maximum.

Le principal avantage de l’utilisation de la fonction clamp() est que vous pouvez empêcher le bouton d’être trop grand ou trop petit tout en conservant un design réactif fluide.

Résultats finaux avec Clamp()

Encore une fois, les résultats finaux

Voici un aperçu final de chaque collection de boutons fluides avec et sans clamp() pour la taille de la police.

Utilisation d’une taille de police de longueur vw (ordinateur de bureau et tablette) et d’une unité de longueur px (téléphone)

Utilisation de clamp() pour définir une taille de police min, scaler et max

Réflexions finales

La création de boutons fluides dans Divi repose sur deux grands principes : (1) utiliser une unité de longueur fluide (comme vw) pour la taille de la police du bouton, et (2) utiliser des valeurs d’unité de longueur em pour toutes les propriétés de style du bouton. Une fois que vous avez compris cela, il est important de trouver la bonne taille de police fluide (à l’aide de vw, clamp(), etc.) et d’ajuster puis d’utiliser différentes valeurs de em pour le reste du design du bouton. Ainsi, le bouton sera parfaitement fluide lorsque vous modifierez la largeur de la fenêtre d’affichage de votre navigateur.

N’oubliez pas. Les boutons fluides ne fonctionnent pas vraiment lorsque leurs conteneurs parents ne sont pas également fluides. Par exemple, si vous avez un bouton fluide à l’intérieur d’une rangée de 400 px, le bouton n’aura pas la place de s’adapter et le design se brisera. Donner à la rangée une largeur de 80 % ou 90vw serait plus adapté à la conception de boutons fluides.

Je suis impatient de lire vos commentaires.

À la vôtre !