Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
Coupe WPB
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

Comment ajouter des boutons d’appel à l’action dans WordPress (sans code)

Note éditoriale : Nous percevons une commission sur les liens des partenaires sur WPBeginner. Les commissions n'affectent pas les opinions ou les évaluations de nos rédacteurs. En savoir plus sur Processus éditorial.

Vous souhaitez ajouter des boutons d’appel à l’action dans vos publications ou pages WordPress ?

Les boutons sont un excellent moyen de stimuler les conversions. Ils sont très perceptibles, ce qui les rend excellents pour rediriger l’attention des utilisateurs/utilisatrices vers une interaction souhaitée.

Par exemple, vous pouvez utiliser un bouton d’appel à l’action pour envoyer les utilisateurs/utilisatrices vers une page transactionnelle comme une page de tarification, une page de produits, une page de services et d’autres sur votre site.

Vous pouvez également utiliser des boutons d’appel à l’action pour promouvoir des offres spéciales, de nouveaux produits ou des liens d’affiliation qui renvoient vers des sites partenaires.

Dans cet article, nous allons vous afficher comment ajouter facilement de beaux boutons d’appel à l’action dans WordPress sans écrire de code.

Adding Buttons in WordPress Step by Step

Note : Cet article concerne l’ajout de boutons d’appel à l’action personnalisés dans WordPress. Si vous souhaitez ajouter des boutons de partage social, veuillez consulter notre guide sur l ‘ajout de boutons de partage social dans WordPress.

Ajout de boutons dans les publications et pages WordPress (étape par étape)

WordPress rend super facile l’ajout de boutons avec un bloc de boutons intégré. C’est une fonctionnalité qui a été introduite avec l’éditeur de blocs WordPress Gutenberg.

Dans cet article, nous allons afficher trois façons d’ajouter des boutons d’appel à l’action dans les publications et les pages de blog WordPress. Vous pouvez choisir la solution qui correspond le mieux à vos besoins.

N’hésitez pas à utiliser la table des matières ci-dessous pour naviguer facilement dans cet article :

Table des matières:

Tutoriel vidéo

Subscribe to WPBeginner

Si vous n’aimez pas la vidéo ou si vous avez besoin de plus d’instructions, alors continuez à lire.

Ajout de boutons dans les publications / pages de WordPress à l’aide de l’éditeur par défaut

Cette méthode est facile et recommandée pour la plupart des utilisateurs/utilisatrices. Elle utilise le bloc Bouton intégré dans l’éditeur/éditrices de blocs de WordPress. Si vous utilisez toujours l’ancien éditeur classique, alors vous pouvez passer à la section suivante.

Tout d’abord, vous devez créer une nouvelle publication ou modifier une publication existante dans laquelle vous souhaitez ajouter un bouton.

Dans l’écran de modification de votre publication, cliquez sur l’icône « + » et sélectionnez le bloc Mises en page dans la section Éléments de mise en page.

Add button block

Ensuite, vous devriez pouvoir voir le bloc de boutons ajouté à l’éditeur de contenu.

Il suffit de cliquer sur la zone « Ajouter du texte… » et de saisir le texte de votre bouton.

Add button text

Ensuite, cliquez sur le bouton Link dans la barre d’outils pour ajouter un lien.

Vous pouvez rechercher une publication ou une page ou simplement copier et coller une URL dans le champ du lien.

Add button link

Une fois saisi/saisie, appuyez sur ‘Enter’ ou sur l’icône ‘Apply’ pour enregistrer votre lien.

Si vous souhaitez afficher le bouton au centre, vous pouvez cliquer sur l’icône « Justifier » et sélectionner « Justifier au centre ». Vous pouvez également modifier l’alignement vertical du bouton à partir de la barre d’outils.

Change button alignment

Ensuite, vous pouvez personnaliser le style de votre bouton et modifier les couleurs du texte et de l’arrière-plan à partir du panneau des réglages du bloc situé sur le côté droit.

Il suffit de passer à l’onglet « Style » dans les Réglages du bloc pour ajuster le style de votre bouton.

Change button style

