Comment ajouter et styliser un bouton dans WordPress (4 méthodes faciles)

Voulez-vous apprendre à créer et styliser des boutons pour votre site WordPress ?

Les boutons sont puissants et peuvent être utilisés pour inciter les utilisateurs à s'inscrire à votre liste d'e-mails, à vous suivre sur les réseaux sociaux et à acheter votre produit.

Pour créer des boutons personnalisés, vous pouvez utiliser un extrait de code ou simplement télécharger un plugin qui fait tout pour vous.

Dans ce tutoriel, nous vous montrerons comment ajouter et styliser un bouton sur votre page Web et même ajouter des effets d'animation. Commençons.

Voici une table des matières que vous pouvez utiliser pour accéder à la méthode qui vous intéresse le plus :

• Ajouter un bouton dans l'éditeur de blocs
• Ajouter un bouton avec SeedProd
• Ajouter un bouton avec Thrive Themes
• Ajouter un bouton avec du code

Avant de commencer, vous voudrez peut-être consulter cette feuille de triche détaillée sur la façon de créer un bouton parfait pour votre site Web.

L'ajout de boutons à vos articles et pages encourage vos utilisateurs à faire ce que vous voulez qu'ils fassent. Sans bouton ou CTA, votre site Web manque d'une stratégie optimisée et laisse vos taux de conversion au hasard.

Comme le dit l'expert en marketing Neil Patel, un bouton ou un CTA est le « pont entre le marketing et la vente ». Vous pouvez utiliser des boutons dans WordPress pour donner votre CTA final à vos utilisateurs comme Acheter maintenant, Nous contacter, Télécharger, ou autres.

Cependant, il est important que vous sachiez comment utiliser ces boutons pour maximiser vos conversions. Plusieurs facteurs rendent certains boutons meilleurs que d'autres.

Ceux-ci incluent :

• Connaître votre objectif de conversion
• Garder le texte de votre bouton court et accrocheur
• Utiliser des verbes d'action
• Fournir une incitation

Maintenant, regardons comment créer des boutons WordPress puissants pour votre site Web sans aucun codage.

Ajouter un bouton dans WordPress avec l'éditeur de blocs

Par défaut, l'éditeur de blocs WordPress vous permet d'ajouter un simple bouton à votre site. C'est gratuit et tout le monde peut l'utiliser.

Tout d'abord, créez ou modifiez n'importe quelle page ou publication dans WordPress. Ensuite, vous pouvez utiliser le bouton ‘+’ pour ajouter un nouveau bloc. Recherchez « bouton » et ajoutez le widget à votre page.

Vous devriez maintenant voir un bouton ajouté à votre publication. Personnalisons-le. Cliquez sur le bouton pour ouvrir les paramètres des boutons.

Vous verrez un menu apparaître juste au-dessus du bouton. Vous pouvez explorer ces paramètres pour modifier l'alignement, ajouter un lien, modifier le texte et la police, et plus encore.

Dans le panneau de droite, vous pouvez modifier la largeur, ajouter un lien et une ancre HTML. Si vous passez à l'onglet Styles, vous obtiendrez plus d'options pour personnaliser le bouton.

Vous pouvez changer le bouton d'un fond uni à un contour. Il existe des options pour modifier la taille, le remplissage et la bordure.

Cette méthode est facile mais limitée en options de personnalisation. Si vous souhaitez styliser le bouton et ajouter des effets d'animation, vous devrez utiliser un constructeur de pages WordPress. Ensuite, nous vous montrerons comment utiliser 2 constructeurs très populaires – SeedProd et Thrive.

Ajouter un bouton dans WordPress avec SeedProd

Il existe de nombreux plugins de constructeur de pages qui vous permettent de personnaliser votre page et d'ajouter des boutons facilement. Notre choix n°1 est SeedProd.

SeedProd est un constructeur de sites Web et de pages de destination pour WordPress. Il est livré avec des thèmes préconçus qui ont déjà des boutons stratégiquement placés pour vous. Il vous suffit de choisir un thème et de le modifier pour qu'il corresponde à vos besoins.

Avec SeedProd, vous pouvez ajouter toutes sortes d'éléments puissants tels que :

