{"id":367113,"date":"2023-02-05T20:20:00","date_gmt":"2023-02-05T17:20:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=367113"},"modified":"2023-02-05T20:30:50","modified_gmt":"2023-02-05T17:30:50","slug":"5-facons-simples-de-creer-des-boutons-wordpress","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/fr\/5-facons-simples-de-creer-des-boutons-wordpress\/","title":{"rendered":"5 fa\u00e7ons simples de cr\u00e9er des boutons WordPress"},"content":{"rendered":"\n

L’ajout de boutons dans WordPress n’a pas toujours \u00e9t\u00e9 aussi simple qu’on pourrait s’y attendre d’une plate-forme qui est par ailleurs si conviviale. De nombreux utilisateurs de WordPress se retrouvent perplexes lorsqu’ils sont confront\u00e9s au besoin de boutons sur leur site Web WordPress. Mais il n’y a vraiment rien \u00e0 craindre, l’ ajout d’un bouton ne n\u00e9cessite aucune comp\u00e9tence ou connaissance particuli\u00e8re<\/strong>, et nous partagerons quatre fa\u00e7ons diff\u00e9rentes et simples d’ajouter des boutons \u00e0 n’importe quelle page de votre site Web<\/strong>.<\/p>\n

Dans cet article, vous apprendrez ce qui suit\u00a0:<\/p>\n

Pourquoi les boutons sont utiles<\/h2>\n

Chaque bouton est un appel sp\u00e9cifique \u00e0 l’action. En suivant cette logique, vous pouvez utiliser un bouton chaque fois que vous souhaitez orienter le comportement de vos utilisateurs vers un objectif sp\u00e9cifique<\/strong>: lire une partie sp\u00e9ciale d’un article, les amener \u00e0 remplir un formulaire, les envoyer vers un site Web externe, une page de destination ou une autre page de votre site, ou toute autre URL, etc. Les boutons crient pour cliquer, surtout lorsqu’ils sont styl\u00e9s et intelligemment distribu\u00e9s. En plus de penser \u00e0 leur fonction, vous devez \u00e9galement examiner attentivement la conception de vos boutons WordPress<\/a>. Ils peuvent am\u00e9liorer et enrichir consid\u00e9rablement l’exp\u00e9rience utilisateur tout en vous aidant \u00e0 atteindre votre objectif.<\/p>\n

Comment ajouter un bouton dans Elementor<\/h2>\n

Si pour une raison quelconque vous pr\u00e9f\u00e9rez travailler avec Elementor<\/a>, vous n’avez pas \u00e0 changer vos habitudes, vous pouvez \u00e9galement facilement ajouter un bouton avec Elementor. Cette m\u00e9thode sera probablement le premier choix de tout d\u00e9butant. Voyons comment c’est fait.<\/p>\n

Apr\u00e8s avoir ouvert votre message dans Elementor, cliquez sur l’ic\u00f4ne plus pour ajouter un nouvel \u00e9l\u00e9ment<\/strong>.<\/p>\n

Entrez ensuite "bouton" dans le champ<\/strong> de recherche du menu de gauche, puis cliquez sur l’option bouton lorsqu’elle appara\u00eet dans le r\u00e9sultat de la recherche.<\/p>\n

\"5<\/a><\/p>\n

Vous remarquerez plusieurs options de personnalisation des boutons\u00a0:<\/p>\n

Type<\/strong> – cette option vous permet de s\u00e9lectionner le type de bouton que vous souhaitez cr\u00e9er et de d\u00e9finir la couleur du bouton en cons\u00e9quence. S’il s’agit d’un bouton d’information, il sera bleu. S’il s’agit d’un bouton d’avertissement, il sera orange et ainsi de suite.<\/p>\n

Texte<\/strong> – c’est ici que vous entrez le texte que vous souhaitez afficher sur le bouton.<\/p>\n

Lien<\/strong> – c’est l\u00e0 que vous ins\u00e9rez l’URL que vous souhaitez ouvrir en cliquant sur le bouton.<\/p>\n

Taille<\/strong> \u2013 vous pouvez choisir entre des tailles petites, moyennes, grandes et tr\u00e8s petites\/grandes pour votre bouton.<\/p>\n

Ic\u00f4ne<\/strong> – si vous souhaitez ajouter une ic\u00f4ne pour rendre le bouton plus attrayant, cliquez ici et vous pourrez choisir parmi une vari\u00e9t\u00e9 d’ic\u00f4nes pr\u00e9d\u00e9finies.<\/p>\n

Position de l’ic\u00f4ne<\/strong> – voyez si l’ic\u00f4ne est plus belle avant ou apr\u00e8s le texte sur le bouton.<\/p>\n

Espacement des ic\u00f4nes<\/strong> – vous pouvez \u00e9galement d\u00e9finir la distance entre l’ic\u00f4ne et le texte sur le bouton.<\/p>\n

\"5<\/a><\/p>\n

Vous pouvez modifier votre bouton en utilisant les options de l’onglet Style.<\/p>\n

\"5<\/a><\/p>\n

Comment ajouter un bouton avec Qi Addons pour Elementor<\/h2>\n

\"5<\/a><\/p>\n

Qi Addons for Elementor<\/a> est un plug-in incroyablement polyvalent et facile \u00e0 utiliser qui comprend 60 widgets gratuits et plus de 40 widgets premium et inclut \u00e9galement le widget de bouton<\/strong>. C’est une solution tr\u00e8s \u00e9l\u00e9gante pour ajouter des boutons \u00e0 votre site Web et vous pouvez choisir si vous souhaitez ajouter le widget de bouton, le widget de<\/a> bouton d’information ou<\/a> le bouton premium<\/a> incroyable \u00e0 votre page d\u00e8s le d\u00e9but.<\/p>\n

Bouton Widget<\/h3>\n

Apr\u00e8s avoir choisi le bouton que vous souhaitez cr\u00e9er, vous pouvez commencer \u00e0 personnaliser selon vos besoins. Vous disposez de deux param\u00e8tres de base pour la personnalisation du contenu et du style et il existe \u00e9galement des options avanc\u00e9es qui vous permettent d’affiner encore plus les d\u00e9tails. N\u00e9anmoins, dans la plupart des cas, vous trouverez les deux premiers r\u00e9glages tout \u00e0 fait suffisants pour cr\u00e9er un beau bouton efficace. Commen\u00e7ons d’abord par les param\u00e8tres de contenu.<\/p>\n

\"5<\/a><\/p>\n

Les param\u00e8tres de contenu incluent des param\u00e8tres qui vous permettent de d\u00e9finir l’objectif du bouton<\/strong> – c’est ici que vous saisissez le texte qui s’affichera sur le bouton, choisissez le type de disposition du bouton, d\u00e9finissez le lien pour l’URL<\/strong> que vous souhaitez que le bouton m\u00e8ne et indiquez si vous souhaitez que la nouvelle URL s’ouvre dans la m\u00eame fen\u00eatre ou dans une nouvelle fen\u00eatre. Vous avez \u00e9galement la possibilit\u00e9 de choisir la taille et le type<\/strong> de bouton ici.<\/p>\n

\"5<\/a><\/p>\n

La prochaine option int\u00e9ressante est l’ option Ic\u00f4ne<\/strong> qui vous permet d’ ajouter une ic\u00f4ne \u00e0 votre bouton<\/strong>, soit \u00e0 partir de la biblioth\u00e8que d’ic\u00f4nes, soit en la t\u00e9l\u00e9chargeant depuis votre ordinateur.<\/p>\n

\"5<\/a><\/p>\n

La biblioth\u00e8que d’ic\u00f4nes<\/strong> propose un riche choix d’ic\u00f4nes.<\/p>\n

\"5<\/a><\/p>\n

N\u00e9anmoins, si vous avez d\u00e9j\u00e0 pr\u00e9par\u00e9 une ic\u00f4ne, vous pouvez simplement la t\u00e9l\u00e9charger depuis votre ordinateur, puis continuer \u00e0 d\u00e9finir sa position et sa bordure<\/strong>.<\/p>\n

\"5<\/a><\/p>\n

Vous avez plus d’options pour affiner l’apparence de votre bouton et de l’ic\u00f4ne \u00e0 votre disposition. Vous pouvez ajuster tous les d\u00e9tails comme la couleur du texte, la largeur de la bordure, le rayon et la couleur, la couleur d’arri\u00e8re-plan et le rembourrage<\/strong>.<\/p>\n

\"5<\/a><\/p>\n

Voici \u00e0 quoi ressemble le r\u00e9sultat dans notre cas :<\/p>\n

\"5<\/a><\/p>\n

Widget d’informations sur les boutons<\/h3>\n

Comme nous l’avons mentionn\u00e9 pr\u00e9c\u00e9demment, QI Addons vous permet de choisir entre l’ajout de boutons et de boutons d’informations. Si vous optez pour le bouton info, la d\u00e9marche pour le param\u00e9trer est sensiblement la m\u00eame mais avec une diff\u00e9rence non n\u00e9gligeable<\/strong>. Les param\u00e8tres de contenu du bouton d’information incluent une option permettant de d\u00e9finir le sous-texte du bouton. Il s’agit du texte qui s’affichera sous le texte principal du bouton et vous pouvez l’utiliser pour d\u00e9crire plus pr\u00e9cis\u00e9ment l’objectif du bouton<\/strong>.<\/p>\n

\"5<\/a><\/p>\n

Vous pouvez \u00e9galement personnaliser la police et la couleur du sous-texte. Ci-dessous, vous pouvez voir \u00e0 quoi ressemble le r\u00e9sultat sur notre page\u00a0:<\/p>\n

\"5<\/a><\/p>\n

Comment ajouter un bouton avec un plugin<\/h2>\n

MaxButton<\/a> est l’un des plugins les plus populaires utilis\u00e9s pour ajouter des boutons dans WordPress. Il est convivial et vous permet d’ajouter un bouton de mani\u00e8re simple<\/strong>, mais pas aussi rapidement que vous pouvez l’imaginer. Vous commencez comme avec n’importe quel autre plugin, en l’installant et en l’activant.<\/p>\n

\"5<\/a><\/p>\n

Apr\u00e8s avoir install\u00e9 et activ\u00e9 le plugin, dans le menu du tableau de bord WordPress sur la gauche, vous verrez l’ option nouvellement ajout\u00e9e pour MaxButtons<\/strong>. Cliquez sur Ajouter nouveau pour acc\u00e9der \u00e0 la page des param\u00e8tres o\u00f9 vous pouvez cr\u00e9er un nouveau bouton<\/strong>.<\/p>\n

\"5<\/a><\/p>\n

Vous trouverez une vari\u00e9t\u00e9 de param\u00e8tres et d’options disponibles pour styliser votre bouton sur cette page. Assurez-vous d’ entrer le nom et le texte du bouton et bien s\u00fbr l’URL de la page<\/strong> que vous souhaitez ouvrir lorsque vous cliquez sur le bouton. Apr\u00e8s avoir d\u00e9cid\u00e9 de ces param\u00e8tres de base, vous pouvez continuer \u00e0 affiner l’apparence de votre bouton.<\/p>\n

\"5<\/a><\/p>\n

Faites d\u00e9filer vers le bas pour voir toutes les options que vous pouvez r\u00e9gler. Vous verrez les param\u00e8tres de r\u00e9glage de la bordure du bouton<\/strong>.<\/p>\n

\"5<\/a><\/p>\n

Notez que vous pouvez toujours jeter un \u0153il \u00e0 l’aper\u00e7u du bouton<\/strong> dans la fen\u00eatre contextuelle dans le coin sup\u00e9rieur droit de la page des param\u00e8tres. Au fur et \u00e0 mesure que vous faites d\u00e9filer vers le bas, plus d’options appara\u00eetront, vous pouvez facilement d\u00e9finir la couleur d’arri\u00e8re-plan de votre bouton ainsi que l’ombre du texte<\/strong> si vous le souhaitez.<\/p>\n

\"5<\/a><\/p>\n

Ne vous inqui\u00e9tez pas si vous manquez de faire quelques ajustements ici, vous pourrez \u00e0 nouveau modifier tous les d\u00e9tails pendant que vous ins\u00e9rez le bouton sur la publication\/page d\u00e9di\u00e9e<\/strong>. Ainsi, lorsque vous \u00eates satisfait de l’apparence de votre bouton, n’oubliez pas de cliquer sur Enregistrer.<\/p>\n

\"5<\/a><\/p>\n

Vient maintenant la partie o\u00f9 vous ins\u00e9rez le bouton dans l’article<\/strong>. Acc\u00e9dez \u00e0 la nouvelle publication ou modifiez la page de publication \u00e0 partir du menu de votre tableau de bord WP. Vous remarquerez la nouvelle option pour ajouter des boutons. Cliquez dessus et choisissez le bouton que vous avez cr\u00e9\u00e9 pr\u00e9c\u00e9demment<\/strong>.<\/p>\n

\"5<\/a><\/p>\n

Si vous avez cr\u00e9\u00e9 plus d’une version de bouton, vous les verrez toutes ici. Choisissez celui que vous souhaitez ins\u00e9rer dans l’article sp\u00e9cifi\u00e9.<\/p>\n

\"5<\/a><\/p>\n

Et voici \u00e0 quoi ressemble le r\u00e9sultat dans notre cas.<\/p>\n

\"5<\/a><\/p>\n

Il existe de nombreuses autres options de personnalisation des boutons disponibles avec ce plugin. Nous voulions couvrir les \u00e9tapes de base, puis lorsque vous vous sentirez suffisamment en confiance, vous pourrez continuer \u00e0 explorer toutes les possibilit\u00e9s offertes par cet outil. Une chose est s\u00fbre, il est facile \u00e0 utiliser et vous le ma\u00eetriserez rapidement.<\/p>\n

Une autre fa\u00e7on d’ ajouter des boutons dans Elementor consiste \u00e0 copier le shortcode dans le widget shortcode<\/strong>, mais ce n’est s\u00fbrement pas la meilleure solution pour les utilisateurs d’Elementor.<\/p>\n

\"5<\/a><\/p>\n

Comment ajouter un bouton dans l’\u00e9diteur Gutenberg<\/h2>\n

Ajouter un bouton avec l’\u00e9diteur Gutenberg est incroyablement facile. Bien qu’il n’offre pas autant d’options que le plugin, si vous voulez une solution simple et \u00e9l\u00e9gante, c’est un bon choix.<\/p>\n

Ainsi, la premi\u00e8re chose \u00e0 faire est de cliquer sur l’ic\u00f4ne plus pour ajouter un bloc<\/strong>. Cherchez ensuite le bloc Button.<\/p>\n

\"5<\/a><\/p>\n

Lorsque vous cliquez sur l’ic\u00f4ne du bouton, un bouton avec un menu au-dessus appara\u00eet<\/strong>. Entrez simplement le texte que vous souhaitez voir appara\u00eetre sur le bouton dans le champ du bouton et ci-dessus vous pouvez d\u00e9finir le lien, choisir l’un des trois alignements<\/strong> qui sont disponibles pour d\u00e9terminer le positionnement du bouton, d\u00e9finir le style, la couleur, la police du bouton et quelques d\u00e9tails suppl\u00e9mentaires.<\/p>\n

\"5<\/a><\/p>\n

Ci-dessous, vous pouvez voir le bouton que nous avons cr\u00e9\u00e9 de cette fa\u00e7on.<\/p>\n

\"5<\/a><\/p>\n

N’h\u00e9sitez pas \u00e0 explorer toutes les options disponibles et profitez de la simplicit\u00e9 de la proc\u00e9dure.<\/p>\n

Le plugin Max peut \u00e9galement \u00eatre utilis\u00e9 pour ajouter des boutons dans Gutenberg. Il est livr\u00e9 avec le bloc de boutons<\/strong> inclus et la proc\u00e9dure est \u00e9galement tr\u00e8s simple. Cliquez simplement sur l’option de bloc MaxButtons et le bouton d\u00e9pos\u00e9 s’affichera pour que vous puissiez commencer \u00e0 le personnaliser.<\/p>\n

\"5<\/a><\/p>\n

Comment ajouter un bouton dans l’\u00e9diteur Gutenberg avec le plugin Ultimate Blocks<\/h2>\n

Si le bouton par d\u00e9faut de Gutenberg ne r\u00e9pond pas \u00e0 vos besoins, vous pouvez alors envisager le plugin Ultimate Blocks<\/a>.<\/p>\n

Le plugin est livr\u00e9 avec un bloc de boutons am\u00e9lior\u00e9s qui propose de tr\u00e8s bonnes options de personnalisation<\/strong>.<\/p>\n

Il vous permet de choisir la taille du bouton parmi 4 options diff\u00e9rentes<\/strong>: Small, Medium, Large et Extra Large.<\/p>\n

De plus, vous pouvez \u00e9galement choisir de rendre les boutons arrondis ou carr\u00e9s<\/strong>. Enfin, vous pouvez \u00e9galement ajouter une ic\u00f4ne \u00e0 votre bouton<\/strong> pour le rendre plus captivant.<\/p>\n

Pour utiliser le bloc Button am\u00e9lior\u00e9 dans Gutenberg, il vous suffit d’installer le plugin Ultimate Blocks et de cliquer sur l’ic\u00f4ne (+) et de rechercher "Button".<\/p>\n

\"5<\/a><\/p>\n

Une fois le bloc ajout\u00e9, vous pouvez ensuite le personnaliser selon vos besoins en modifiant ses couleurs, sa taille, son ic\u00f4ne et son style.<\/p>\n

\"5<\/a><\/p>\n

En conclusion<\/h2>\n

Comme vous pouvez le voir, ajouter un bouton dans WordPress n’est pas sorcier. Les quatre m\u00e9thodes que nous avons d\u00e9crites ici sont faciles et confortables pour les d\u00e9butants. Le choix d\u00e9pend du degr\u00e9 de personnalisation dont vous avez besoin et du temps et des efforts que vous souhaitez investir dans la cr\u00e9ation d’un bouton. Si vous avez besoin de plus de conseils sur ce sujet, faites-le nous savoir dans la section des commentaires !<\/p>\n

Source d’enregistrement: wpklik.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"

Choisissez l’une des quatre fa\u00e7ons simples de cr\u00e9er des boutons WordPress efficaces sur votre site Web.<\/p>\n","protected":false},"author":1,"featured_media":364273,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[568],"tags":[844],"class_list":["post-367113","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-les-bases-de-wordpress","tag-affiai-fr"],"_links":{"self":[{"href":"https:\/\/themewp.inform.click\/fr\/wp-json\/wp\/v2\/posts\/367113","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/themewp.inform.click\/fr\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/themewp.inform.click\/fr\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/fr\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/fr\/wp-json\/wp\/v2\/comments?post=367113"}],"version-history":[{"count":0,"href":"https:\/\/themewp.inform.click\/fr\/wp-json\/wp\/v2\/posts\/367113\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/fr\/wp-json\/wp\/v2\/media\/364273"}],"wp:attachment":[{"href":"https:\/\/themewp.inform.click\/fr\/wp-json\/wp\/v2\/media?parent=367113"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/themewp.inform.click\/fr\/wp-json\/wp\/v2\/categories?post=367113"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/themewp.inform.click\/fr\/wp-json\/wp\/v2\/tags?post=367113"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}