fbpx

3 exemples de « call to action » incroyables pour systeme io

Mis à jour le 13/09/2021 | Publié le 31/05/2021 | 0 commentaires

lien vers l'essai gratuit de systeme io
lien vers la page attirer plus de clients du site astuces systeme io
lien vers la page études de cas et idées business en ligne du site astuces systeme io
lien vers la page tunnel de vente du site astuces systeme io

Des exemples de call to action ?

Si tu souhaites faire exploser ton chiffre d’affaire sur internet, un call to action qui convertit est indispensable, c’est pourquoi je te propose de découvrir 3 call to action qui convertissent.

Dans cet article, tu découvriras 3 exemples de call to action qui convertissent.

« Un call to action, ça convertit ou ça ne convertit pas ! « 

Citation par Rémy

Présentation par le fondateur Aurélien Amacker

C’est quoi un call to action ?

Pour convertir un maximum de visiteurs de ton entonnoir de vente en leads ou carrément en clients, tu auras besoin de plusieurs éléments et notamment de call to action qui convertissent un maximum.

Un CTA (call to action), en Français, un appel à l’action est un élément de ton entonnoir de vente qui est cliquable et surtout, c’est un élément qui va inciter tes visiteurs à cliquer dans le but d’effectuer une action précise et de faire passer ton visiteur à l’étape suivante de ton tunnel de vente.

Un call to action n’est pas forcément un bouton bien que ceux-ci convertissent davantage.

Un CTA peut être :

  • Une image
  • Une image vectorielle
  • Un texte
  • Un bouton
  • Une icône
  • Un emoji
  • Un logo

Bon ok, c’est rare de mettre en CTA un emoji ou un logo mais pourquoi pas après tout si les visiteurs cliquent dessus.

millionnaire

Profite de ton essai gratuit en illimité dès maintenant !
Cela te permettra de tout tester !😃

L’optimisation d’un call to action dans systeme io

Pour que ton call to action fasse passer tes visiteurs à l’étape suivante de ton tunnel de vente en cliquant dessus, tu dois faire attention à 4 choses principales.

La tronche de ton call to action (design), le texte contenu dans ton CTA, l’endroit ou tu le place et bien sûr il te faudra le tester.

Le design de ton call to action

Typiquement, tu peux t’amuser avec les contraste de couleur, les boites ombres, la dimension de ton CTA, la police du texte de ton CTA, les couleurs de fonds, les bordures et bien d’autres choses.

Le but du jeu est toujours le même, que ton call to action soit différent de tout le reste de ta page pour qu’il ressorte à l’oeil du visiteur, qu’il soit visible rapidement en un instant et qu’il incite les internautes à cliquer pour passer à la page d’après dans ton entonnoir de vente.

L’aspect visuel de ton CTA est primordiale pour augmenter ton taux de conversion. Quand tu créer ton bouton d’appel à l’action, les couleurs sont hyper importantes, tu dois garder à l’esprit la signification des couleurs.

Personnellement je privilégie le bleu car c’est la couleur de la confiance et sans confiance, on ne vend rien… Par ailleurs, regarde les plus gros sites du web, Facebook, Linkedin, Twitter et compagnie, ils utilisent principalement le bleu aussi alors pourquoi ne pas s’inspirer de ces sites ?

millionnaire

Profite de ton essai gratuit en illimité dès maintenant !
Cela te permettra de tout tester !😃

Le texte/message contenu dans ton appel à l’action

Pour augmenter ton taux de conversion, n’hésites pas à user et abuser des verbes d’action comme par exemple:

  • Télécharger
  • Découvrir
  • Obtenir
  • Acheter
  • Voir
  • Essayer

Ces petits détails peuvent te sembler tout pourris et pourtant ils peuvent te permettre d’augmenter tes conversions de façon stratosphérique ! Et ce qui marche souvent encore mieux, c’est de mettre des petites phrases comme par exemple:

  • Je télécharge le guide gratuit
  • Je découvre la méthode
  • J’obtiens le pdf
  • J’achète le pull

Bref tu as compris, tu dois faire attention aux mots que tu vas utiliser, le texte doit être clair et facile à comprendre, tes visiteurs doivent comprendre tout de suite ce qu’il va se passer si ils cliquent sur le bouton.

C’est simple, ça t’es déjà arrivé d’être sur un site et tu vois un bouton d’appel à l’action, tu hésites à cliquer dessus parce que tu n’es pas sûr de ce qu’il va se passer si tu cliques.
Est-ce que tu vas te choper un virus ? Est-ce que tu vas être redirigé vers un autre site ?

Voila c’est exactement ce sentiment qu’il faut éviter à tes visiteurs pour qu’ils cliquent sur tes appels à l’action.

