Publi√© par le 21 septembre 2018 ‚ÄĘ 0 Commentaires

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 ūüĎč