Boutons de style avec les nouvelles options d'arrière-plan de Divi (6 modèles inclus)

Si vous n'avez pas profité de la nouvelle interface des options d'arrière-plan de Divi, vous passez à côté. Les possibilités de conception d'arrière-plan sont étonnantes. Mais ne serait-il pas génial d'avoir les mêmes options de conception puissantes pour nos boutons ? Si la réponse est oui, je pense que vous allez adorer ce post.

Aujourd'hui, je vais vous montrer comment apporter les mêmes puissantes fonctionnalités de conception d'arrière-plan aux boutons de style. Cette astuce de conception superpose l'arrière-plan des lignes et des colonnes derrière le module de boutons pour vous offrir 3 couches de capacités de conception. Avec ce genre de pouvoir, les choses pourraient devenir dangereuses. Mieux vaut rester calme et aller lentement au début

Allons-y.

Aperçu

Voici les exemples de conception de boutons couverts dans cet article.

Boutons de style avec les nouvelles options d'arrière-plan de Divi (6 modèles inclus)

Abonnez-vous à notre chaîne Youtube

La mise en place

À l'aide du bâtiment visuel, ajoutez une section régulière avec une ligne à une colonne.

Ajoutez ensuite un module de bouton à la ligne.

Mettez ensuite à jour les paramètres du module de boutons comme suit :

Options de contenu