Certains professionnels du web te diront aussi que pour optimiser ton taux de conversion, tu peux utiliser des termes temporels pour montrer à tes visiteurs que tu proposes une offre limitée soit dans le temps soit en terme de quantité.

Personnellement, je ne fais jamais cela car je déteste presser les gens et cela renvoi une mauvaise image de nos jours, tu sais c’est quand les gens disent « regarde lui il veut vendre un max à tout prix pendant 1 semaine et après partir en vacances ». Cela renvoi l’image d’une entreprise pas hyper sérieuse qui veut faire son beurre sur le dos des gens.

Donc je ne te conseille pas d’utiliser le sentiment d’urgence.

millionnaire

Profite de ton essai gratuit en illimité dès maintenant !
Cela te permettra de tout tester !😃

L’emplacement de ton bouton d’appel à l’action

L’emplacement de ton bouton d’appel à l’action est aussi important pour ton taux de clics, appelé par les pros du web CTR. Ton CTA doit être visible, essaye de le faire ressortir de ta page.

Si tu le positionne en plein milieu d’un article de 4000 mots, ce n’est pas évident pour le visiteur de le voir… C’est pourquoi il te faudra y mettre les formes pour le rendre le plus visible possible et donner envie à tes visiteurs de cliquer dessus.

D’une manière générale, on observe que les boutons d’appel à l’action qui sont intégrés au dessus de la ligne de flottaison ont de bien meilleures performances et pourquoi d’après toi ?

Parce qu’ils sont plus visibles, eh oui, la ligne de flottaison, c’est la ligne juste en dessous du menu tout en haut… Ce qui signifie que le bouton se trouve dans le menu donc tout en haut, en d’autres termes, c’est quasiment la première chose que vois le visiteur quand il arrive sur ton site.

Regarde, sur mon site, la première chose que tu vois quand tu arrive, c’est le gros bouton bleu « ESSAI GRATUIT ».

Comment tester tes boutons d’appel à l’action dans systeme io ?

La dernière chose que tu dois faire, ce sont des tests A/B. Grâce à systeme io, c’est super simple !

Il faut bien que tu comprenne une chose, ce n’est pas parce que tu CROIT avoir trouvé un design exceptionnel pour ton bouton d’appel à l’action qu’il va être PERFORMANT, ton bouton est peut être le plus beau du monde mais si il ne fait pas cliquer les visiteurs alors il ne sert à rien.

C’est justement le but du jeu d’un test A/B de savoir si ton bouton d’appel à l’action est performant ou pas.

La théorie est la suivante, tu as déjà une page en place, tu vas créer une autre page différente et tu vas envoyer du trafic sur les deux. Je te conseille d’avoir au moins 1000 vues de tes pages pour savoir laquelle est la plus performante. A chaque 1000 vues par exemple, tu changes le texte de ton call to action et tu relance un test pour déterminer quel texte fait le plus cliquer.

Maintenant, passons à la pratique.

Dans ton tunnel de vente, tu vas créer une autre page que tu veux tester. Tu cliques sur ta page d’origine et tu vas dans la partie « Test A/B ». Tu choisis la page que tu veux tester, tu choisis dans la pop up la page d’objectif.

test a et b sur systeme io

Tu peux bien sûr modifier les pages mais ne les touches pas trop, le but c’est quand même de faire un test sur des éléments qui ne bougent pas, donc tu fais tes modifications au départ puis tu ne touche plus et tu vois les résultats.

Puis tu cliques sur « Lancer le test A/B » et c’est tout, tu observes les résultats et tu agiras en conséquence.

millionnaire

Profite de ton essai gratuit en illimité dès maintenant !
Cela te permettra de tout tester !😃

Le premier exemple de call to action

Voici un exemple tout simple de call to action facile à implémenter dans ton entonnoir de vente. Il s’agit d’un bouton avec effet zoom.

Le code (il te faudra l’adapter) :

.custom-button{
background: #2daae1!important;
border-radius: 30px;
color: #fff!important;
border: none !important;
padding:10px 10px;
line-height: 1.7em !important;
font-size: 20px !important;
display: inline-block;
float: none;
margin: 10px;
transition: transform .2s;
}
#custom-button1-hover:hover, .custom-button-hover:hover, a.et_pb_button.custom-button:hover {
padding: 10px 10px;
-webkit-transform: scale(1.15);/* Ch <36, Saf 5.1+, iOS < 9.2,
An =<4.4.4 */
-ms-transform: scale(1.15); /* IE 9 */
transform: scale(1.15); /* IE 10, Fx 16+, Op 12.1+ */
}
a.et_pb_button.custom-button:hover {
transition: 0.2s ease !important;
}
@media only screen and (max-width:480px){
.custom-button{
margin-top: 10px !important;
}
}

Le second exemple de bouton d’appel à l’action

