Comment créer un bouton WordPress personnalisé

L’un des atouts majeurs d’une page de destination est le bouton d’appel à l’action (CTA). C’est l’élément sur lequel les visiteurs cliquent pour télécharger une ressource, s’inscrire à votre liste de diffusion ou planifier une consultation. Concevez-le bien, et il stimulera fortement les conversions ; concevez-le mal, et les utilisateurs risquent de le survoler sans le voir avant de quitter votre page.

En fin de compte, savoir comment créer un bouton WordPress — un bouton qui se démarque des boutons génériques des autres pages — peut faire la différence entre un nouveau client et un client perdu. Mais c’est plus facile à dire qu’à faire. Bien que WordPress propose des options de personnalisation des boutons dans son éditeur Gutenberg, elles restent basiques. Les utilisateurs se heurtent souvent aux réglages de couleur déroutants et à l’absence d’options d’animation. Si vous souhaitez peaufiner votre bouton CTA, l’éditeur Gutenberg ne vous mènera pas bien loin. 

Pour contourner les limites des boutons WordPress, vous avez deux options : installer un bloc ou une extension tierce volumineuse, ou utiliser un widget serverless gratuit et léger qui préserve la vitesse de votre page et le code de votre thème. Ce guide explique le fonctionnement de chaque option afin que vous puissiez décider laquelle convient le mieux à votre site web.

Watch on youtube

How to Add a Custom Button to Wordpress

Option 1 : installer une extension de bouton WordPress dédiée ou utiliser du CSS personnalisé

Si vous apprenez comment utiliser WordPress, vous pourriez vous tourner vers des extensions tierces ou du code CSS pour personnaliser les boutons. Vous pouvez trouver les extensions disponibles via le tableau de bord d’administration de WordPress ou ajouter votre propre CSS à l’aide de l’éditeur WordPress. 

Avant d’explorer ces options, soyez conscient des inconvénients potentiels :

• Certaines extensions utilisent excessivement JavaScript et CSS, ce qui peut ralentir les temps de chargement des pages et nuire à votre score Core Web Vitals. 
• Les développeurs ne maintiennent pas toujours les extensions à jour. Cela peut entraîner de futurs problèmes de performance. Cela vous donne aussi une chose de plus à surveiller.
• Un CSS personnalisé incorrect peut remplacer les paramètres globaux actuels des boutons de votre site web, ce qui affecte l’apparence des autres boutons sur l’ensemble de votre site. Cela peut également nuire à la réactivité mobile de votre site.

Commençons par l’option la plus simple : une extension tierce. Pour en trouver et en installer une sur votre site, suivez ces étapes :

1. Cliquez sur l’option Extensions dans le tableau de bord d’administration de WordPress. Tapez la fonctionnalité dont vous avez besoin dans la barre de recherche. Dans cet exemple, nous avons saisi « custom CTA button WordPress ».

2. Choisissez une extension dans la liste et cliquez dessus pour en savoir plus sur ses fonctionnalités. Les meilleures extensions WordPress sont à jour, compatibles avec votre thème WordPress et bénéficient d’avis positifs des utilisateurs. Cliquez sur Installer maintenant lorsque vous trouvez une option qui vous convient.

3. Une fois l’installation de l’extension terminée, cliquez sur le bouton Activer. Suivez les instructions du développeur pour créer votre bouton personnalisé. 

Si vous maîtrisez le CSS, vous pouvez coder votre propre bouton CTA personnalisé. Pour ce faire, suivez ces étapes :

1. Cliquez sur Apparence > Éditeur dans le tableau de bord d’administration de WordPress. Si vous utilisez un thème classique ou tiers, cliquez sur Apparence > Personnaliser. 

2. Cliquez sur Styles > ⋮ > CSS additionnel. Sur les thèmes classiques et tiers, cliquez sur CSS additionnel.

3. Saisissez le code CSS personnalisé de votre bouton dans la zone de texte.

Plutôt que de coder votre propre bouton, vous pouvez essayer une alternative au CSS personnalisé pour WordPress : le widget bouton de Jotform. Nous explorons cette option dans la section suivante.

Option 2 : ajouter un widget bouton gratuit et personnalisable (recommandé)

Avec le widget bouton de Jotform, vous pouvez créer un bouton CTA avec des dégradés, des icônes et des effets de survol uniques. Cette option n’affectera pas le CSS de votre site ni ne réduira sa vitesse de chargement, car elle fonctionne à partir d’un embed hébergé fiable.

Pour l’utiliser, vous allez configurer votre bouton dans Jotform et intégrer le bouton personnalisé dans WordPress à l’aide d’un bloc HTML personnalisé. Il se met à jour immédiatement avec un bouton impeccable, réactif et autonome qui répond à vos besoins. Suivez ces étapes pour l’essayer :

1. Accédez au widget bouton de Jotform et remplissez les informations de base concernant votre bouton. Cliquez sur Continuer.

2. Ajoutez des couleurs, des icônes et d’autres options de style. Vous pouvez ajuster le style des coins, l’espacement, la taille du texte et les polices, ou ajouter une ombre portée pour accentuer davantage l’effet. Lorsque vous avez terminé, cliquez sur Continuer.

3. Passez en revue et sélectionnez vos options de mise en page, puis cliquez sur Essayez-le gratuitement sur votre site web.

4. Suivez les instructions pour créer un compte gratuit avec Jotform, puis copiez le code d’intégration et collez-le dans un bloc HTML personnalisé de votre site web WordPress. Veillez à choisir la page et la section où vous souhaitez que le bouton apparaisse.

L’alternative gratuite et sans code de Jotform pour les appels à l’action WordPress vous donne un contrôle total sur l’apparence et le fonctionnement de votre bouton. Que vous souhaitiez personnaliser le texte, les couleurs et le rayon des bordures, ou ajouter une animation au survol, Jotform est à la hauteur de la tâche. 

Boostez votre site WordPress avec des widgets intelligents et serverless

Jotform propose bien plus que la conception de boutons personnalisés. Parcourez notre répertoire de widgets gratuits pour sites web afin de trouver d’autres outils qui maximisent les conversions, éliminent la surcharge des pages et maintiennent la base de données de votre site légère pour des vitesses de chargement ultra-rapides. Parmi nos widgets les plus appréciés, citons

• Widget Avis Google : affiche les avis Google de votre marque selon vos préférences
• Widget Compte à rebours : indique aux visiteurs combien de temps il leur reste pour effectuer une certaine action, comme s’inscrire à un événement
• Widget FAQ : fournit un outil de FAQ consultable avec des réponses riches en médias et un style personnalisé
• Formulaires WordPress : vous permet de créer des formulaires personnalisés et de les intégrer à votre site web

En tant que créateur, blogueur ou marketeur, votre priorité est de produire un contenu exceptionnel et d’optimiser vos tunnels de conversion, et non de vous embêter avec du CSS ou des extensions. Les outils gratuits et hors serveur de Jotform vous permettent de déployer des fonctionnalités premium et à forte conversion en quelques minutes, afin que vous puissiez vous recentrer sur ce que vous faites le mieux. Lancez-vous dès aujourd’hui avec Jotform.