Vous pouvez choisir entre trois styles de boutons : par défaut, contour et carré. Vous pouvez essayer chacun d’entre eux en cliquant dessus et en choisissant celui qui vous convient le mieux.

La section Réglages des couleurs comprend cinq variations de couleurs pour l’arrière-plan et le texte du bouton. Vous pouvez uniquement utiliser une couleur personnalisée de votre choix en cliquant sur l’option « Couleur personnalisée ».

Button style settings

En direct, lorsque vous êtes satisfait du design du bouton, vous pouvez enregistrer votre publication ou la publier pour voir une prévisualisation en direct.

Voici ce que cela donne sur notre site de démonstration.

Call to action button preview

Bonus : si vous souhaitez connaître les performances de vos boutons, vous devriez utiliser MonsterInsights. Il dispose d’un suivi d’événement intégré pour les liens d’affiliation, les liens sortants et les évènements personnalisés, de sorte que vous pouvez voir comment vos boutons sont performants. Pour plus de détails, consultez les métriques marketing importantes que vous devez suivre dans WordPress.

Création d’un bouton WordPress dans l’éditeur/éditrices classique

L’éditeur de blocs par défaut de WordPress est moderne, plus rapide et plus facile. Certains utilisateurs/utilisatrices utilisent encore l’ancien éditeur WordPress classique.

Nous ne recommandons pas l’utilisation de l’éditeur WordPress classique. Il est obsolète et n’a pas assez de fonctionnalités dont les utilisateurs/utilisatrices ont besoin pour créer du contenu génial. Si vous l’utilisez encore, nous vous conseillons de l’inactiver et d’utiliser l’éditeur de blocs.

D’un autre côté, certains utilisateurs/utilisatrices peuvent encore vouloir l’utiliser. Dans ce cas, vous aurez besoin d’une solution alternative pour ajouter des modules sur votre site WordPress.

Il existe trois facultatifs pour ajouter des boutons dans l’éditeur classique de WordPress :

  1. Ajouter un bouton dans WordPress avec du code HTML / CSS.
  2. Ajoutez un bouton dans WordPress avec une extension WordPress button shortcode.
  3. Ajouter un bouton dans WordPress sans utiliser de codes courts.

Parmi ces trois options, la première est la méthode de codage. Vous devrez écrire un code HTML / CSS et l’ajouter à votre site partout où vous avez besoin d’un bouton. Cette méthode n’est pas adaptée aux débutants.

La deuxième option est la méthode la plus couramment utilisée. C’est parce que la plupart des extensions de boutons WordPress fournissent des codes courts pour l’ajout de boutons.

La troisième option est la meilleure car elle vous permet d’ajouter facilement des boutons à vos publications et pages sans avoir à vous souvenir du code court.

Voyons comment ajouter des boutons dans WordPress sans utiliser de codes courts.

La première chose à faire est d’installer et d’activer l’extension Forget About Shortcode Buttons. Pour plus de détails, consultez notre guide étape par étape sur l’installation d’une extension WordPress.

Une fois l’extension activée, créez une nouvelle publication ou modifiez une publication existante. Dans l’éditeur, vous verrez un nouveau bouton dans l’éditeur visuel libellé  » Insérer un bouton « .

Insert Button Icon in Classic WordPress Editor

Pour insérer un nouveau bouton dans votre publication, vous devez cliquer sur l’icône « Insérer un bouton ».

Une fenêtre surgissante apparaît alors, dans laquelle vous pouvez concevoir votre nouveau bouton.

Enter Button Text and URL in Classic Editor

Tout d’abord, vous devez ajouter le texte et l’URL de votre bouton. Lorsque vous ajoutez le texte de votre bouton, vous pouvez voir une prévisualisation en direct dans la boîte ci-dessous.

Ensuite, vous pouvez ajouter une balise nofollow à votre lien et ouvrir le lien dans un nouvel onglet en cliquant sur les options de case à cocher ci-dessous.

Ensuite, vous pouvez sélectionner une icône pour votre bouton. Si vous cliquez sur l’onglet « Icônes », vous verrez les modules que vous pouvez ajouter avant ou après le texte de vos boutons.

Add Icon to your Button in Classic Editor