Un autre exemple, c’est mon préféré. Il s’agit d’un bouton avec effet zoom mais aussi avec un effet brillant sur les contours.

Le code (il te faudra l’adapter) :

.shiny {
background: #2CAAE1;
border-radius: 30px;
box-shadow: 0 0 5px 0 rgba(5, 135, 200);
animation: pulse 2s infinite;
color:#fff;
text-transform:uppercase;
border:none;
}
.shiny:hover {
background-color: #2CAAE1 !important;
animation: none;
transform: scale(1.1);
border:none !important;
}
.shiny:hover:after {
display:none;
}
@keyframes pulse {
0% {
box-shadow:0px 0px 5px 0px rgba(5, 135, 200)
}

50% {
box-shadow:0px 0px 5px 5px rgba(5, 135, 200)
}
100% {
box-shadow:0px 0px 5px 0px rgba(5, 135, 200)
}
}

Le troisième exemple de bouton d’appel à l’action
pour systeme io

Le dernier exemple, c’est un bouton qui donne comme une sensation « visqueuse », ouai c’est dégueulasse, mais joli à voir et à cliquer…


Le code (il te faudra l’adapter) :

<style>
.buttons {
margin-top: 0px;
text-align: center;
border-radius: 30px;
}

.blob-btn {
z-index: 1;
position: relative;
padding: 20px 50px;
margin-bottom: 0px;
text-align: center;
text-transform: uppercase;
color: #0c81bf;
font-size: 16px;
font-weight: bold;
background-color: transparent;
outline: none;
border: none;
transition: color 0.5s;
cursor: pointer;
border-radius: 30px;
}
.blob-btn:before {
content: «  »;
z-index: 1;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
border: 2px solid #0c81bf;
border-radius: 30px;
}
.blob-btn:after {
content: «  »;
z-index: -2;
position: absolute;
left: 3px;
top: 3px;
width: 100%;
height: 100%;
transition: all 0.3s 0.2s;
border-radius: 30px;
}
.blob-btn:hover {
color: #FFFFFF;
border-radius: 30px;
}
.blob-btn:hover:after {
transition: all 0.3s;
left: 0;
top: 0;
border-radius: 30px;
}
.blob-btn__inner {
z-index: -1;
overflow: hidden;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
border-radius: 30px;
background: #ffffff;
}
.blob-btn__blobs {
position: relative;
display: block;
height: 100%;
filter: url(« #goo »);
}
.blob-btn__blob {
position: absolute;
top: 2px;
width: 25%;
height: 100%;
background: #0c81bf;
border-radius: 100%;
transform: translate3d(0, 150%, 0) scale(1.7);
transition: transform 0.45s;
}
@supports (filter: url(« #goo »)) {
.blob-btn__blob {
transform: translate3d(0, 150%, 0) scale(1.4);
}
}
.blob-btn__blob:nth-child(1) {
left: 0%;
transition-delay: 0s;
}
.blob-btn__blob:nth-child(2) {
left: 30%;
transition-delay: 0.08s;
}
.blob-btn__blob:nth-child(3) {
left: 60%;
transition-delay: 0.16s;
}
.blob-btn__blob:nth-child(4) {
left: 90%;
transition-delay: 0.24s;
}
.blob-btn:hover .blob-btn__blob {
transform: translateZ(0) scale(1.7);
}
@supports (filter: url(« #goo »)) {
.blob-btn:hover .blob-btn__blob {
transform: translateZ(0) scale(1.4);
}
}

.buttons svg {
display: none;
}
</style>
<div class= »buttons »>
<button class= »blob-btn »>
Troisième exemple de bouton
<span class= »blob-btn__inner »>
<span class= »blob-btn__blobs »>
<span class=« blob-btn__blob »></span>
<span class=« blob-btn__blob »></span>
<span class=« blob-btn__blob »></span>
<span class=« blob-btn__blob »></span>
</span>
</span>
</button>
<br/>

<svg xmlns= »http://www.w3.org/2000/svg » version= »1.1″>
<defs>
<filter id= »goo »>
<feGaussianBlur in= »SourceGraphic » result= »blur » stdDeviation=« 10 »></feGaussianBlur>
<feColorMatrix in= »blur » mode= »matrix » values= »1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 21 -7″ result= »goo »></feColorMatrix>
<feBlend in2= »goo » in= »SourceGraphic » result= »mix »></feBlend>
</filter>
</defs>
</svg>

Dis moi ce que tu penses de mes 3 exemples de call to action en commentaire.
Tu peux te servir des commentaires comme d’un tchat et me poser tes questions. 😃


Est-ce que tu as lu mon guide de démarrage gratuit sur systeme io ?

5/5 - (19 votes)

0 commentaires

Soumettre un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Pin It on Pinterest