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.

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