Tuto Divi : comment créer un bouton bicolore avec icône

La solution la plus évidente n’est pas toujours la meilleure.

Bonne nouvelle, Divi offre de multiples façons de résoudre un problème, c’est ce qui fait tout son charme et son côté fun : si vous aimez résoudre des énigmes, vous avez largement de quoi vous amuser.

Problème du jour : comment créer un bouton bicolore, avec une séparation verticale et une icône pour bien indiquer l’appel à l’action.

Voilà ce qu’on voudrait obtenir :

Tuto pour créer un bouton bicolore avec Divi

Pour commencer, nous allons ajouter un module « résumé » (alias Blurb en anglais)  avec les paramètres suivants :

• utiliser les icônes : oui
• choisir l’icône du +
• positionner l’image à gauche du texte

Ensuite, il faut créer la séparation verticale à gauche du bouton. Pour se faire, nous allons utiliser un arrière-plan dégradé comme indiqué ci-dessous. L’astuce consiste à mettre une position de départ supérieure à la position de fin de façon à créer une séparation nette. Une direction de dégradé de 90° permet de créer une séparation verticale.

Enfin, vous devrez ajouter un peu de code CSS dans l’onglet « Avancé »  et dans le champs « Image de l’argumentaire » comme indiqué ci-dessous. ce code permet de déplacer l’icône du blurb de façon à bien la centrer manuellement :

bottom: 5px;
left: 10px;
position: relative;

Vous pouvez modifier la valeur des propriétés « bottom » et « left » pour bien positionner l’icône à votre guise.