Un guide complet pour créer des designs de boutons fluides dans Divi

La conception de bouton fluide 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 de la fenêtre d'affichage). 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. Et c'est une alternative rafraîchissante aux techniques de conception réactives traditionnelles qui impliquent de nombreux ajustements de la conception à certains points d'arrêt.

Dans ce tutoriel, nous allons vous montrer comment créer des designs de boutons fluides dans Divi. Voici ce que nous allons couvrir :

• L'anatomie d'un bouton Divi
• Comment faire un bouton fluide dans Divi
• Comprendre l'unité de longueur em
• Utilisation d'une taille de police fluide (ou scaler) pour le bouton
• L'anatomie d'un bouton Divi fluide
• Création de designs de boutons fluides dans Divi (5 exemples de designs)
• Boutons fluides utilisant Clamp() pour la taille de la police

Parce que la conception des 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.

Commençons!

Aperçu

Voici un aperçu rapide de la conception que nous allons construire dans ce tutoriel.

Et voici un codepen qui démontre ce concept de design de bouton fluide.

Téléchargez la mise en page GRATUITEMENT

Pour mettre la main sur les designs de ce tutoriel, vous devrez d'abord le télécharger en utilisant le bouton ci-dessous. Pour accéder au téléchargement, vous devrez vous inscrire à notre liste de diffusion Divi Daily en utilisant le formulaire ci-dessous. En tant que nouvel abonné, vous recevrez chaque lundi encore plus de bienfaits Divi et un pack Divi Layout gratuit ! Si vous êtes déjà sur la liste, entrez simplement votre adresse e-mail ci-dessous et cliquez sur télécharger. Vous ne serez pas « réinscrit » ni ne recevrez d'e-mails supplémentaires.

Télécharger les fichiers

Télécharger gratuitement

Rejoignez la newsletter Divi et nous vous enverrons par e-mail une copie du pack ultime de mise en page de la page de destination Divi, ainsi que des tonnes d'autres ressources, trucs et astuces Divi incroyables et gratuits. Suivez-le et vous serez un maître Divi en un rien de temps. Si vous êtes déjà abonné, saisissez simplement votre adresse e-mail ci-dessous et cliquez sur télécharger pour accéder au pack de mise en page.

TÉLÉCHARGER

Vous vous êtes enregistré avec succès. Veuillez vérifier votre adresse e-mail pour confirmer votre abonnement et accéder aux packs de mise en page Divi hebdomadaires gratuits !

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

Cliquez sur le bouton Importer.

Dans la fenêtre contextuelle de portabilité, sélectionnez l'onglet d'importation et choisissez le fichier à télécharger depuis votre ordinateur.

Cliquez ensuite sur le bouton importer.

Une fois cela fait, la disposition des sections sera disponible dans le Divi Builder.

Passons au tutoriel, voulez-vous ?

Ce dont vous avez besoin pour commencer

