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)
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 !
Maintenant, ajoutons la classe CSS “impulsion” :
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
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 ?
# 2 : Effet Lift du bouton CTA
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 :
Sous “CSS personalisé”, ajoutons la classe CSS que nous nommerons “lift ” :
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) :
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 !
