Comment ajouter un bouton dans l'éditeur WordPress [tutoriel]

Comment ajouter un bouton dans l'éditeur WordPress [tutoriel]

Pourquoi le bloc de boutons WordPress est-il si important ?

La navigation sur le site Web est importante pour les visiteurs et les clients. Nous voulons les envoyer à partir d'une sous-page plus loin. Guidez-les tout au long du processus d'achat. C'est pourquoi il est important d'insérer correctement les liens importants dans le contenu de la page.

Fondamentalement, nous avons 2 options. Utilisez un lien ou un bouton standard. Les opinions sur le moment d'utiliser la première et la dernière option sont diverses. Il est courant que sur une page il y ait plusieurs actions possibles. Nous devons nous assurer de savoir lequel est principal et lequel est secondaire. Nous vous recommandons d'utiliser le bouton uniquement pour l'action principale. De cette façon, vous obtenez une plus grande visibilité de cette action principale. Vous attirerez l'attention des visiteurs sur cette action. Nous pouvons également l'appeler bouton d'appel à l'action. Ne créez pas trop de boutons sur une sous-page.

Quelles sont les principales fonctions des boutons ?

  • Les boutons peuvent attirer l'attention des visiteurs - appel à l'action
  • Ils séparent le contenu de la page ou de la publication et le rendent plus lisible
  • Aide à l'orientation sur la page. Beaucoup de visiteurs ne scannent la page que visuellement avec leurs yeux
  • Dirigez les visiteurs vers d'autres pages à l'aide d'hyperliens

De nombreux paramètres déterminent le succès du bouton. L'important est par exemple la taille, l'emplacement ou la couleur des boutons. Il est nécessaire de suivre les principes standard de l'interface utilisateur et de l'expérience utilisateur. La couleur verte est utilisée pour les boutons avec une action positive, par exemple pour acheter quelque chose. La couleur rouge est pour le négatif - par exemple pour se désinscrire de la newsletter. Des boutons correctement conçus influencent directement les actions des visiteurs.

Ajouter un bouton sur n'importe quelle page ou publication dans WordPress

Situation avant WordPress 5

L'ajout de boutons était un processus assez compliqué avant l'invention de l'éditeur de blocs WordPress. Car cette fonctionnalité n'était pas naturellement présente dans WordPress. Vous pouvez utiliser le thème avec Page Builder ou un plugin tiers. Les shortcodes créent des boutons dans ce cas.

Dans nos anciens thèmes WordPress, vous pouvez ajouter un bouton à l'aide de codes abrégés dans l'éditeur visuel. Après avoir cliqué sur Insérer un shortcode -> Bouton, vous pouvez définir divers paramètres dans la fenêtre modale. Texte, couleur du texte, couleur du bouton, URL, alignement, etc. Grâce à ces paramètres avancés, vous pouvez ajouter un bouton assez facilement et rapidement sans aucune programmation.

Ajouter un bouton via des shortcodes
Ajout d'un bouton via des codes abrégés avant la publication de l'éditeur de blocs

Comment utiliser le bloc Button dans l'éditeur WordPress ?

Grâce à WordPress 5, il existe une deuxième voie. Beaucoup plus facile. L'éditeur visuel WordPress apporte de nombreux blocs utiles. Pour créer un bouton sur le site Web, vous pouvez maintenant utiliser le bloc de boutons WordPress dans l'éditeur.

Guide étape par étape pour ajouter un bouton dans l'éditeur WordPress

1. Dans un premier temps, vous devez décider où vous souhaitez insérer le bouton
2. Le bloc de boutons peut être ajouté de différentes manières :
– en cliquant sur « + » dans la barre supérieure ou n'importe où dans l'éditeur de blocs où vous sélectionnez Bloc de boutons

Ajouter un bouton en cliquant sur "+"
Ajout du bloc bouton en cliquant sur « + »
Ajouter un bouton via la barre de recherche
Ajout d'un bloc de boutons via la barre de recherche
Ajouter un bloc de boutons via une barre oblique
Ajout d'un bloc de boutons à l'aide de la barre oblique "/"

- vous pouvez également trouver n'importe quel bloc en utilisant la barre de recherche, écrivez simplement "bouton"

– en tapant « / » qui vous donne accès à tous les blocs disponibles

3. Le bloc de boutons créé peut être configuré davantage

Ajouter le texte du bouton et l'adresse URL

Dès que le bouton WordPress Block est créé, vous pouvez taper du texte à l'intérieur. N'oubliez pas que pour le bouton d'appel à l'action, il est préférable d'utiliser un texte court avec un message clair. Vous pouvez définir le texte en gras, en italique ou souligné. Toutes ces modifications peuvent être effectuées en cliquant sur dans la barre d'outils. Vous pouvez également aligner le bouton sur le côté ou le centrer.

