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

Bonne nouvelle, Divi propose plusieurs moyens de résoudre un problème. C’est ce qui le rend si charmant et amusant: si vous aimez résoudre des énigmes, vous vous amuserez beaucoup.

Problème du jour: Comment créer un bouton bicolore, avec un espacement vertical et une icône pour indiquer clairement l’appel à l’action.

Nous souhaitons recevoir:

bouton Divi bicolore

Tutoriel sur la création d’un bouton bicolore avec Divi

D’abord nous allons Ajouter un module « Résumé » (également connu sous le nom de Blurb en anglais) avec les paramètres suivants:

  • Utilisez des symboles: Oui
  • Sélectionnez le symbole +
  • Positionnez l’image à gauche du texte

Ensuite, vous devez créer la séparation verticale à gauche du bouton. Pour ce faire, nous allons Utilisez le fond dégradé Comme indiqué ci-dessous. L’astuce consiste à définir une position de départ plus élevée que la position finale pour obtenir une séparation nette. Une direction de gradient de 90 ° crée une séparation verticale.

Enfin, vous devez ajouter du code CSS sur l’onglet avancé et dans le champ « Argument image » comme indiqué ci-dessous. Ce code vous permet de déplacer l’icône de présentation pour la centrer manuellement:

bas: 5px;
gauche: 10px;
Position: relative;

Vous pouvez modifier la valeur des propriétés « Bas » et « Gauche » pour positionner le symbole comme vous le souhaitez.



Source link

Recent Posts