Pour commencer, vous devrez 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 éditer la page sur le front-end (constructeur visuel).
3. Choisissez l'option « Construire à partir de zéro ».

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 aura des styles intégrés qui incluent à la fois des unités de longueur px et em (voir l'illustration ci-dessus). Les propriétés qui utilisent l'unité de longueur px incluent :

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

Ces valeurs px sont absolues et resteront les mêmes, peu importe si vous modifiez 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 incluent :

• Rembourrage : 0.3em en haut, 0.3em en bas, 0.7em à gauche, 2em à droite
• Hauteur de ligne : 1,7 em
• Marge de gauche de l'icône : 0.3em

Ces valeurs em sont relatives à la taille de police de l'élément (ou du bouton) et changeront (échelle) chaque fois que la taille de la police change.

Comment faire un bouton fluide dans Divi

Comprendre l'unité de longueur em

La clé pour créer un bouton fluide dans Divi est de comprendre comment fonctionnent les unités de longueur em. L'unité de longueur em est relative à la taille de police de l'élément (quelle qu'elle soit). Essentiellement, la valeur de em est un multiple de la taille de police de l'élément. Par exemple, si la taille de la police de l'élément est de 20px, 2em est identique à 2(20px). Cela signifie que l'unité de longueur em changera chaque fois que la taille de la police de l'élément change. L'unité de longueur px, cependant, ne changera pas.

En continuant avec notre exemple par défaut, le remplissage droit par défaut pour le bouton est 2em (ou 2 multiples de em). Étant donné que la taille de la police du bouton est de 20px, le rembourrage droit est 2 fois 20px (soit 40px). Le rembourrage supérieur et inférieur est de 0.3em. Ainsi, le rembourrage supérieur et inférieur est de 6px (0,3 fois 20px équivaut à 6px).

Voir 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 scaler) pour le bouton

Lors de la conception d'un bouton fluide en utilisant des unités de longueur em, tout dépend de la taille de la police du bouton. Pour le dire autrement, la taille de la police sera appliquée à la valeur de toutes les propriétés en utilisant l'unité de longueur em pour le bouton. Donc, si vous voulez que les styles de boutons deviennent fluides, vous devez donner au bouton une taille de police fluide (ou scaler). L'unité de longueur de fluide la plus courante à utiliser est l'unité de longueur vw qui est relative à la largeur de la fenêtre du navigateur. En d'autres termes, l'unité de longueur vw change à mesure que la largeur du navigateur change.

Pour créer un bouton fluide, remplacez la taille de police de 20px par quelque chose comme 2.4vw. Étant donné que cette valeur change avec la largeur du navigateur, toutes les propriétés des boutons utilisant l'unité de longueur em seront également mises à l'échelle avec la largeur du navigateur.

L'anatomie d'un bouton Divi fluide

Pour faire simple, construire un Divi Button fluide comprend deux principes clés :

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

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

Voici une illustration d'un bouton fluide qui inclut une taille de police fluide (2.4vw) et des unités de longueur em pour toutes les propriétés de style.

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

Créer des designs de boutons fluides dans Divi

Maintenant que nous comprenons mieux comment créer un bouton fluide. Créons quelques designs de boutons fluides dans Divi.

#1 Exemple de base

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

Depuis le Divi Builder, créez une nouvelle ligne à une colonne.

Sous l'onglet Conception, mettez à jour la taille du texte du bouton avec une valeur d'unité de longueur vw afin qu'elle s'adapte à la largeur de la fenêtre :

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

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

• Largeur de la bordure du bouton : 0,15 em
• Rayon de bordure de bouton : 1,3 em
• Espacement des lettres des boutons : 0,05 em
• Rembourrage : 0.3em en haut, 0.3em en bas, 1em à gauche, 2em à droite
• Box Shadow : voir capture d'écran
• Position verticale de l'ombre de la boîte : 0,15 em

Voici le résultat final.

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

Pour commencer, créez un nouveau bouton et mettez à jour le texte du bouton pour lire « Commencer ».

Sous l'onglet Conception, mettez à jour les éléments suivants :

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

• Espacement des lettres des boutons : 0,05 em
• Police des boutons : Jura
• Poids de la police du bouton : semi-gras
• Icône du bouton : flèche vers la droite
• Couleur de l'icône du bouton : #000000
• Afficher uniquement l'icône au survol pour le bouton : NON

• Rembourrage : 0.2em en haut, 0.2em en bas, 1em à gauche, 2em à droite
• Box Shadow : voir capture d'écran
• Position verticale de l'ombre de la boîte : 0.3em
• Force du flou d'ombre de la boîte : 0,5 em
• Force de propagation de l'ombre de la boîte : -0.3em

Voici le résultat.

#3 Bouton fluide avec ombre de boîte unique et placement d'icônes

Pour cette prochaine conception de bouton fluide, nous allons utiliser un placement unique d'ombre de boîte et d'icône.

Pour commencer, dupliquez l'exemple #2 précédent. Ensuite, ouvrez les paramètres du bouton dupliquer pour mettre à jour la conception.

Sous l'onglet Conception, mettez à jour les éléments suivants :

• Rayon de la bordure du bouton : 0px
• Couleur de l'icône du bouton : #ffffff
• Box Shadow : voir capture d'écran
• Position horizontale de l'ombre de la boîte : -1,75 em
• 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;
right: 0;

Voici le résultat.

#4 Bouton fluide avec dégradé de fond tricolore

Pour cette prochaine conception de 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 box-shadow unique.

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

Ensuite, ouvrez les paramètres du bouton pour mettre à jour les styles.

Sous l'onglet Avancé, supprimez le CSS personnalisé à l'intérieur de l'élément After.

Sous l'onglet Conception, mettez à jour les éléments suivants :

• Couleur du texte du bouton : #ffffff
• Dégradé d'arrière-plan du bouton Couleur gauche : #f475ee
• Dégradé d'arrière-plan du bouton Couleur droite : #9694fc
• Direction du gradient : 90 degrés
• Position finale : 2,5 em
• Largeur de la bordure du bouton : 0px
• Box Shadow : voir capture d'écran
• Position horizontale de l'ombre de la boîte : -2,5 em
• Position verticale de l'ombre de la boîte : 0px
• Force du flou d'ombre de la boîte: 1.5em
• Force de propagation de l'ombre de la boîte: -1em
• Couleur de l'ombre : #85c6f2

Et voici le résultat.

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

Pour cette prochaine conception de bouton fluide, nous allons ajouter une largeur de fluide personnalisée à notre bouton. Cela nous permettra de créer des boutons plus gros qui évoluent de manière fluide avec la largeur du navigateur.

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

Sous l'onglet Conception, mettez à jour l'alignement des boutons sur centré.

Sous l'onglet Avancé, ajoutez le CSS personnalisé suivant à l'élément principal :

Bureau

display:block;
width: 100%;
max-width: 15em;

Voici le résultat.

Résultats finaux

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

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

Si vous souhaitez plus de contrôle sur 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 de mise à l'échelle et une taille de police maximale.

Pour ce faire, vous devrez réinitialiser la taille du texte du bouton pour chacun de vos boutons afin qu'il revienne au paramètre par défaut.

Ensuite, sous l'onglet avancé, ajoutez le CSS suivant à l'élément principal de chacun des boutons.

Cela garantira que la taille de la police a une taille minimale de 20px, une taille de scaler (ou fluide) de 4vw et une taille maximale de 40px.

Le principal avantage de l'utilisation de clamp() est que vous pouvez empêcher le bouton de se mettre à l'échelle trop grand ou trop petit tout en conservant la conception fluide et réactive.

Résultats finaux avec Clamp()

Résultats finaux à nouveau

Et voici un dernier aperçu de chaque collection de boutons fluides avec et sans clamp() comme taille de police.

Utilisation de la taille de police de longueur vw (ordinateur de bureau et tablette) et de l'unité de longueur px (téléphone)

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

Dernières pensées

La création de boutons fluides dans Divi repose sur deux principes principaux : (1) Utiliser une unité de longueur fluide (comme vw) pour la taille de 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 (en utilisant vw, clamp(), etc.) et d'ajuster puis d'utiliser différentes valeurs de em pour le reste de la conception du bouton. Cela garantira une mise à l'échelle du bouton parfaitement fluide lors du réglage de la largeur de la fenêtre d'affichage de votre navigateur.

Gardez à l'esprit. 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 ligne de 400 pixels, le bouton n'aura pas de place pour se mettre à l'échelle et le design se cassera. Donner à la rangée une largeur de 80% ou 90vw serait plus adapté aux conceptions de boutons fluides.

J'ai hâte de vous entendre dans les commentaires.

À votre santé!