Accueil » Dis Voir Alex » DVA 44 : Comment insérer un bouton sur une page ou un article ?

Vidéo : DVA 44 : Comment insérer un bouton sur une page ou un article ?



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.

1. Un plugin

Une solution que je peux te proposer, c’est d’utiliser un plugin qui s’appelle MaxButtons, dont je mettrai le lien dans la description, et 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.

2. 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 mettre… 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, même la page de YouTube, je ne sais pas où vous êtes là, peut-être sur la Marmite ou peut-être sur YouTube, vous voyez que la page 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 : tu nous mets pour ce bouton… enfin 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, si je ne me trompe pas, 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à !

3. Le constructeur de pages

Une autre solution, c’est de passer par un constructeur de pages, si tu utilises DIVI ou Elementor, ou je ne sais pas moi… Beaver Builder ou d’autres, et bien généralement tu as des modules de boutons, donc 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.

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.

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 pour être tenu au courant des prochaines vidéos.

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



Si vous avez apprécié cet article, inscrivez-vous à la newsletter

Recevez gratuitement les prochains articles et accédez à des ressources exclusives. Plus de 20 000 personnes l'ont fait, pourquoi pas vous ?

C'est parti, je m'inscris !

felis id, libero et, ultricies venenatis, leo Aenean fringilla sed
Partagez
Tweetez
Partagez