Salut à tous 👋et bienvenue dans ce nouvel épisode de #DisVoirAlex, l’émission où je réponds à vos questions WordPress.

Alors pour l’épisode n°44,  je vais répondre à la question de Julien, qui me demande : 

Comment insérer un bouton dans un article ou une page ?

Allez c’est parti !

Alors Julien, pour mettre un bouton dans un article ou une page, en fait, tu as plusieurs solutions à l’heure actuelle.

Un plugin

Une solution que je peux te proposer, c’est d’utiliser un plugin qui s’appelle MaxButtons, qui te permet d’intégrer des boutons dans ton contenu assez simplement.

un plugin pour créer des boutons

Tu peux les personnaliser, tu verras, il y a pas mal d’options, et tu peux ensuite renvoyer les gens vers les pages de ton choix grâce à ces boutons.

Le code

Ensuite, la deuxième solution c’est de passer par le code, donc là ce n’est pas forcément à la portée de tout le monde, je ne sais pas quelles sont tes compétences Julien, mais tu peux créer une classe CSS.

Donc pour ceux que ça intéresse et qui ne savent pas ce que c’est que le CSS, c’est un langage qui permet de personnaliser l’apparence des pages web.

Si vous voyez la page où vous vous trouvez actuellement, vous voyez qu’elle a un certain agencement et donc c’est le CSS qui permet de faire tout ça :

  • de mettre des couleurs,
  • de faire des colonnes, à gauche à droite,
  • d’organiser le contenu,
  • tout ça…

c’est le CSS qui s’en charge… Bref et pour fonctionner, le CSS utilise ce que l’on appelle des classes et on peut créer sa propre classe CSS.

Par exemple, une classe qui s’appellerait “bouton” et on pourrait lui dire : pour tous les liens qui ont la classe “bouton”, tu nous mets :

  • une couleur de texte blanche,
  • une couleur d’arrière plan peut-être grise
  • et puis une petite marge pour faire grossir un peu le bouton qui donne une certaine taille à notre bouton
  • et après bien sûr, tu as ton texte dans ton bouton.

Et donc pour faire ça, il y a un petit bout de CSS que tu peux insérer dans le champ CSS personnalisé ou CSS additionnel je ne sais plus, de l’outil de personnalisation de WordPress, donc c’est dans apparence => personnalisation, et donc tu mets ça.

On mettra le code juste en dessous dans la description, et après tu peux avoir un petit bouton si tu ajoutes cette fameuse classe à tes liens que tu veux transformer en boutons donc voilà !

Le constructeur de pages

Une autre solution, c’est de passer par un constructeur de pages, si tu utilises DIVI ou Elementor, ou Beaver Builder ou d’autres, et bien généralement tu as des modules de boutons. Des fois c’est dans la version gratuite, des fois il faut passer par la version pro, mais tu peux créer des modules de boutons, mais bon ça t’oblige à utiliser un constructeur de pages juste pour ajouter un bouton.

constructeurs de pages
Voilà l’artillerie lourde !

Bon, ça fait un peu sortir l’artillerie lourde pour pas grand chose, donc voilà peut-être passe plutôt par le plugin MaxButton.

Le nouvel éditeur de WordPress

Et si vous regardez cette vidéo et que le nouvel éditeur de WordPress est sorti, donc WordPress 5.0 est sorti, eh bien rassurez-vous : vous n’avez pas besoin de faire tout ça, vous avez juste à utiliser un bloc boutons, que vous avez juste à rajouter dans votre contenu, donc le nouvel éditeur Gutenberg permet d’ajouter des boutons.

Ensuite, vous avez juste à choisir une couleur très simplement. Faites attention avec le contraste entre la couleur du texte du bouton et la couleur de fond du bouton, pour que ça puisse ressortir.

Si vous mettez, je ne sais pas, du rose, enfin un bouton avec du texte rose sur un fond rouge, ça ne va pas de très visible, donc attention à ça !

Et voilà, sinon je pense qu’on a fait le tour et puis bien sûr si vous voulez creuser un petit peu le CSS, selon ce dont j’ai parlé dans la vidéo, si ça vous a semblé être du gros charabia, eh bien je vous encourage vivement à jeter un oeil à CSS Express, une formation que la Marmite propose.

Apprenez le CSS une bonne fois pour toutes

Créez des sites au rendu impeccable sans y passer des heures avec CSS Express.

Il y a aussi “Relooker son thème” qui est disponible, c’est un ebook par contre, il n’y a pas de vidéo, mais si vous avez envie d’apprendre et de personnaliser votre site, ça pourra beaucoup vous aider.

Voilà, merci d’avoir suivi cette vidéo, je vous dis à très bientôt pour un prochain #DisVoirAlex et n’oubliez pas de vous abonner à la chaîne YouTube pour être tenu au courant des prochaines vidéos.

Allez sur ce je vous dis à très bientôt, ciao 👋