Ces icônes sont en fait des polices d’icônes (apprenez à utiliser les polices d’icônes dans l’éditeur d’articles de WordPress).

Ensuite, vous pouvez choisir la couleur du texte et de l’arrière-plan de votre bouton en cliquant sur l’icône de la boîte à couleurs.

Change Button Background Color in WordPress Classic Editor

Ensuite, cliquez sur le menu déroulant pour choisir le style de bouton.

Il existe huit styles de boutons différents prêts à l’emploi.

Choose a Button Style in Classic WordPress Editor

De même, vous pouvez choisir la taille du bouton, d’extra petit à extra grand.

Une fois que vous êtes satisfait de l’apparence, il vous suffit de cliquer sur le bouton « Mettre à jour ».

Vous pourrez voir votre bouton tel qu’il apparaît dans votre publication, à l’intérieur même de l’éditeur de la publication.

Vous pouvez également définir l’alignement des boutons en sélectionnant simplement le texte du bouton et en utilisant les boutons de la barre d’outils dans l’éditeur classique.

Center Align Your Button in Classic Editor

En double-cliquant sur le bouton, vous ferez apparaître la fenêtre surgissante Insérer un bouton, et vous pourrez modifier votre bouton si vous le souhaitez.

Une fois que vous êtes satisfait de son design, vous pouvez publier ou mettre à jour votre publication et le voir en action. Voici comment le bouton fantaisie est apparu sur notre site WordPress de démonstration.

Button Preview - Built in Classic Editor

Ajout d’un bouton « cliquer pour appeler » dans WordPress

En plus des boutons d’appel à l’action habituels, vous pouvez également ajouter des boutons de clic sur votre site pour stimuler les prospects et les conversions.

Un bouton click-to-call est un type spécifique de bouton d’appel à l’action qui permet à vos utilisateurs/utilisatrices de passer un appel téléphonique à votre équipe d’une simple pression.

Grâce aux boutons « tap-to-call », les internautes peuvent instantanément parler à votre équipe en personne et obtenir les informations dont ils ont besoin. Qu’il s’agisse d’une demande de devis, d’informations préalables à la vente ou d’un problème de support, les appels téléphoniques sont rapides.

Le nombre d’utilisateurs/utilisatrices de smartphones ne cessant de croître, l’ajout de boutons d’appel immédiat est d’autant plus pertinent aujourd’hui.

Si vous n’avez pas de téléphone professionnel, vous pouvez envisager d’obtenir un numéro de téléphone professionnel virtuel.

Ceci étant dit, voyons comment ajouter des boutons click-to-call dans WordPress, étape par étape.

La première chose à faire est d’installer et d’activer l’extension WP Call Button. Pour des instructions détaillées, vous pouvez consulter notre guide étape par étape sur l’installation d’un plugin WordPress.

Une fois activé, vous devez vous rendre sur la page Réglages  » WP Call Button pour configurer les paramètres de l’extension et concevoir votre bouton d’appel à cliquer.

Sticky Call Button Settings in WordPress

Dans un premier temps, vous verrez les réglages du bouton d’appel épinglé. Le bouton d’appel épinglé est une fonctionnalité optimisée pour la conversion qui déplace le bouton d’appel avec les utilisateurs/utilisatrices lorsqu’ils naviguent sur votre site.

Vous pouvez commencer par activer l’état du bouton « Appeler maintenant ». Il vous suffit de cliquer sur le commutateur à bascule pour l’activer.

Ensuite, vous devez saisir votre numéro de téléphone. WP Call Button dispose d’un champ numérique intelligent avec le code de votre pays. Il suffit de sélectionner votre pays et de saisir votre numéro de téléphone professionnel.

Si vous n’avez pas de numéro professionnel, vous pouvez en obtenir un auprès de Nextiva. Il s’agit d’un fournisseur de VoIP professionnel de confiance.

Ensuite, vous pouvez modifier le texte de votre bouton d’appel et choisir la position et la couleur du bouton d’appel.

