Il m’arrive parfois de devoir créer un bouton CSS d’appel à l’action pour un site que ce soit dans un article, ou pour ajouter un bouton cliquable pour un lien d’affiliation. Alors, oui, je pourrais utiliser un plugin comme Elementor, mais dans ce cas, le bouton sera classique. Il reste alors la possibilité de créer ce bouton en CSS. Je vais vous apprendre quelques notions de CSS pour que vous puissiez le faire facilement en cas de besoin.
Dans cet article, nous allons voir comment créer un bouton CSS grâce à quelques lignes de code. Vous allez comprendre comment personnaliser votre bouton pour l’adapter à votre blog ou votre site internet et comprendre ce que signifie les différentes fonctions CSS.
Comment créer un bouton CSS sur WordPress
Avant de créer votre bouton CSS d’appel à l’action, je vais vous indiquer comment ajouter du code CSS qui va se répercuter sur toutes tes pages. Ça se passe dans le menu de WordPress.
Aller sur « apparence ».
Puis « Personnaliser ».
Et enfin « CSS additionnel ».
Pour un thème classique. Pour un thème FSE (full site editing)
Aller sur « apparence ».
Puis « Editeur ».
Cliquez sur la page et cliquez sur le rond noir et blanc en haut à droite.
Enfin, cliquez sur l’onglet « CSS additionnel ».
C’est à cet endroit que vous allez programmer votre code CSS. Côté article, il faut choisir le block « HTML personnalisé » pour insérer le code HTML de votre bouton. Ne vous inquiétez pas, je ne vais pas entrer dans des grandes explications de code CSS, je vais faire simple pour que vous puissiez créer votre bouton et le personnaliser.
Notions de HTML
Nous allons commencer par la partie HTML de votre article. Commençons par un peu de jargon. Une balise est un élément de codage utilisé en HTML. Vous en connaissez déjà plusieurs, <h1></h1> par exemple.
Première chose, si vous voulez mettre du code en explication sur votre article, utilisez les balises <code>ton code</code> pour entourer le code.
Cela permet de signaler que votre code n’est pas du code, mais un texte. Ainsi vous n’aurez pas de problème avec WordPress. C’est important.
<!-- Mon code HTML -->
<h1>Mon titre principal</h1>
Comme vous pouvez le voir cela met le texte en noir avec un fond gris.
Ce n’est pas le but de l’article, mais ça peut te servir.
Vous n’aurez pas à utiliser ces balises dans cette leçon.
Un peu plus sur les balises
Les balises les plus courantes sont toujours composées de deux parties. Une balise ouvrante et une balise fermante. C’est le symbole slash « / » qui ferme une balise. Assez de blabla, passons à notre bouton.
Créer un bouton dans WordPress
Pour créer votre bouton d’appel à l’action, voici le code que vous devez utiliser en utilisant l’option « HTML personnalisé » dans les blocs de WordPress :
<span><a href="mon_lien" target="_blank" relation="nofollow noopener" class="bouton">Le texte pour un appel à l'action de ton bouton</a></span>
Comme vous pouvez le voir ce n’est pas insurmontable. Je vais faire en sorte de vous expliquer chaque portion de ce code afin que vous puissiez bien comprendre comment faire votre bouton et pouvoir le personnaliser par la suite.
Quelques explications pour créer un bouton dans WordPress
La balise <a></a> indique un lien. Un lien est composé de différents éléments que l’on nomme des attributs.
1 réflexion au sujet de « Créer un bouton CSS d’appel à l’action sur WordPress »
très cool, je vais essayer de suite. Merci!!