Les boutons peuvent sembler anodins, mais ils peuvent jouer un rôle important sur votre site web. Les boutons sont l'un des moyens les plus simples de guider les visiteurs vers l'action que vous souhaitez qu'ils entreprennent.
Qu'il s'agisse de diriger les internautes vers votre page produit ou de les inciter à lire la suite ou à s'inscrire, un beau bouton peut faire toute la différence. La bonne nouvelle, c'est qu'il n'est pas nécessaire d'avoir des compétences en codage pour les concevoir.
WordPress dispose d'options intégrées, et avec un peu d'aide d'un plugin de bloc, vous pouvez contrôler encore davantage l'aspect et la convivialité de vos boutons.
Dans cet article, je vais vous présenter trois méthodes simples pour créer des boutons élégants dans WordPress.
Nous commencerons par l'éditeur par défaut, nous passerons à un plugin qui offre plus de flexibilité et nous terminerons par une méthode bonus pour ajouter des boutons à l'intérieur des tableaux. Nous allons nous lancer dans l'aventure.
Créer de belles tables
Avec l'éditeur de blocs
Méthode 1 : Utiliser le bloc de boutons par défaut
WordPress dispose d'un bloc de boutons intégré qui fonctionne bien dans la plupart des cas. Vous le trouverez dans l'éditeur de blocs en cliquant sur la petite icône (+) et en recherchant "Buttons".
Lorsque le bloc de boutons est inséré, il vous demande d'ajouter du texte à l'intérieur du bouton.
Une fois le bloc inséré, vous pouvez ajouter un ou plusieurs boutons côte à côte. Chaque bouton peut être personnalisé directement à partir de la barre latérale droite. Vous trouverez des options pour :
- Largeur du bouton (complète ou automatique)
- Couleur du texte et de l'arrière-plan
- Rembourrage et alignement
- Rayon de la bordure (pour les coins arrondis)
C'est un bon point de départ, surtout si vous vous en tenez à un design minimaliste.⚠️Mais vous atteindrez rapidement une limite si vous avez besoin de plus d'options de style comme les effets de survol, les dégradés ou l'espacement réactif.
🛠️ Conseil de pro : Vous voulez un bouton parfaitement arrondi ? Réglez le rayon de la bordure sur 100 pour un bouton de type pilule.
✅Méthode 2 : Utiliser le bloc Buttons d'Ultimate Blocks
Si vous voulez plus de contrôle sans écrire de CSS, Blocs ultimes est un fantastique plugin Gutenberg à essayer. Il ajoute une fonction Bloc de boutons qui a été conçu dans un souci de personnalisation.
L'installation d'Ultimate Blocks est une tâche facile.
-
Naviguez jusqu'à Plugins
-
Cliquez sur Ajouter des plugins
-
Rechercher "Tableberg"
-
Cliquez sur Installeralors Activer
Après l'installation et l'activation des Ultimate Blocks, ajouter le bloc "Boutons (Ultimate Blocks)".
Pour insérer les boutons des Ultimate Blocks, cliquez sur la petite icône (+) et recherchez "Bouton (amélioré)".
Vous remarquerez immédiatement la différence lorsque vous ajouterez le bouton Ultimate Blocks. Voici ce que vous pouvez modifier dans les paramètres du bloc :
-
Justification et orientation des boutons
-
Taille du bouton
-
Largeur du bouton
-
Support d'icônes (avant ou après le texte) et diverses autres options
-
Soutien à l'animation
Dans la section Styles de boutons, vous obtiendrez les personnalisations suivantes :
-
Option de couleur pour l'état normal et l'état de survol
-
Bordure des boutons
-
Style des boutons
-
Ajustement du rembourrage, de l'espacement des blocs et de la marge dans les paramètres des dimensions
-
Option CSS personnalisée
Toutes les fonctionnalités des blocs de boutons par défaut sont incluses dans le bloc Bouton d'Ultimate Blocks. Vous trouverez ci-dessous un bouton personnalisé conçu par Ultimate Blocks, bien qu'il soit fonctionnel.
Ce bloc est idéal pour les spécialistes du marketing, les blogueurs et tous ceux qui souhaitent que leurs boutons d'appel à l'action se démarquent. Vous bénéficiez d'une grande souplesse de conception sans avoir à écrire une seule ligne de code.
🎯 Conseil de pro : Utilisez des couleurs de survol contrastées pour créer une réponse visuelle satisfaisante lorsque les utilisateurs interagissent avec vos boutons.
🧩 Bonus : Ajouter des boutons dans un tableau
Parfois, vous avez besoin de boutons à l'intérieur d'une mise en pageIl peut s'agir d'un tableau de prix ou d'une comparaison de fonctionnalités. C'est là qu'un plugin de tableau basé sur des blocs comme Tableberg brille.
Meilleure affaire |
||
 |
 |
 |
Apple AirPods Pro 2nd Gen |
SAMSUNG Galaxy Buds 2 Pro |
Google Pixel Buds Pro |
|
|
|
Avec Tableberg, chaque cellule du tableau agit comme une mini toile. Cela signifie que vous pouvez supprimer le bloc de boutons dédié à l'intérieur d'une cellule. Vous n'êtes plus obligé de vous contenter d'un texte simple : vous pouvez ajouter des boutons CTA tels que "Acheter maintenant", "Voir les détails" ou "Essayer gratuitement" directement dans vos rangées de prix.
Les caractéristiques du bouton du Tableberg sont les mêmes que celles du bouton des Ultimate Blocks.
Vous souhaitez personnaliser l'aspect du bouton à l'intérieur du tableau ? Aucun problème. Vous pouvez modifier le rayon de la bordure, le remplissage et même ajouter des icônes, le tout à partir de l'éditeur de blocs.
🛠️ Conseil de pro : Combinez votre bouton avec un classement par étoiles ou un ruban dans la même rangée pour un impact visuel supplémentaire et de meilleures conversions.
Dernières réflexions !
Concevoir de beaux boutons dans WordPress ne nécessite pas de CSS personnalisé ou l'aide d'un développeur. Avec le bloc Buttons natif, la version améliorée d'Ultimate Blocks, et la flexibilité d'outils comme Tableberg, vous pouvez créer des mises en page entièrement interactives qui sont superbes et fonctionnent sur tous les appareils.
Finis les liens simples et les shortcodes obsolètes. Vous avez désormais un contrôle total, directement dans l'éditeur.
En savoir plus !
