Sélectionner une page

Améliorez vos boutons d’appel à l’action (CTA) : 3 gestes simples à réaliser qui rendront votre site Divi plus dynamique (et comment y arriver)

tuto wordpress divi boutons cta
tuto wordpress divi cta

Améliorez vos boutons d’appel à l’action (CTA) en réalisant 3 techniques efficaces et très à maitriser!

Si comme moi vous avez choisi l’excellent thème Divi chez Elegantthemes pour votre site WordPress et que vous souhaitez apporter du dynamisme et de l’animation aux différents éléments qui composent votre site, vous êtes au bon endroit !

Quelquesoit votre niveau d’aisance avec le CSS, code qui va nous permettre ici d’améliorer l’apparence des boutons d’appels à l’action, il  vous suffit de suivre ces quelques explications. Faites comme moi, laissez-vous guider !

Améliorez vos boutons d’appels à l’action (CTA) !

# 1 : Effet d’impulsion du bouton CTA 

Nous allons ici apprendre à ajouter une animation d’impulsion à un bouton CTA. L’intérêt étant de mieux capter l’attention de l’internaute, sans pour autant en faire trop et ainsi éviter d’en faire une trop grande distraction.

Prenons en exemple et pour fil rouge tout au long de ce tuto ce bouton d’appel à l’action :

Choisissons un bouton simple, en prenant simplement quelques secondes pour personnaliser la couleur du texte et du fond du bouton CTA.

Si vous êtes novice dans l’utilisation du thème DIVI et qu’un tuto pour apprendre à personnaliser un bouton vous serait utile, merci de le préciser dans les commentaires de cet article !

Allons maintenant dans la section “CSS” du module de réglages de rangée (ligne settings) et non pas dans la section du module du bouton !

tuto wordpress divi code css

Maintenant, ajoutons la classe CSS “impulsion” :

tuto wordpress divi code css

N’oublions pas de sauvegarder les modifications apportées avant de quitter le Visual Builder ! Nous allons revenir dans le menu classique de WordPress pour nous rendre dans les options du thème DIVI.

DIVI >> Options du thème >> Général >> Personnaliser CSS

tuto wordpress divi code css

Dans “personnaliser CSS”, insérons ce code :

.impulsion .et_pb_button {

animation-name: pulse;

animation-duration: 5000ms;

transform-origin:70% 70%;

animation-iteration-count: infinite;

animation-timing-function: linear;

}

@keyframes pulse {

0% { transform: scale(1); }

30% { transform: scale(1); }

40% { transform: scale(1.08); }

50% { transform: scale(1); }

60% { transform: scale(1); }

70% { transform: scale(1.05); }

80% { transform: scale(1); }

100% { transform: scale(1); }

}

.impulsion .et_pb_button:hover {

animation: none;

}

Et voilà, That’s all folks! 

Votre bouton CTA  va maintenant clignoter 2 fois toutes les 5 secondes. Voici le résultat que vous devez obtenir :

Alors, qu’en pensez-vous ? Avez vous remarqué l’attention que cet effet tout simple exerce sur vous ?

tuto wordpress divi bouton d'appel à l'action

# 2 :  Effet Lift du bouton CTA

Ce nouvel effet “lift” va soulever légèrement notre bouton avec une ombre en dessous, ce qui va créer une perspective d’élévation. Maintenant que nous avons un bouton tout prêt, faisons-en un copié collé, vous verrez que ce nouvel effet est également très rapide à réaliser.

Afin de rendre un peu plus dynamique cet effet “lift”, ajoutons-y une petite icône. Choisissez celle qui vous convient le mieux, pour ma part j’ai choisi une petite flèche pointant vers le bas, cela ira bien avec l’effet que voulons lui donner :

ajouter un effet dynamique à un bouton CTA
icône sur un bouton d'appel à l'action

Sous “CSS personalisé”, ajoutons la classe CSS que nous nommerons “lift ” :

tuto wordpress divi code css

DIVI >> Options du thème >> Général >> Personnaliser CSS

Dans “personnaliser CSS”, insérons ce code :

 

.lift .et_pb_button:hover{

box-shadow: 0 25px 55px 0 rgba(0, 0, 0, 0.21), 0 16px 28px 0 rgba(0, 0, 0, 0.22);

margin-top: -5px;

margin-bottom: 5px !important;

 

}

Nous pouvons maintenant admirer le résultat :

# 3 :  Effet Rotation de l’icône du bouton d’appel à l’action

Maintenant que nous nous sommes fait la main sur la personnalisation CSS de ce bouton, reprenons ce même bouton CTA et rajoutons simplement un effet de rotation sur l’icône que nous venons de mettre en place. Cet effet va une nouvelle fois ajouter du dynamisme à votre bouton et donc à votre site ou blog.

Dans l’onglet CSS du module de réglage de la rangée (ligne settings), nous allons ajouter la classe CSS “rotation” en plus de la classe “lift” (un espace entre les deux classes CSS) :

effet de rotation d'une icône CSS

DIVI >> Options du thème >> Général >> Personnaliser CSS

 Dans “personnaliser CSS”, insérons ce code :

.rotation .et_pb_button:hover:after {

-webkit-transform: rotate(-90deg);

transform: rotate(-90deg);

 

}

Et voilà le travail !

Que pensez-vous de ces effets super simples à mettre en place et qui vont vous permettre de dynamiser l’apparrence de votre site ? A votre tour, améliorez vos boutons d’appel à l’action et mesurez l’impact que ce changement aura lors de l’utilisation et lecture de votre site internet !

N’hésitez pas à donner vos impressions dans les commentaires ci-dessous et de faire part de vos difficultés rencontrées, si vous en avez eu !

tuto wordpress divi