• Profils sociaux
• Boutons de partage sur les réseaux sociaux (J'aime, Tweeter, Suivre)
• Tableau des prix et bouton de paiement
• Compte à rebours
• Menu de navigation
• Avis et témoignages
• Galerie d'images
• Google Maps

…et bien plus encore.

Il existe un constructeur par glisser-déposer avec une interface visuelle. Cela signifie que vous modifierez le front-end de votre site Web. Cliquez simplement et modifiez tout ce dont vous avez besoin, et faites glisser et déposez de nouveaux éléments là où vous le souhaitez.

Il n'y a jamais besoin de codage. Regardez comment nous avons modifié le texte dans notre exemple de conception ici :

En ce qui concerne les options de personnalisation avancées pour les boutons, SeedProd inclut :

• Styles de boutons préconçus
• Taille, forme et couleur personnalisables
• Polices et typographie personnalisées
• Icônes sur le bouton
• Effets d'animation
• Fonctionnalité de duplication pour reporter le style du bouton sur d'autres blocs
• Enregistrer la mise en page comme modèle personnalisé
• Afficher/masquer sur les appareils
• Aperçu sur mobile et tablette
• Éléments optimisés pour le référencement tels que les balises no-follow et ouvrir dans un nouvel onglet

Avec SeedProd, vous aurez tout ce dont vous avez besoin pour concevoir un bouton magnifique afin d'inciter les utilisateurs à cliquer et à agir sur votre site.

La première chose que vous devrez faire est de télécharger et installer SeedProd sur votre site.

Une fois que vous avez activé le plugin, rendez-vous dans le tableau de bord d'administration de WordPress et ouvrez SeedProd. Si vous créez un nouveau site Web, vous pouvez sélectionner un kit de thème prêt à l'emploi et le personnaliser. Cela créera toutes les pages et publications dont votre site pourrait avoir besoin.

Pour ce tutoriel, nous allons vous montrer comment ajouter un bouton à une page de destination. Accédez à l'onglet SeedProd » Pages de destination. Ici, vous pouvez ajouter une nouvelle page de destination.

Choisissez un modèle et ajoutez un nom pour votre page, puis le constructeur s'ouvrira. Vous verrez un aperçu en direct de votre conception avec un panneau d'édition sur la gauche.

À partir des blocs standard disponibles, faites simplement glisser et déposez le bloc de bouton dans votre conception. Lorsque vous le faites, d'autres options pour modifier le bouton s'ouvriront sur la gauche. Vous pouvez simplement cliquer sur le texte du bouton et ajouter votre propre appel à l'action. Voyez comment nous avons facilement ajouté et modifié un bouton sur notre page :

Lorsque vous sélectionnez le bouton, dans le panneau de gauche sous l'onglet Contenu, vous pouvez modifier le texte, la taille, l'alignement, ajouter un lien, et plus encore. Ce sont également les options par défaut disponibles dans l'éditeur de blocs WordPress.

Lorsque vous ajoutez un lien, vous obtiendrez des options pour ajouter des éléments SEO tels que « no follow » et « ouvrir dans une nouvelle fenêtre ».

Maintenant, il y a plus. Vous n'avez pas à styliser le bouton vous-même. Si vous passez à l'onglet Modèles, vous verrez des conceptions de boutons prêtes à l'emploi parmi lesquelles choisir. Vous pouvez choisir une conception de bouton plate ou pilule.

Il existe également des tonnes de couleurs parmi lesquelles choisir. Si vous souhaitez plus de contrôle sur le style de votre bouton, accédez à l'onglet Avancé. Ici, vous pouvez ajuster le remplissage, le rayon, la largeur, la couleur, et plus encore.

Dans l'onglet Avancé, faites défiler vers le bas et vous verrez les Effets d'animation. Vous pouvez faire rebondir, pulser, secouer votre bouton et bien plus encore. Cela aidera à capter l'attention de votre lecteur.

En bas du constructeur de page, il y a une option pour prévisualiser sur mobile et tablette afin de vous assurer que la conception de votre bouton est belle sur tous les appareils.

Ainsi, vous pouvez personnaliser toute votre page de destination avec SeedProd. Lorsque vous êtes prêt, vous pouvez enregistrer et publier votre page.

Ajouter un bouton dans WordPress avec Thrive

Thrive Themes dispose d'un puissant constructeur de thèmes et d'un constructeur de pages de destination que vous pouvez utiliser pour personnaliser votre site WordPress.

Pour ce tutoriel, nous vous montrerons comment utiliser Thrive Architect – le constructeur de pages de destination. Les étapes pour le constructeur de thèmes suivent des étapes similaires.

Thrive Architect est convivial pour les débutants et facile à utiliser pour tout le monde. Ce plugin est un outil premium, vous devrez donc d'abord vous inscrire à un compte Thrive.

Ensuite, vous pouvez installer ce plugin sur votre site. Apprenez comment faire dans notre Revue de Thrive Architect.

Une fois installé sur votre site, commencez par créer ou modifier n'importe quelle page en utilisant le constructeur Thrive Architect.

Lorsque le constructeur de pages de destination Thrive s'ouvre, vous verrez un aperçu de votre page ainsi que des options d'édition à droite et à gauche du constructeur.

Dans le panneau de gauche, cliquez sur l'icône « + » et un menu de blocs s'ouvrira. Ici, vous pouvez sélectionner le bloc « Bouton » et le faire glisser dans votre conception.

Lorsque vous faites cela, vous verrez le bouton apparaître dans l'aperçu ainsi que les options d'édition sur la droite. Vous pouvez changer la couleur, la taille, l'alignement, et plus encore. Vous pouvez également ajouter un lien et des balises « nofollow » ou « ouvrir dans un nouvel onglet ».

Dans le menu de gauche, il y a un onglet « Bouton de modèle ». Lorsque vous l'ouvrez, vous verrez différents styles de boutons parmi lesquels choisir. Il y a tellement d'options ici, vous n'aurez jamais à styliser un bouton vous-même.

Retournez à l'onglet Options principales, faites défiler vers le bas pour trouver plus d'options.

Ces options incluent :

• Typographie
• Style d'arrière-plan
• Mise en page et position
• Animation et action
• Réactif
• Attributs HTML

...et plus encore.

Pour donner vie à votre bouton, ouvrez l'onglet Animation et action. Vous verrez des effets d'animation pour faire glisser, zoomer, grandir, rétrécir, estomper votre bouton, et plus encore.

Lorsque vous avez personnalisé toute votre page et que vous êtes prêt à publier, ouvrez l'icône des paramètres en haut du constructeur. Ici, vous pouvez publier votre page pour la rendre visible sur votre site.

C'est tout ! Vous avez appris à créer un bouton en utilisant l'éditeur de blocs et des constructeurs de pages tiers. Ensuite, nous vous montrerons également comment utiliser du code personnalisé pour ajouter un bouton.

Ajouter un bouton en utilisant du code

Si vous êtes calé en code et que vous souhaitez ajouter/styliser un bouton vous-même, alors vous voudrez consulter WPCode.

WPCode vous fournit des extraits de code préfabriqués que vous pouvez utiliser sur votre site Web. Il existe une bibliothèque de snippets gratuits et pro que vous pouvez consulter sur leur site.

Vous pouvez prévisualiser l'extrait et le télécharger pour l'utiliser sur votre site.

Vous pouvez également installer le plugin sur votre site et vous obtiendrez des extraits de code préfabriqués ainsi qu'une option pour les insérer automatiquement sur votre page. Il existe également une option de shortcode que vous pouvez utiliser pour ajouter facilement le bouton où vous le souhaitez sur votre site.

Avec WPCode, vous n'aurez jamais à passer des heures à essayer de comprendre comment créer/ajouter de nouveaux éléments. Vous pouvez rapidement trouver les extraits de code dont vous avez besoin et les ajouter à votre site.

C'est tout pour nous. Nous espérons que ce tutoriel vous a aidé à ajouter un bouton à votre site. Si vous cherchez à ajouter un bouton personnalisé à une fenêtre contextuelle sur votre site, alors OptinMonster est l'outil qu'il vous faut. Consultez notre Avis sur OptinMonster pour en savoir plus.

Ensuite, vous voudrez peut-être consulter nos autres guides utiles :

• Comment créer une mise en page WordPress personnalisée
• Comment personnaliser un site Web WordPress
• Comment suivre les clics sur les liens et les boutons dans WordPress

Ces tutoriels vous aideront à personnaliser votre site WordPress. Le dernier vous aidera à suivre les performances de vos boutons.