Comment ajouter des boutons CTA aux articles et pages WordPress sans code

Publié: 2022-03-11

C'est très bien d'avoir des tonnes de texte sur un site pour dire aux gens à quel point vos produits sont incroyables ou quel excellent service vous offrez. Cependant, sans aucun moyen pour eux de profiter facilement de ces produits ou services, vous pourriez aussi bien vous parler à vous-même. Par conséquent, vous devez autoriser les visiteurs à poursuivre le dialogue en leur confiant une action quelconque. C'est là que les boutons WordPress entrent en scène.

Pourquoi avez-vous besoin de boutons d'appel à l'action dans WordPress ?

Les boutons CTA - ou call-to-action - encouragent les utilisateurs à passer à l'action suivante. Ils peuvent être aussi simples qu'un bouton "Acheter maintenant" ou "Ajouter au panier" pour sécuriser immédiatement une vente. Ou ils pourraient conduire le visiteur vers d'autres contenus conçus pour les « canaliser » davantage dans une direction particulière.

Voici d'autres exemples de boutons CTA :

Lire la suite
Lisez maintenant
Télécharger
Abonnez-vous à notre newsletter
Regarder sur YouTube
Écoutez sur Spotify
Marquer cette page
Adhérer maintenant

Le placement des boutons CTA est également crucial. Par exemple, il ne sert à rien de mettre un bouton "Acheter maintenant" au début d'une liste de produits car les gens ne sauront pas ce que vous voulez qu'ils achètent. De plus, la plupart ne seront pas disposés à lire une longue description de produit et devront ensuite faire défiler la page pour l'acheter - ils veulent que le bouton soit exactement là où ils s'y attendent.

Par conséquent, placez les boutons au point logique de la publication ou de la page où les utilisateurs sont le plus susceptibles d'en avoir besoin. Par exemple, les boutons du menu principal d'un site Web (qui sont également des CTA) se trouvent généralement en haut de la page, là où les internautes s'attendent à les trouver.

De plus, la conception des boutons CTA joue également un rôle important dans la volonté des utilisateurs d'appuyer dessus. Ils doivent être suffisamment évidents pour attirer l'attention, mais pas au point d'effrayer les gens. N'oubliez pas que les gens aiment penser qu'ils peuvent décider par eux-mêmes et n'apprécient pas toujours qu'on leur « dise » quoi faire. Par conséquent, vos boutons CTA doivent refléter cela.

Avoir des boutons CTA sur votre site peut aider à améliorer les conversions. Ils peuvent avoir un impact énorme lorsqu'ils sont bien conçus et correctement placés.

Comment créer des boutons dans WordPress

Les puristes de WordPress peuvent vous dire que vous devez jouer avec du code ou du CSS pour créer des boutons sur votre site. En effet, si vous voulez qu'ils soient totalement sur mesure, il y a une part de vérité là-dedans.

Cependant, si vous êtes comme moi et que vous ne possédez aucune compétence en matière de codage, vous serez heureux de savoir qu'il existe plusieurs méthodes alternatives pour ajouter des CTA et d'autres types de boutons à WordPress. Je vais maintenant vous en montrer trois, dont aucun ne nécessite de connaissances ou d'expérience en CSS ou en code.

Option 1 – Utiliser Gutenberg

Gutenberg est l'éditeur de blocs que WordPress a introduit dans la version 5 de la plateforme fin 2018 pour remplacer l'éditeur classique. Comme pour tout ce qui est entièrement nouveau, Gutenberg a reçu des critiques mitigées, les critiques négatives provenant principalement de personnes habituées à l'éditeur classique. Cependant, il est là pour rester, et une fois que vous vous y êtes familiarisé, revenir à l'éditeur classique semble archaïque.

L'article continue ci-dessous

Gutenberg comprend plusieurs "blocs" pratiques que vous ajoutez au contenu pour faire diverses choses. Naturellement, les boutons sont inclus, et en ajouter un est un jeu d'enfant :

Étape 1

Tout d'abord, vous devez insérer un nouveau bloc dans votre message ou votre page à l'endroit où vous souhaitez que le bouton apparaisse.

Pour ce faire, appuyez simplement sur Entrée (vous pouvez réorganiser les blocs plus tard si nécessaire, en utilisant les flèches haut/bas qui apparaissent dans la mini barre d'outils, qui survole les blocs) :

Insertion d'un bouton dans une page ou un article à l'aide de Gutenberg - insertion d'un nouveau bloc

Insertion d'un bouton dans une page ou un article à l'aide de Gutenberg - le nouveau bloc est mis en surbrillance

Étape 2

Entrez une barre oblique (/) dans le champ "Tapez / pour choisir un bloc" - une liste des blocs couramment utilisés apparaîtra. Dans mon cas, l'option de blocage des boutons est apparue en haut, mais vous pouvez taper /boutons pour ne voir que les options de bouton disponibles :

Insertion d'un bouton dans une page ou un article à l'aide de Gutenberg - localisation du bloc de boutons

Étape 3

Choisissez "Boutons". Un nouveau champ de bouton s'insérera automatiquement. Appuyez sur la petite icône d'engrenage en haut à droite de l'écran pour appeler l'éditeur de blocs afin de configurer le bouton :

Insertion d'un bouton dans une page ou une publication à l'aide de Gutenberg - le nouveau bouton inséré dans la publication et comment appeler l'éditeur de boutons

Étape 4

Double-cliquez sur le bouton pour entrer le texte que vous souhaitez qu'il contienne :

Insertion d'un bouton dans une page ou une publication à l'aide de Gutenberg - saisie du texte qui apparaîtra sur le bouton

Ensuite, utilisez les options de l'éditeur de blocs à droite de l'écran pour modifier les couleurs, les contours, la taille, la forme, etc. des boutons :

Insertion d'un bouton dans une page ou une publication à l'aide de Gutenberg - comment l'utilisation de l'éditeur de boutons affecte l'apparence et le comportement du bouton

Étape 5

Pour positionner le bouton, utilisez les options de la barre d'outils flottante :

Insertion d'un bouton dans une page ou un article à l'aide de Gutenberg - repositionnement du bouton

Insertion d'un bouton dans une page ou un article à l'aide de Gutenberg - le bouton repositionné

Étape 6

Vous devez maintenant ajouter le lien hypertexte vers lequel pointe le bouton. Le lien peut être vers une adresse Web externe ou interne menant à une autre page ou publication sur votre site Web.

Cliquez sur le bouton de lien dans la barre d'outils flottante, entrez l'URL dans le champ URL et appuyez sur la flèche incurvée à côté pour l'entrer.

L'article continue ci-dessous

Insertion d'un bouton dans une page ou un article à l'aide de Gutenberg - ajout du lien hypertexte au bouton

Étape 7

Vous avez maintenant créé votre bouton ! Vous pouvez voir à quoi il ressemblera une fois publié en utilisant l'option de prévisualisation. Tous les ajustements nécessaires à la taille, la position, la couleur, etc. peuvent être effectués en répétant les étapes 4 et 5 :

Insertion d'un bouton dans une page ou une publication à l'aide de Gutenberg - prévisualisation du bouton terminé

Option 2 - Utiliser Elementor

Elementor est un plugin d'éditeur visuel populaire qui facilite la création de pages et de publications, grâce au glisser-déposer. La création de boutons dans Elementor ressemble à Gutenberg, bien qu'elle offre plus de possibilités de style et de personnalisation, en particulier si vous avez Elementor Pro.

Voici un très bref aperçu de la façon d'ajouter un simple bouton à un article ou à une page à l'aide d'Elementor :