De plus, vous pouvez sélectionner où afficher le bouton d’appel épinglé sur votre site. Par défaut, il affiche le bouton d’appel sur toutes les pages et sur tous les appareils. Vous pouvez afficher ou masquer le bouton sur certaines pages et l’afficher uniquement sur les appareils mobiles.

Une fois que vous avez passé en revue toutes les options, vous pouvez cliquer sur le bouton « Enregistrer les modifications » en bas de page. Ensuite, vous pouvez visiter votre site et voir le bouton d’appel épinglé en action.

WordPress Click to Call Button

Outre les boutons d’appel collants, vous pouvez également ajouter des boutons d’appel statiques sur vos pages WordPress, vos publications et vos colonnes latérales à l’aide de ce plugin.

Si vous utilisez l’éditeur de blocs WordPress, vous pouvez facilement ajouter le bouton « call now » sur vos pages en utilisant le bloc WP Call Button.

Créez une nouvelle page ou modifiez une page existante et ajoutez le bloc WP Call Button à l’aide de votre éditeur/éditrices de page.

Adding WP Call Button Block in WordPress

Ensuite, vous pouvez personnaliser le texte du bouton, la couleur du bouton, la couleur du texte et la taille de la police et afficher ou masquer l’icône du téléphone.

Une fois que vous êtes satisfait de sa conception, vous pouvez publier ou mettre à jour votre page.

Customizing Call Button in WordPress Page Editor

Si vous utilisez l’éditeur WordPress classique, vous devez utiliser le générateur de boutons d’appel statiques pour obtenir un code court.

Allez dans Réglages  » WP Call Button et cliquez sur le menu ‘Static Call Button’ en haut.

Static Call Buttons in WordPress Settings

Il suffit de personnaliser les options du bouton, puis de copier le code court. Après cela, vous pouvez utiliser le code court dans n’importe quelle publication ou page de votre site.

L’extension WP Call Button vous permet également d’ajouter le bouton d’appel sur votre colonne latérale WordPress et d’autres zones prêtes à recevoir des widgets.

Il suffit d’aller dans Apparence  » Widgets et de faire glisser le widget WP Call Button dans une zone prête à accueillir un widget, là où vous souhaitez afficher le bouton d’appel.

WordPress Call Button Sidebar Widget

Vous pouvez maintenant ajouter un titre, une description et personnaliser le bouton d’appel à partir de la section Réglages avancés. Une fois cela fait, enregistrez votre widget.

Voilà, c’est fait ! Si vous voulez voir un tutoriel plus détaillé, alors vous pouvez consulter notre guide étape par étape sur comment ajouter un bouton click-to-call dans WordPress.

Astuce pour ajouter des boutons personnalisés dans WordPress

L’ajout d’un bouton d’appel à l’action ne suffit pas toujours. Vous pouvez également personnaliser la page ou la publication avec une image de héros, des menus et une page personnalisée.

Dans ce cas, nous vous recommandons d’utiliser une extension de constructeur de page WordPress par glisser-déposer comme SeedProd ou Thrive Architect.

SeedProd add button

Ces constructeurs de pages vous aideront à créer des pages d’atterrissage personnalisées avec des boutons d’appel à l’action fantaisistes exactement comme vous le souhaitez.

Quoi que vous fassiez, il est important que vous suiviez l’évolution de vos boutons, car la meilleure stratégie de croissance commerciale n’est pas d’essayer de deviner.

Nous vous recommandons d’utiliser MonsterInsights. Il dispose d’un suivi d’événement intégré pour les liens d’affiliation, les liens sortants et les évènements personnalisés, de sorte que vous pouvez voir à quel point vos boutons sont performants. Pour plus de détails, consultez les métriques marketing importantes que vous devez suivre dans WordPress.

Nous espérons que cet article vous a aidé à apprendre comment ajouter des boutons sur WordPress facilement. Vous pouvez également consulter notre guide terminé sur le suivi des conversions sur WordPress ou notre liste des meilleurs plugins WordPress pour développer votre site.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

Divulgation : Notre contenu est soutenu par les lecteurs. Cela signifie que si vous cliquez sur certains de nos liens, nous pouvons gagner une commission. Consultez comment WPBeginner est financé, pourquoi cela compte et comment vous pouvez nous soutenir. Voici notre processus éditorial.

