22. Modifier les boutons et insérer des liens

.elementor-255 .elementor-element.elementor-element-9e6c10b > .elementor-background-overlay{background-image:url("https://creamentor.com/wp-content/uploads/2020/02/fond-webdesign-background.png");background-position:center center;background-size:cover;opacity:0.2;}.elementor-255 .elementor-element.elementor-element-9e6c10b > .elementor-shape-top .elementor-shape-fill{fill:rgba(249, 251, 253, 0.86);}.elementor-255 .elementor-element.elementor-element-9e6c10b > .elementor-shape-top svg{height:74px;}.elementor-255 .elementor-element.elementor-element-9e6c10b{margin-top:0px;margin-bottom:0px;padding:50px 0px 50px 0px;}.elementor-255 .elementor-element.elementor-element-27b7f377 > .elementor-element-populated{padding:0% 5% 0% 5%;}.elementor-255 .elementor-element.elementor-element-2de6b7bd .elementor-heading-title{color:#17AFC3;font-family:"Work Sans", Sans-serif;font-size:2.5em;font-weight:300;}.elementor-255 .elementor-element.elementor-element-2de6b7bd > .elementor-widget-container{margin:0px 0px 0px 0px;}.elementor-255 .elementor-element.elementor-element-2de6b7bd{width:auto;max-width:auto;}.elementor-255 .elementor-element.elementor-element-5b284d0c .elementor-heading-title{color:#3B3E4D;font-family:"Work Sans", Sans-serif;font-size:5.3em;font-weight:100;}.elementor-255 .elementor-element.elementor-element-5b284d0c > .elementor-widget-container{margin:0px 0px 0px 0px;}.elementor-255 .elementor-element.elementor-element-5b284d0c{width:auto;max-width:auto;}.elementor-255 .elementor-element.elementor-element-58f90a8f .elementor-widget-container{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;text-align:left;}.elementor-255 .elementor-element.elementor-element-58f90a8f{--ha-card-image-width:142px;}.elementor-255 .elementor-element.elementor-element-58f90a8f .ha-card-figure{height:142px;}.elementor-255 .elementor-element.elementor-element-58f90a8f .ha-card-figure img{padding:31px 31px 31px 31px;border-style:solid;border-width:4px 4px 4px 4px;border-color:rgba(23, 175, 195, 0.30196078431372547);border-radius:300px 300px 300px 300px;}.elementor-255 .elementor-element.elementor-element-58f90a8f .ha-badge{--ha-badge-translate-x:15px;--ha-badge-translate-y:10px;padding:6px 15px 6px 15px;color:#242424;background-color:#ffffff;border-style:solid;border-color:rgba(23, 175, 195, 0.30196078431372547);}.elementor-255 .elementor-element.elementor-element-58f90a8f .ha-card-body{padding:100px 60px 100px 50px;}.elementor-255 .elementor-element.elementor-element-58f90a8f .ha-card-title{font-family:"Montserrat", Sans-serif;font-size:18px;font-weight:700;line-height:1.5em;}.elementor-255 .elementor-element.elementor-element-58f90a8f .ha-card-text{color:#8c8c8c;font-family:"Nunito", Sans-serif;}.elementor-255 .elementor-element.elementor-element-58f90a8f .ha-btn{padding:15px 20px 15px 0px;font-family:"Work Sans", Sans-serif;font-size:1em;font-weight:400;border-radius:20px 20px 20px 20px;color:#242424;background-color:rgba(185, 185, 185, 0);}.elementor-255 .elementor-element.elementor-element-58f90a8f .ha-btn:hover, .elementor-255 .elementor-element.elementor-element-58f90a8f .ha-btn:focus{color:#e2498a;}.elementor-255 .elementor-element.elementor-element-58f90a8f > .elementor-widget-container{padding:0px 0px 0px 50px;border-radius:10px 10px 10px 10px;}.elementor-255 .elementor-element.elementor-element-58f90a8f.ha-has-bg-overlay > .elementor-widget-container:before{transition:background 0.3s;}.elementor-255 .elementor-element.elementor-element-58f90a8f:hover .elementor-widget-container{box-shadow:2px 4px 10px 0px rgba(0,0,0,0.1);}.elementor-bc-flex-widget .elementor-255 .elementor-element.elementor-element-451d097.elementor-column .elementor-column-wrap{align-items:center;}.elementor-255 .elementor-element.elementor-element-451d097.elementor-column.elementor-element[data-element_type="column"] > .elementor-column-wrap.elementor-element-populated > .elementor-widget-wrap{align-content:center;align-items:center;}.elementor-255 .elementor-element.elementor-element-dc8b0cd .elementor-heading-title{color:#FFFFFF;font-family:"Work Sans", Sans-serif;font-size:2.4em;font-weight:100;}.elementor-255 .elementor-element.elementor-element-dc8b0cd > .elementor-widget-container{margin:0px 0px 0px 0px;padding:3px 10px 3px 10px;background-color:#17AFC3;border-radius:4px 4px 4px 4px;}.elementor-255 .elementor-element.elementor-element-dc8b0cd.ha-has-bg-overlay > .elementor-widget-container:before{transition:background 0.3s;}.elementor-255 .elementor-element.elementor-element-9802d0e .elementor-field-group{margin-bottom:10px;}.elementor-255 .elementor-element.elementor-element-9802d0e .elementor-form-fields-wrapper{margin-bottom:-10px;}.elementor-255 .elementor-element.elementor-element-9802d0e .elementor-field-group > a{color:#17AFC3;}.elementor-255 .elementor-element.elementor-element-9802d0e .elementor-field-group > a:hover{color:#E2498A;}body .elementor-255 .elementor-element.elementor-element-9802d0e .elementor-field-group > label{padding-bottom:0px;}.elementor-255 .elementor-element.elementor-element-9802d0e .elementor-form-fields-wrapper label{color:#000000;font-weight:600;}.elementor-255 .elementor-element.elementor-element-9802d0e .elementor-field-group .elementor-field:not(.elementor-select-wrapper){background-color:#E7F0FE;border-width:0px 0px 0px 0px;}.elementor-255 .elementor-element.elementor-element-9802d0e .elementor-field-group .elementor-select-wrapper select{background-color:#E7F0FE;border-width:0px 0px 0px 0px;}.elementor-255 .elementor-element.elementor-element-9802d0e .elementor-button{background-color:#17AFC3;}@media(min-width:768px){.elementor-255 .elementor-element.elementor-element-fd8e0cb{width:54.294%;}.elementor-255 .elementor-element.elementor-element-451d097{width:45.594%;}}@media(max-width:1024px) and (min-width:768px){.elementor-255 .elementor-element.elementor-element-27b7f377{width:100%;}}@media(min-width:1025px){.elementor-255 .elementor-element.elementor-element-9e6c10b > .elementor-background-overlay{background-attachment:fixed;}}@media(max-width:1024px){.elementor-255 .elementor-element.elementor-element-9e6c10b{margin-top:30px;margin-bottom:30px;padding:20px 20px 20px 20px;}.elementor-255 .elementor-element.elementor-element-58f90a8f .elementor-widget-container{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;text-align:left;}.elementor-255 .elementor-element.elementor-element-58f90a8f{--ha-card-image-width:100%;}.elementor-255 .elementor-element.elementor-element-58f90a8f .ha-badge{--ha-badge-translate-x:6px;}}@media(max-width:767px){.elementor-255 .elementor-element.elementor-element-27b7f377 > .elementor-element-populated{margin:50px 0px 0px 0px;}.elementor-255 .elementor-element.elementor-element-2de6b7bd .elementor-heading-title{font-size:30px;}.elementor-255 .elementor-element.elementor-element-5b284d0c .elementor-heading-title{font-size:66px;}.elementor-255 .elementor-element.elementor-element-58f90a8f .elementor-widget-container{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;text-align:left;}.elementor-255 .elementor-element.elementor-element-58f90a8f{--ha-card-image-width:120px;}.elementor-255 .elementor-element.elementor-element-58f90a8f .ha-card-figure{height:120px;}.elementor-255 .elementor-element.elementor-element-58f90a8f .ha-card-figure img{padding:15px 15px 15px 15px;}.elementor-255 .elementor-element.elementor-element-58f90a8f .ha-badge{--ha-badge-translate-x:25px;--ha-badge-translate-y:-27px;}.elementor-255 .elementor-element.elementor-element-58f90a8f .ha-card-body{padding:0px 0px 0px 20px;}.elementor-255 .elementor-element.elementor-element-58f90a8f .ha-card-title{font-size:16px;}.elementor-255 .elementor-element.elementor-element-58f90a8f > .elementor-widget-container{padding:15px 15px 15px 15px;}.elementor-255 .elementor-element.elementor-element-dc8b0cd .elementor-heading-title{font-size:30px;}}

Contenu

Réservé aux membres

illustration webdesign facile
Exclusif

Formation Elementor + accès illimité à toutes les ressources

20€ /mois
Sans engagement

Accéder à la Formation Elementor

Pour voir les étapes, Connectez-vous

Foire aux Questions - Liens & Boutons

Quelques conseils pour créer des boutons d’appel à l’action (call to action) efficaces:

  • Parler en bénéfice client: tournez le contenu texte du bouton en fonction du bénéfice client. Par exemple, au lieu d’un simple “inscrivez-vous à notre newsletter”, indiquez plutôt en quoi il est intéressant pour l’usager de s’inscrire “s’inscrire pour profiter des meilleurs conseils, actus…”
  • Intitulé explicite: le bouton doit clairement indiquer où il va mener l’usager lorsqu’il va cliquer. Au lieu de “Plus”, essayez de préciser “Voir toutes les offres de la saison” par exemple
  • Encourager à agir: le bouton doit exprimer une action, donc privilégiez les verbes “Créer/ créez un compte”, “Demander/ demandez un RDV”…
  • Visibilité du bouton: le bouton doit être clairement visible, et doit être contrasté afin d’être immédiatement reconnaissable. La position du bouton doit être telle que l’on ne peut pas passer à côté. Laissez de l’espace autour du bouton afin qu’il soit clairement visible et identifiable. Soignez également la taille: ne le faites pas trop discret (sans exagérer non plus, évidemment). Et rendez-le visible en utilisant le contraste de couleurs avec le reste de votre page.
  • Reconnaissable facilement et respect des “codes visuels” de votre site: afin d’être clairement identifié comme un bouton d’appel à l’action par l’usager, essayez de répéter le même style de bouton: couleur de fond, couleur de police, taille, forme… Ainsi, les utilisateurs percevront immédiatement la fonction du bouton et le fait qu’il soit cliquable. La forme, la couleur, la taille doivent paraître logique aux yeux du visiteur afin qu’il sache immédiatement qu’il peut cliquer sur ce bouton.
  • Adapté au contexte, en fonction de la phase dans laquelle se trouve le visiteur, sans le brusquer: par exemple, un bouton d’appel à l’action dans une page d’accueil doit plutôt inviter l’usager à en savoir plus, puisqu’il est dans une phase de “découverte” de votre site. Inutile de le brusquer. Ensuite, si le visiteur a franchi cette première étape, faites le arriver sur une page dans laquelle les boutons d’appel à l’action sont un peu plus orientés pour éveiller son désir, donner envie. Si cette seconde étape est franchie, poussez un peu plus le visiteur à passer à l’action (d’achat par exemple). Des intitulés “validez votre panier” dès la page d’accueil seraient trop exagérés, n’est-ce pas ? Mettez-vous à la place de l’usager et prévoyez son parcours de navigation sur votre site, et adaptez l’intitulé des boutons suivant la phase dans laquelle il se trouve au fil de la navigation: Attirer l’attention en éveillant la curiosité, puis générer de l’intérêt, ensuite éveiller le désir et la motivation, et enfin passer à l’action finale.
  • Facilitez le clic, en répétant ce même bouton le long de votre page, surtout si votre page est longue. En effet, vous pouvez placer le bouton d’appel à l’action au début de la page, notamment pour les utilisateurs qui sont déjà convaincus et qui souhaitent passer à l’action sans attendre. Et pour les visiteurs qui ont besoin de parcourir un peu plus le contenu de votre page avant d’être convaincus de cliquer, répétez le bouton au milieu de la page, ou après une première partie de page, et répétez encore à la fin de la page, pour les visiteurs qui, après lecture de tout le contenu, sont enfin prêts à cliquer. Vous pouvez ainsi faciliter le clic en laissant la possibilité au visiteur de cliquer sur votre bouton sans qu’il ait à revenir en haut de page ou sans l’obliger de lire votre contenu jusqu’à la fin avant de cliquer. Certains visiteurs n’attendront pas de lire tout le contenu jusqu’à la fin et pourraient quitter la page avant d’arriver en bas et donc vous perdriez l’occasion de les inviter à cliquer. D’autres visiteurs auront besoin de lire tout le contenu avant de cliquer sur le bouton. Donc faites en sorte de satisfaire le maximum de vos visiteurs et n’hésitez pas à répéter votre bouton d’appel à l’action de temps à autres (sans que ce soit trop invasif non plus).
  • Facilement cliquable: certains visiteurs utiliseront une souris dont le pointeur est relativement précis. Mais de nombreux usagers navigueront sur votre site depuis leur mobile, en utilisant leur doigt, qui est beaucoup moins précis que le pointeur de la souris. Si votre bouton est trop fin et qu’il faut être un as du clic pour arriver à cliquer, vous risquez de perdre les utilisateurs les moins “habiles”. Donc tout en respectant l’harmonie de votre design, essayez de vous assurer que votre bouton est suffisamment large et haut pour qu’il soit facilement cliquable.