Les boutons de sites Web ont le potentiel d’offrir un plus grand sentiment d’interaction aux visiteurs. Au lieu d’un lien simple et ordinaire vers des informations importantes, un bouton doit être pressé. Pour beaucoup de gens, c’est presque un instinct de devoir appuyer sur un bouton – même s’il n’est pas étiqueté.

Toute plaisanterie mise à part, j’ai trouvé que les boutons sont très efficaces lorsqu’ils sont utilisés de la bonne façon. Bien que les shortcodes soient une méthode courante pour distribuer ces petits graphiques, il peut être fastidieux de se souvenir des identifiants de code pour quelque chose comme un bouton d’appel à l’action.

Alors, que faire quand on ne veut pas copier et coller des bouts de code juste pour placer un bouton ? La réponse est simple : utilisez un plugin WordPress.

Aujourd’hui, je vais vous montrer comment ajouter un bouton WordPress sans l’utilisation de shortcodes.

Pourquoi est-il important d’ajouter des boutons dans WordPress ?

Les boutons ont le potentiel d’engager le public visiteur. Même si vous ne voulez pas en abuser dans tout le contenu, ils peuvent être très utiles. Par exemple, les boutons d’appel à l’action dans WordPress sont plus évidents à cliquer pour un visiteur qu’un simple lien. C’est pourquoi vous voyez “Commandez maintenant !” et des graphiques similaires sur la plupart des pages de destination.

Parce que la plupart des gens utilisent des tablettes et des smartphones aujourd’hui, il est important de s’assurer qu’ils peuvent taper facilement sur les liens. Après tout, il peut être très pénible de pincer et de zoomer chaque fois que vous voulez cliquer sur quelque chose sur une page. Bien qu’il s’agisse d’un ajout esthétique, il contribue à l’expérience globale de l’utilisateur.

Et c’est ce que vous essayez d’offrir. Vous voulez que les visiteurs se sentent à l’aise et prennent plaisir à naviguer sur le site.

Ajouter des boutons dans WordPress avec un plugin

L’une des méthodes les plus simples pour ajouter un joli graphique à un lien est d’utiliser le plugin Forget About Shortcode Buttons, ou FASC. Cet outil est une méthode facile à utiliser pour créer des images visuellement attrayantes pour promouvoir tout, des téléchargements aux listes de diffusion.

En relation  Logic Pro : désactiver tous les plug-ins d'une piste

La meilleure partie est qu’il vous aide à créer des boutons CSS sans exiger une seule ligne de code de votre part.

Pour utiliser cet outil :

Allez dans la zone des plugins de WordPress et cliquez sur le bouton “Add New” en haut.

Recherchez “Forget About Shortcode Buttons” dans la zone de texte.

Installez et activez le plugin. Une fois l’installation du plugin terminée, une nouvelle fonction sera ajoutée à l’éditeur visuel de WordPress. Cet outil est disponible à la fois dans les articles et les pages, ce qui le rend utile quel que soit le type de contenu que vous créez.

Créez un nouvel article. Dans l’éditeur visuel, trouvez et cliquez sur l’icône de FASC. Elle ressemble à une boîte avec une flèche pointant vers la droite.

Modifiez vos propriétés. FASC vous offre plusieurs façons de personnaliser le bouton. Vous pouvez changer le texte, l’URL, les couleurs, le type et la taille. L’AFSCA propose même une option pour ouvrir le lien dans une nouvelle fenêtre. Faites vos modifications, mais ne cliquez pas encore sur “Insérer”.

Cliquez sur le lien Icône. Il s’agit de petits graphiques qui peuvent être ajoutés au texte du bouton. Vous avez le choix entre de nombreux éléments qui couvrent un large éventail d’objectifs. Ils ne sont pas nécessaires, mais ils ajoutent un attrait visuel supplémentaire en fonction de vos idées de conception. De plus, ils permettent aux gens de s’identifier plus facilement au lien.

À l’aide de la liste déroulante, vous pouvez sélectionner les icônes à ajouter. Vous pouvez également choisir d’afficher le graphique avant ou après le texte.

Cliquez sur le lien Modèles. Dans cette zone, vous pouvez stocker des boutons déjà créés pour une utilisation ultérieure. En cliquant sur la petite icône de disque dans l’image, vous pouvez ajouter le graphique actuel à la liste.

Modifiez le nom du modèle en cliquant sur le crayon, puis sur la petite coche à droite. Cela permettra d’enregistrer l’image pour une utilisation ultérieure sur d’autres pages ou articles.

Une fois que vous avez terminé de créer le graphique, cliquez sur le bouton Insérer pour le placer dans votre contenu.