Avatar

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

L'ultime WordPress Toolkit

Accédez GRATUITEMENT à notre boîte à outils - une collection de produits et de ressources liés à WordPress que tous les professionnels devraient avoir !

Reader Interactions

70 commentairesLaisser une réponse

  1. Syed Balkhi says

    Hey WPBeginner readers,
    Did you know you can win exciting prizes by commenting on WPBeginner?
    Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
    You can get more details about the contest from here.
    Start sharing your thoughts below to stand a chance to win!

  2. Jiří Vaněk says

    Is it possible to track some statistics of the button, only with Google Analytics? Unfortunately, I don’t have monstesight, but I do have Google Analytics on my website.

    • WPBeginner Support says

      It is possible but you would need to set up the event tracking in Google Analytics which is why we recommend using MonsterInsights :)

      Administrateur

      • Jiří Vaněk says

        Thanks for the reply and explanation. I plan to dive a bit more into Google Analytics, as the only things I currently track with them are the number of users, geolocation and backlinks. I know that GA can do an awful lot. However, I have already seen and read several articles on your website, so I believe that thanks to them I will finally understand this tool a little better. Thank you for your great work. She moved me forward in many ways.

  3. sandra says

    How can I add a form (first name / email address) to my call to action button?
    Or is there a way to adjust a contact form (remove textbox) to do the trick?
    I do not code.

    • WPBeginner Support says

      You would want to check with the support for your form plugin, depending on the one you are using there are different possible methods to do what you are wanting.

      Administrateur

  4. Shahzaib says

    I have added a button thanks alot but it appears very small and i can’t figure out how to increase its size in block editor

  5. Daniel Piggott says

    Hi,

    I am currently trying to make a button on WordPress. But there is no option to align in the centre.

    Has the latest wordpress omitted the alignment feature of a button?

  6. Carolyn R Cox says

    What about a button that performs an action on the page. For example executes a query, reloading the page with the query data (without replacing the page, in other words: no urls.) Is there a simple way to accomplish this without loading a different page? Thanks.

    • WPBeginner Support says

      That would be something that heavily depends on your specific use case and would likely require developer assistance.

      Administrateur

  7. Roger Meachem says

    Finally, a clear instruction that works! Thank you. I’ve spent hours trying all manner of things and failing – perhaps they were out-of-date posts but this solved my problem and did so in minutes. It was perfect. I now have buttons that work on the WordPress site.

  8. Meha Jain says

    Hi,
    Any idea how I can add read more button on the theme modules?
    The theme which i am using is not giving me the option to read more button in the modules on the home page.
    How I can add read more button there?

    Regards
    Meha
    (I am a non-technical person.)

    • WPBeginner Support says

      You would want to first reach out to your theme’s support and they may have a recommended method for adding that to your theme.

      Administrateur

    • WPBeginner Support says

      Sadly, for WordPress.com you would need to check with their support for what is currently allowed

      Administrateur

  9. Rick Hoffarth says

    I need to add code to a button in order for the button to take the user to a merchant services portal to make secure payments. So far, the button creators want a URL, not code. How can I connect a button to another site that requires code in order to do it?

  10. Daniel says

    Ok, so I know how to make a download button now, but how do I actually make that download happen ?
    Thank you!

  11. Mark Bologna says

    This was just what I needed. Read the article, downloaded the plugin, and had a working button all within ten minutes. Thanks!

  12. Debbie says

    Super quick – just what I needed! Thank you so much. I had mucked around with some that were so hard to setup… I needed a button and this got the job done quick and easy!

  13. Utkarsh Agarwal says

    How to create links to sections on the same page? For example, I need to create a button after the completion of my post which points to the Comments section down below.

  14. Jen Lewis says

    Can this plugin be installed on a site that’s on a free plan? In general, do you have to be on one of the paid plans to install additional plugins to your WordPress site?

    • Jolynn Powers says

      Mike dose that mean that we can no longer add buttons this way and if so where do we look for other information on how to add buttons?? I need to add three buttons to my work website for a listing of dinning locations, entertainment locations and hotel locations and want to put them on a page rather than a post so that they are always on the site at the same location.

  15. Furquan says

    I am searching for button , I have found your post at top in Google but the plugin you have mentioned is no more on WordPress. Could you please help me

  16. Aachal says

    Hey.. I want a button « Apply » instead of the page « Apply » on the homepage of my website.
    How can that be done. Any lead on this?

  17. bill says

    can i add buttons and then deactivate and delete the url and the buttons are still there ???

    or is there a way to put in the css codes to function so i have them without a plugin ???

  18. Alysha says

    Thanks for this! Looks great, but is there anyway to use this plugin to add a button to the header on the homepage?

  19. Toni says

    This is a really great plugin! It allows for a lot more customization than the standard shortcakes without having to write your own css!

    One question though – why doesn’t it work in the visual text editor of the widgets? This would be so helpful it if also worked in widgets!

    Thanks,
    Toni

  20. mohamed says

    thanks for your article…i install it and worked well except for the url. for example : when i write in the url (www.example.com) and publish my post and go to press the button , i found the button rfere to (www.example.net/www.example.com). how to solve this problem?

  21. Alec says

    Hi! – is it possible to place several buttons side by side in a row? (with different items) – and how does the reference work?

  22. Jenny says

    Hello there!

    This is very useful, but is there any way to use a custom image as a button rather than the options that come with the plugin? I have button images that I’ve downloaded from, and I’d like to use those instead because the logo is familiar to my site visitors.

    Warmly,
    Jenny

  23. Karan Bhagat says

    Hey, I have been using this plugin for more than 2 of my sites and installed it on one more, it was working fine till yesterday, but suddenly now it has stopped working, it is showing any button in the toolbar to add these buttons to post. I deleted and reinstalled it, still facing the issue. Help please

  24. Blake says

    How can i add things to the dropdown menu in the editor? i want things like Font size, buttons, or what ever else i chose to put there without using a plugin, is there anyway to do this?

  25. Nancy says

    Thank you! Again! I was searching all over the internet for help with button shortcodes. Couldn’t get them to work. As always, you have the simple answer. I can stop looking any place else for WordPress help!

  26. bryan midgett says

    How do I get the buttons on one line instead of vertical? I tried putting between buttons, but the tag prints. When I put my buttons side by side, they run together. Help!

  27. Prasad Saxena says

    I want a button to be displayed with each post on the main page of the website, which says go to the website. It should be just beside read more. I did get the button, but i dont know how to configure it so that each post has a different linking url.
    Also the url can be inserted from the post itself. I mean while writing it. Just a box below, a text box where you can put the link to the button.
    Please help….

  28. CEA says

    I installed the plugin and activated it, but am not seeing any change to my editor. I am using WP 4.0. What am I missing? Please help!

  29. Bal Chandra Dhawan says

    I added this button today but URL didn’t work.
    I added to page xyz.com/policies and add URL xyz.com/registration,
    on clicking it says page not found and in address bar I see. xyz.com/policies/xyz.com/registration. Its adding existing page URL ?
    Don’t know why?

  30. Bill Gibson says

    One problem: I guess it is a link underline that is going through the button text (almost like a strikeout). I have tried smallest and largest button sizes and the line is always through the text. I even tried to add « no decoration » to the style manually and that was ignored. Could this be theme specific? Thanks.

  31. Seo service says

    I just installed this plugin and I adore it! I
    already am putting it to good use on my blog. Thanks so much for the heads-up
    on this.

  32. Prishan Latchman says

    Is there a button that will allow me to add a specific amount of money to it so that when it is clicked it will increase the current value by that set amount?

    E.G. The button is set to an amount for R20.00 and the item (a pair of shoes) for R100.00 and every time someone clicks on the button the price for the shoes goes up by R20.00 to R120.00

Laisser une réponse

Merci d'avoir choisi de laisser un commentaire. Veuillez garder à l'esprit que tous les commentaires sont modérés selon notre politique de commentaires, et votre adresse e-mail ne sera PAS publiée. Veuillez NE PAS utiliser de mots-clés dans le champ du nom. Ayons une conversation personnelle et significative.