Modification des boutons
En quelques secondes, vous pouvez totalement changer l'apparence de votre bouton

Le bouton pointe généralement vers une autre page ou un site Web externe. Pour cette raison, juste en dessous, il y a une entrée pour ajouter une adresse URL. L'avantage est que l'ajout d'URL ne nécessite pas la sélection de texte.

Changer la couleur des boutons

Le nouvel éditeur vous permet de modifier le bloc de boutons WordPress en quelques secondes. Utilisez simplement les paramètres dans la barre latérale sur le côté droit. Vous pouvez modifier la couleur d'arrière-plan du bouton ou la couleur du texte à l'intérieur du bouton. Il existe des couleurs de base prédéfinies ou vous pouvez choisir les vôtres. Tous les changements sont visibles immédiatement pour voir si la combinaison de couleurs est correcte.

Changer la couleur des boutons
Changement de couleur immédiat du bouton après avoir cliqué sur la couleur choisie

La grande fonctionnalité est que si vous sélectionnez de mauvaises combinaisons, par exemple un fond gris et une couleur de texte blanche, l'éditeur de blocs WordPress vous avertira que ce bouton ne pourra pas être lisible sur votre site Web.

Trouvez votre propre style de bouton

Options de style de bouton
Modifiez le style de votre bouton directement depuis la barre d'outils ou les paramètres de l'inspecteur

Pour créer ou modifier le bouton ultra rapidement et sans aucun effort, vous pouvez utiliser l'un des styles préparés. Le bouton peut être ainsi changé en arrondi, bordé ou rectangulaire par exemple. Expérimentez ce qui correspond le mieux au style ou à la conception de votre site Web.

Bouton d'édition avec CSS personnalisé

Une personnalisation encore plus grande peut être obtenue à l'aide de classes CSS personnalisées. De cette façon, vous pouvez ajouter vos propres styles CSS et bouton de style dans l'éditeur WordPress exactement comme vous le souhaitez.

Entrée de classe personnalisée
Insérez une classe personnalisée pour styliser votre bouton

Comme nous pouvons le voir, il existe un moyen beaucoup plus simple que d'utiliser le shortcode du bouton. Le bloc de boutons WordPress peut être utilisé dans n'importe quel thème compatible avec l'éditeur de blocs WordPress. En savoir plus sur notre tout nouveau thème WordPress Citadela. Il est spécialement conçu et développé pour WordPress Block Editor.

Pourboire supplémentaire à la fin

N'oubliez pas de surveiller votre bloc de boutons WordPress et le succès du bouton lui-même. Si vous utilisez Google Analytics, vous pouvez créer une URL unique. Pour suivre les clics des visiteurs, vous pouvez ajouter Paramètre Google UTM. L'URL peut être créée à l'aide du générateur d'URL. L'ajout de paramètres vous permet d'identifier la source de la visite. C'est très utile si vous souhaitez savoir d'où viennent les visiteurs sur votre page d'achat.

Quel est le plus gros problème que vous rencontrez actuellement avec le bloc de boutons WordPress ? Discutons-en dans les commentaires ci-dessous. Partagez votre expérience avec l'utilisation des boutons sur le site Web.

Réflexions de 4 sur « How to add button in WordPress editor [tutorial] »

  1. Merci d'avoir partagé ce tutoriel. Pouvez-vous également me guider, s'il vous plaît, comment puis-je créer un modèle de bloc ? Je fais la même chose en utilisant cette ressource https://wpitech.com/create-wordpress-gutenberg-block-templates/ mais cela donne une erreur et j'ai quelques lignes de programmation à l'avant. C'est le code
    add_action( 'init', fonction() {
    $args = tableau(
    'public' => vrai,
    'étiquette' => 'Actualités',
    'show_in_rest' => vrai,
    'template_lock' => 'tous',
    'modèle' => tableau(
    tableau( 'noyau/paragraphe', tableau(
    'placeholder' => 'Dernières nouvelles',

  2. Savez-vous s'il existe un moyen de réduire le contenu avec un bouton sans télécharger de plugin ? Fondamentalement, j'utilise wordpress.com premium, pas pour les entreprises, donc le téléchargement de plugins n'est pas vraiment une option facile.

    Merci!

    1. Bonjour,

      Merci d'avoir posé la question. Vous devez demander directement à l'équipe d'assistance de wordpress.com si elle peut proposer une solution pour résoudre votre problème. Cordialement!
      Zlatko
      L'équipe ACI

Les commentaires sont fermés.