Texte du bouton : [saisir le texte]
URL du bouton : [entrer l'URL]

Options de conception

Alignement des boutons : Centre
Couleur du texte : clair
Utiliser des styles personnalisés pour le bouton : OUI
Taille du texte du bouton : 48 px

Options avancées

Nous avons besoin de la largeur de 100% sera nécessaire pour remplir la largeur de la colonne. Pour ce faire, saisissez le CSS personnalisé suivant dans la zone Élément principal :

Width: 100%;

Enregistrer les paramètres

Vous ne pouvez rien voir sur la page pour le moment car la bordure et le texte de votre bouton sont blancs. Au lieu de styliser la couleur d'arrière-plan du bouton à l'aide des paramètres du module de bouton, nous allons personnaliser la couleur d'arrière-plan de la ligne/colonne derrière le bouton à l'aide des options d'arrière-plan les plus avancées. Nous reviendrons sur les paramètres du module de boutons une fois que nous aurons commencé à créer des conceptions plus spécifiques sur les boutons. Mais pour l'instant, finissons de configurer la ligne.

Accédez aux paramètres de ligne dans lesquels se trouve votre nouveau bouton et mettez à jour les éléments suivants :

Options de contenu

Sélectionnez l'onglet Dégradé d'arrière-plan de la colonne 1 , puis cliquez sur le bouton circulaire gris avec un symbole plus blanc.

Vous devriez maintenant voir les couleurs de dégradé par défaut apparaître derrière votre bouton blanc.

La colonne s'adapte bien derrière notre bouton maintenant, mais nous devons réduire la largeur du bouton. Pour ce faire, nous allons utiliser les paramètres de dimensionnement des lignes. En définissant une largeur personnalisée pour notre ligne, nous définissons également la largeur de notre bouton.

Options de conception

Sous les options de conception, nous allons ajuster la taille de la ligne pour l'adapter à notre nouveau bouton en ajustant les éléments suivants :

Utiliser la largeur personnalisée : OUI
Largeur personnalisée : 500px (cela définit la largeur maximale du bouton à 500px)
Rembourrage personnalisé : 0 pixels en haut, 0 pixels à droite, 0 pixels en bas, 0 pixels à gauche

Options avancées

Nous devons faire correspondre le rayon de la bordure de la ligne et de la colonne à ce que nous avons défini pour notre bouton afin qu'ils correspondent tous. Pour ce faire, entrez le CSS personnalisé suivant dans la zone Élément principal :

border-radius: 10px;

Entrez le même CSS dans la zone Élément principal de la colonne :

border-radius: 10px;

Enregistrer les paramètres

Maintenant que les paramètres de ligne ont été mis à jour pour avoir une largeur et un remplissage personnalisés, deux choses ont été accomplies. Tout d'abord, nous avons réussi à définir une largeur personnalisée pour notre bouton. Et deuxièmement, nous avons maintenant une autre couche d'options d'arrière-plan que nous pouvons utiliser pour styliser notre bouton.

C'est un total de 3 calques d'arrière-plan (bouton, colonne, ligne) que nous pourrions utiliser pour le style plus tard.

Voici une illustration de la façon dont le bouton est actuellement construit.

Plutôt cool non ?

Voilà pour la configuration de base. Il est maintenant temps pour la partie amusante de créer des designs impressionnants pour vos boutons.

Créer des designs de boutons impressionnants

#1 Bouton d'arrière-plan vidéo

Pour créer ce bouton, vous allez utiliser les 3 calques, l'arrière-plan de la ligne pour la vidéo, l'arrière-plan de la colonne pour le dégradé et l'arrière-plan du bouton pour la légère superposition bleue.

Pour les paramètres de ligne, mettez à jour les options de contenu suivantes :

Vidéo de fond : [télécharger la vidéo]
Couleurs du dégradé de fond de la colonne 1 : rgba(12 113 195 0,41), rgba(131,0,233,0,18)

Enregistrer les paramètres

Pour les paramètres du module de boutons , mettez à jour les éléments suivants :

Options de contenu

Texte du bouton : « Vérifiez-le »

Options de conception

Couleur d'arrière-plan du bouton : rgba (12 113 195 0,25)
Couleur de la bordure du bouton : #0c71c3

Enregistrer les paramètres

Maintenant, le seul problème qui nous reste est le rayon de bordure de l'arrière-plan vidéo. Nous devons ajouter du CSS personnalisé pour donner à la vidéo un rayon de bordure qui correspond au bouton. Ce code supplémentaire n'est nécessaire que pour le bouton d'arrière-plan vidéo.

Pour ajouter le CSS personnalisé, accédez aux paramètres de la page à partir de Visual Builder et cliquez sur l'onglet Avancé. Mettez ensuite à jour la zone de saisie CSS personnalisée avec le CSS suivant :

.et_pb_section_video_bg {

border-radius: 10px;

}

Enregistrer les paramètres

Astuce : Une autre option de conception intéressante consiste à afficher la vidéo en survol. Donnez simplement à votre module de boutons une couleur d'arrière-plan unie et changez-le en transparent au survol.

C'est ça! Vous avez maintenant un bouton avec un arrière-plan vidéo.

#2 Bouton à carreaux

Le bouton à damier nécessite l'utilisation de deux couches (ligne et colonne) de dégradés de couleurs d'arrière-plan.

Pour créer ce bouton, vous allez utiliser 2 calques, le fond de ligne pour le premier niveau de dégradés et le fond de colonne pour le dernier calque de dégradé de couleur.

Pour les paramètres de ligne, mettez à jour les options de contenu suivantes :

Couleurs de dégradé d'arrière-plan : #8300e9, #0c71c3
Direction du gradient : 270 degrés
Position de départ : 50 %
Position finale : 0%
Couleurs de dégradé d'arrière-plan de la colonne 1 : rgba(224,11,0,0.39), rgba(255,255,255,0)
Direction du gradient : 180 deg
Position de départ : 50 %
Position finale : 0%

Enregistrer les paramètres

Allez maintenant dans les paramètres du module de boutons et mettez à jour les éléments suivants

Options de contenu

Texte du bouton : « S'inscrire »

Options de conception

Largeur de la bordure du bouton : 0px
Espacement des lettres des boutons : 10px
Police des boutons : Par défaut, Gras (B), Italique (I)
Espacement des lettres de survol des boutons : 10 px

C'est ça. Voici le résultat final.

Vous savez maintenant comment ajouter un effet damier à vos boutons.

#3 Bouton de dégradé radial

Pour créer ce bouton, vous allez utiliser 2 calques (ligne et colonne) de dégradés de couleurs de fond.

Pour les paramètres de ligne, mettez à jour les options de contenu suivantes :

Couleurs de dégradé d'arrière-plan : #8300e9, #0c71c3
Type de dégradé : Radial
Direction radiale : Centre
Position de départ : 50 %
Position finale : 100 %
Couleurs de dégradé d'arrière-plan de la colonne 1 : rgba(224,11,0,0.39), rgba(255,255,255,0)
Type de dégradé : Radial
Direction radiale : Centre
Position de départ : 50 %
Position finale : 100 %

Enregistrer les paramètres

Allez maintenant dans les paramètres du module de boutons et mettez à jour les éléments suivants :

Options de contenu

Texte du bouton : « me contacter »

Options de conception

Largeur de la bordure du bouton : 0px
Police des boutons : Crafty Girls

Icône du bouton : [choisir l'icône du cœur]
Afficher uniquement l'icône au survol pour le bouton : NON

Options avancées

Pour une touche finale, ajoutons une ombre coulissante au bouton. En plus du code précédent, saisissez le CSS personnalisé suivant dans la zone Élément principal :

box-shadow: 0px 5px 10px 3px #ccc;

C'est ça! Voici votre résultat final :

#4 Bouton Bullseye

Pour créer ce bouton, vous allez utiliser 2 calques (ligne et colonne) de dégradés de couleurs de fond. De plus, nous allons ajouter des css personnalisés dans le module de boutons pour créer l'effet contextuel de la bordure inférieure.

Pour les paramètres de ligne, mettez à jour les options de contenu suivantes :

Couleurs de dégradé d'arrière-plan : #023500, #008c02
Type de dégradé : Radial
Direction radiale : Centre
Position de départ : 19 %
Position finale : 0%
Couleurs de dégradé d'arrière-plan de la colonne 1 : rgba(0,206,72,0,43), rgba(255,255,255,0)
Type de dégradé : Radial
Direction radiale : Centre
Position de départ : 32 %
Position finale : 0%

Allez maintenant dans les paramètres du module de boutons et mettez à jour les éléments suivants :

Options de contenu

Texte du bouton : « Acheter »

Options de conception

Taille du texte du bouton : 65 px
Largeur de la bordure du bouton : 0px
Police des boutons : Roboto, Gras (B), Majuscule (TT)

Options avancées

Maintenant pour la touche finale. Ajoutez le CSS personnalisé suivant au code existant dans la zone de saisie Élément principal :

box-shadow: 0px 5px 0px 0px #01771f;

#5 Bouton Image

Pour créer ce bouton, vous allez utiliser les 3 calques, la ligne pour l'image d'arrière-plan, la colonne pour l'arrière-plan dégradé et l'arrière-plan du bouton pour la superposition de couleur bleue semi-transparente.

Pour les paramètres de ligne, mettez à jour les options de contenu suivantes :

Sous l'onglet Image d'arrière-plan

Image d'arrière-plan : [télécharger l'image]
Taille de l'image d'arrière-plan : couverture
Position de l'image d'arrière-plan : Centre
Répétition de l'image d'arrière-plan : aucune répétition
Mélange d'images d'arrière-plan : multiplier

Sous l'onglet Dégradé d'arrière-plan

Couleurs de dégradé d'arrière-plan : rgba (12 113 195 0,33), #edf000
Type de dégradé : Linéaire
Direction du dégradé : 63 deg
Position de départ : 50 %
Position finale : 100 %

Faites maintenant défiler jusqu'aux options d'arrière-plan de la colonne 1 et sélectionnez l'onglet dégradé.

Couleurs du dégradé de fond de la colonne 1 : rgba(236,239,31,0.66), rgba(0,0,0,0,49)
Type de dégradé de colonne : Linéaire
Direction du gradient de la colonne : 139 deg
Position de départ de la colonne : 12 %
Position de fin de colonne : 0%

Enregistrer les paramètres

Cela prend en charge notre deuxième niveau de conceptions d'arrière-plan. Il en reste un de plus.

Accédez aux paramètres du module de boutons et mettez à jour les éléments suivants :

Options de contenu

Texte du bouton : « Obtenir des billets »

Options de conception

Couleur d'arrière-plan du bouton : rgba (12 113 195 0,16)
Couleur de la bordure du bouton : #efef4f
Police des boutons : Lato
Icône du bouton : [sélectionnez l'icône Billets]
Afficher uniquement l'icône au survol pour le bouton : NON

Couleur du texte de survol du bouton : #023b7c
Couleur d'arrière-plan du survol du bouton : #023b7c

C'est ça!. Vérifiez votre bouton d'image.

#6 Bouton Portrait

Pour construire ce dernier bouton, nous n'allons utiliser qu'une seule couche de design d'arrière-plan. Nous allons utiliser un mélange d'image de l'image d'arrière-plan et de la couleur d'arrière-plan pour créer un look unique.

Pour les paramètres de ligne , faites défiler jusqu'aux options d'arrière-plan de la colonne 1 et mettez à jour les éléments suivants :

Image d'arrière-plan de la colonne : [télécharger l'image portrait]
Taille de l'image d'arrière-plan de la colonne : Ajuster (cela garantira que le portrait s'insère toujours dans le bouton)
Position de l'image d'arrière-plan de la colonne : centre à gauche (cela aligne votre portrait à gauche du bouton)
Répétition de l'image d'arrière-plan de la colonne : aucune répétition
Mélange de l'image d'arrière-plan de la colonne : luminosité (cela crée un joli mélange de la couleur orange avec le portrait)

Assurez-vous de supprimer les couleurs de dégradé actuelles si vous les avez définies. Sinon, vous voulez pouvoir mélanger le fond orange. Cliquez simplement sur l'onglet dégradé et survolez la boîte de sélection de couleurs et cliquez sur l'icône de la corbeille qui apparaît en haut à droite.

Vous pouvez maintenant voir le mélange orange sur votre bouton.

Enregistrer les paramètres

Allez maintenant dans les paramètres du module de boutons et mettez à jour les éléments suivants :

Options de contenu

Texte du bouton : « Parlons »

Options de conception

Alignement des boutons : à droite
Couleur de la bordure du bouton : #ff7b23
Espacement des lettres des boutons : 3px
Police des boutons : Happy Monkey
Icône du bouton [ajouter une icône de chat]
Afficher uniquement l'icône au survol pour le bouton : NON
Espacement des lettres de survol des boutons : 3px

Terminé! J'aime cette conception pour un bouton de contact de blog. Je pense que cela ajoute une belle touche personnelle.

Conception de boutons sur différentes structures de colonnes

Jusqu'à présent, nous avons utilisé les lignes de colonne unique pour servir d'arrière-plan à nos boutons. Cela nous permet 3 couches de conception d'arrière-plan. Cependant, si vous souhaitez inclure un bouton sur une structure de colonne différente, vous le pouvez. Vous perdrez simplement la ligne en tant que calque d'arrière-plan.

Par exemple, disons que vous souhaitez ajouter une ligne de colonne 1/2 1/2 avec un bouton à gauche et du texte à droite. Voici ce que vous feriez.

Commencez avec une nouvelle section régulière et sélectionnez la structure de lignes 1/2 1/2 colonnes . Ajoutez ensuite un module de boutons dans la colonne de gauche.

Dans les paramètres du module de boutons , assurez-vous d'insérer le CSS suivant dans la zone de saisie Élément principal sous l'onglet Avancé :

Width: 100%;

Vous pouvez personnaliser le reste du module de boutons plus tard.

Ensuite, accédez aux paramètres de ligne et faites défiler jusqu'aux options d'arrière-plan de la colonne 1 et mettez à jour les paramètres d'arrière-plan comme vous le souhaitez.

Accédez ensuite à l'onglet Conception et mettez à jour les éléments suivants :

Remplissage personnalisé de la colonne 1 : 0px en haut, 0px à droite, 0px en bas, 0px à gauche

Enregistrer les paramètres

Vous avez maintenant un bouton dans la colonne de gauche qui peut utiliser les options d'arrière-plan de la colonne 1 pour la conception. Une fois que vous êtes revenu et que vous avez mis à jour le style du bouton à votre guise, ajoutez votre texte dans la colonne de droite et le tour est joué !

Sensible?

Oui. Parce que les boutons sont construits dans la structure des colonnes de Divi, les boutons répondront bien sur tous les appareils. Vous devrez peut-être revoir les paramètres du module de boutons pour ajuster la façon dont certains éléments de bouton s'adaptent à différents appareils.

Prise en charge de plusieurs navigateurs

Actuellement, la propriété CSS background-blend-mode n'est pas prise en charge par Internet Explorer ou Edge et Safari a des options de fusion limitées. Cependant, le repli n'est pas considérable dans mon expérience pour la plupart des cas.

Voici à quoi ressemblent les boutons sur IE :

Si vous êtes attaché à IE, je vous suggère de les tester pour trouver un juste milieu qui convient à la fois à IE et aux autres navigateurs.

Dernières pensées

Je dois admettre que ce tutoriel est assez révolutionnaire pour moi personnellement. Dans le passé, je devais ajouter un tas de classes et des CSS supplémentaires à mon thème enfant si je voulais styliser les boutons de manière créative. Mais maintenant que je peux utiliser les options d'arrière-plan de Divi, ma vie est devenue beaucoup plus facile. J'espère que vous pourrez utiliser cette astuce de conception pour faire passer vos boutons au niveau supérieur.

Au plaisir de vous entendre dans les commentaires.

À votre santé