En relation  Comment afficher une carte vectorielle réactive sur WordPress ?

Vous avez maintenant un nouveau bouton sur lequel quelqu’un peut appuyer ou cliquer.

Dans cet exemple, j’ai créé un bouton d’appel à l’action en moins d’une minute. Bien que celui-ci semble ordinaire, FASC a la capacité d’aider à construire des designs plus attrayants en choisissant le type de graphique que vous créez. Ce plugin de bouton WordPress est livré avec :

  • Plat – le graphique de base que j’ai utilisé dans cet exemple.
  • Plat arrondi – est un design plat avec des coins arrondis.
  • Brillant – ajoute une qualité réfléchissante à l’image, un peu comme un revêtement métallique.
  • Glossy rounded – même chose que ci-dessus avec des coins arrondis.
  • Pop out – ajoute une ombre portée au graphique donnant l’impression qu’il est en train de planer.
  • Pop out rounded – ombre portée avec des coins arrondis.

Comme le FASC utilise un codage hexadécimal, vous avez le choix entre des milliers de couleurs. Vous pouvez pratiquement créer n’importe quelle couleur pour qu’elle corresponde parfaitement au schéma du site web.

Ce qui me frappe le plus, c’est le nombre incroyable d’icônes qui sont disponibles. En fait, il existe également des graphiques permettant de créer des boutons personnalisés pour certains des sites de médias sociaux les plus populaires comme Facebook et Twitter. Cela peut être un excellent complément à vos stratégies d’intégration des médias sociaux sur le site Web.

Si certaines de ces icônes vous semblent familières, c’est parce que ce plugin utilise Dashicons et Font Awesome pour ajouter les images aux boutons CSS. Malheureusement, il n’y a pas de moyen direct et facile d’ajouter d’autres de ces micro-graphismes jusqu’à ce que les développeurs étendent la liste.

Autres plugins à considérer

Si FASC est certainement l’un des plus faciles à utiliser, il existe toutes sortes de façons d’ajouter des boutons à votre site Web. Cependant, une grande partie d’entre elles nécessitent l’utilisation de shortcodes. Ce n’est pas un processus difficile, mais cela signifie que vous devrez vous souvenir d’une chose supplémentaire lorsque vous créerez du contenu.

Voici quelques plugins que j’ai trouvés qui vous permettent de créer des boutons CSS sans investir beaucoup de temps dans l’utilisation de shortcodes.

En relation  Comment ajouter n'importe quel lien dans WordPress

Button Builder – Boutons X

Button Builder est un excellent outil pour créer ces graphiques pour votre contenu. Bien que la version Pro soit dotée d’un large éventail d’options telles que les animations, il s’agit toujours d’un excellent outil. La plus grande différence entre ce plugin et celui que j’ai présenté aujourd’hui est que vous ne pouvez pas créer des boutons à la volée. Ce qui signifie que vous devez en créer un avant de l’ajouter au contenu. Cependant, il est livré avec un nombre incroyable d’options de personnalisation.

Widget de bouton par Loomisoft

Pour ceux qui recherchent un simple bouton à ajouter à une barre latérale, Button Widget a beaucoup de fonctionnalités personnalisables. Il fournit une méthode pour ajouter un lien à la barre latérale pour engager les visiteurs, que vous le créiez pour les médias sociaux ou que vous placiez un appel à l’action pour acheter un produit. Il est doté d’effets de survol, de modifications de la bordure et d’un contrôle total du texte. Cela pourrait être un excellent complément au plugin FASC WordPress button que j’ai présenté ci-dessus.

MaxButtons

Comme celui que j’ai mentionné ci-dessus, c’est un autre plugin qui nécessite de construire le graphique avant de commencer à créer du contenu. Lui aussi dispose d’un nombre incroyable d’options de personnalisation. MaxButtons comprend un contrôle du texte, des gradients, des bordures et même des conteneurs. Ce plugin est également livré avec une variété de modèles sociaux, y compris des compteurs automatiques ainsi que l’importation de votre propre imagerie, et tout cela à partir de la version gratuite.

Les boutons offrent aux visiteurs une interface plus large pour interagir avec le contenu. Étant donné qu’une grande partie de vos visiteurs seront sur des appareils mobiles, cela facilite grandement les interactions. N’oubliez pas qu’il s’agit d’offrir une excellente expérience utilisateur qui déterminera si une personne reviendra ou non sur le site Web.

Quels types de boutons avez-vous sur votre site ? Avez-vous de bonnes stratégies pour promouvoir les appels à l’action dans votre contenu, même s’il s’agit simplement de commenter votre article ?