Comment ajouter des styles personnalisés aux widgets WordPress (2 méthodes)

La création de sites WordPress nous a appris que les petits détails font une grande différence. La personnalisation du style des widgets peut transformer de bons sites Web en excellents.

Chez WPBeginner, nous faisons en sorte que chaque élément fonctionne ensemble. Prenez nos widgets de barre latérale, par exemple.

Nous avons personnalisé leur apparence pour mettre en évidence les ressources importantes et les faire s'intégrer parfaitement au design de notre site. Cela nous aide à établir la confiance avec des millions de visiteurs.

Dans ce guide, nous partagerons les méthodes les plus simples pour personnaliser les styles des widgets WordPress. Vous apprendrez des techniques pour rendre vos widgets professionnels et les intégrer parfaitement à votre thème.

Pourquoi ajouter des styles personnalisés aux widgets WordPress ?

Par défaut, les widgets WordPress utilisent le style de votre thème, ce qui ne correspond pas toujours à vos objectifs de conception. L'ajout de styles personnalisés vous donne plus de contrôle sur l'apparence de vos widgets.

Voici pourquoi cela vaut la peine de personnaliser :

• 🎨 Correspondance avec votre marque : Les styles personnalisés vous permettent d'aligner les couleurs, les polices et l'espacement des widgets avec la marque de votre site pour un look plus cohérent.
• 👓 Amélioration de la lisibilité : Parfois, la disposition par défaut des widgets n'est pas facile à lire. La personnalisation du style peut aider à améliorer la taille des polices, le contraste ou l'alignement pour une meilleure expérience utilisateur.
• 🌟 Mettre en évidence le contenu important : Vous voulez que vos articles récents, vos appels à l'action ou vos informations de contact se démarquent ? Le CSS personnalisé peut rendre ces widgets plus attrayants.
• 🧹 Nettoyer les designs encombrés : Si un widget semble trop chargé ou déplacé, les styles personnalisés aident à rationaliser son apparence et à l'intégrer plus harmonieusement dans votre mise en page.
• 🧩 Créer des mises en page uniques : Les styles personnalisés ouvrent des possibilités de mise en page, comme transformer un widget de texte basique en une boîte promotionnelle stylisée ou aligner plusieurs widgets dans une grille.

En bref, styliser vos widgets vous aide à aller au-delà de l'apparence par défaut et à créer un site web plus soigné et professionnel.

Cela dit, examinons comment ajouter facilement des styles personnalisés à vos widgets WordPress.

Nous vous montrerons 2 façons de personnaliser vos widgets WordPress avec des styles personnalisés. Vous pouvez utiliser ces liens rapides pour accéder à celui qui vous convient le mieux :

• Méthode 1 : Styliser les widgets WordPress avec du code CSS
• Méthode 2 : Styliser les widgets WordPress avec CSS Hero (sans code)

Méthode 1 : Styliser les widgets WordPress avec du code CSS

Les widgets WordPress utilisent désormais l'éditeur de blocs pour ajouter un nouveau widget et un bloc aux zones de widgets et aux barres latérales. Cela signifie que vous verrez des options de style de bloc pour certains des blocs WordPress par défaut.

Par exemple, si vous allez sur la page Apparence » Widgets et que vous cliquez sur un bloc WordPress par défaut, vous verrez des options pour changer les couleurs et la typographie du bloc.

Cependant, tous les blocs ne sont pas dotés de ces options de widget, surtout s'il ne s'agit pas de blocs WordPress par défaut. Heureusement, l'un des avantages de l'utilisation de l'éditeur de blocs pour les widgets est que vous pouvez facilement ajouter des classes CSS personnalisées à chaque bloc.

Tout ce que vous avez à faire est de cliquer sur le widget auquel vous souhaitez ajouter des styles personnalisés.

Ensuite, vous devez faire défiler jusqu'à l'onglet « Avancé » sous le panneau Bloc. À partir de là, vous pouvez ajouter une classe CSS personnalisée.

N'oubliez pas de sauvegarder les paramètres de votre widget en cliquant sur le bouton « Mettre à jour ».

Vous pouvez maintenant ajouter du CSS personnalisé à votre thème WordPress en ciblant cette classe CSS particulière.

Allez simplement sur la page Apparence » Personnaliser et basculez vers l'onglet CSS additionnel. Là, vous verrez un aperçu en direct de votre site web avec une boîte pour ajouter vos règles CSS.

Une autre méthode efficace pour ajouter du CSS personnalisé est d'utiliser WPCode.

Nous l'avons testé de manière approfondie et avons constaté que c'était l'un des moyens les plus sûrs d'intégrer du code personnalisé dans votre thème. Si vous gérez de nombreux extraits CSS, WPCode facilite leur organisation et leur suivi.

Pour plus de détails sur ses fonctionnalités et ses avantages, n'hésitez pas à consulter notre avis sur WPCode.

Tout d'abord, assurez-vous d'installer le plugin WPCode. Pour des instructions étape par étape, vous pouvez lire notre guide sur comment installer un plugin WordPress.

Ensuite, allez dans Extraits de code » + Ajouter un extrait et sélectionnez « Ajouter votre code personnalisé (Nouvel extrait) ». Cliquez ensuite sur le bouton « + Ajouter un extrait personnalisé ».

Maintenant, donnez un nom à votre nouveau CSS personnalisé. Il peut s'agir de quelque chose de simple comme « Style de widget personnalisé ».

Ensuite, changez le type de code en « Snippet CSS ».

Ensuite, ajoutez votre CSS personnalisé dans le champ.

Voici un CSS de base que nous avons utilisé :

.latest-articles { 
background-color:#def4f1;
padding:10px;
}

Une fois terminé, faites simplement défiler vers le bas jusqu'à la section Insertion. Assurez-vous que la méthode d'insertion est définie sur « Insertion automatique » et l'emplacement sur « En-tête du site entier ».

Après cela, basculez le bouton en haut à droite jusqu'à ce qu'il indique « Actif » et cliquez sur « Enregistrer le extrait ».

Après avoir ajouté votre CSS personnalisé, vous pouvez afficher votre site Web WordPress sur mobile ou sur ordinateur pour le voir en action.

Voici à quoi ressemble le nôtre sur notre site démo WordPress :

Méthode 2 : Styliser les widgets WordPress avec CSS Hero (sans code)

Un problème avec la méthode ci-dessus est que vous devez écrire du code CSS. Cependant, tous les utilisateurs ne connaissent pas le CSS ou ne veulent tout simplement pas écrire de code eux-mêmes.

Dans ce cas, vous pouvez utiliser CSS Hero. C'est un plugin de style WordPress personnalisé qui vous permet d'ajouter du CSS personnalisé à votre thème WordPress sans écrire de code.

Vous pouvez en apprendre davantage sur le plugin dans notre avis sur CSS Hero.

Tout d'abord, vous devez installer et activer le plugin CSS Hero. Pour plus de détails, consultez notre guide étape par étape sur comment installer un plugin WordPress.

Après l'activation, le plugin ajoutera un nouvel élément de menu à votre barre d'administration WordPress en haut.

Ensuite, vous devez visiter la page où vous pouvez voir le widget que vous souhaitez styliser et cliquer sur le bouton CSS Hero en haut.

Cela ouvrira la page dans l'interface de l'éditeur CSS Hero.

C'est un éditeur en direct où vous pouvez simplement pointer et cliquer sur n'importe quel élément de votre site Web et modifier son style.

Placez simplement votre souris sur le widget que vous souhaitez styliser. Ensuite, cliquez pour le sélectionner.

Dans cet exemple, nous avons sélectionné notre widget de recherche.

Après cela, vous pouvez utiliser le menu de gauche pour styliser votre widget comme vous le souhaitez. Cela inclut des options de style avancées comme les dégradés, la typographie, les marges intérieures, les marges extérieures et les bordures.

Dans l'exemple ci-dessous, nous avons modifié la taille de la police du widget de recherche WordPress afin qu'il se démarque encore plus.

Vous pouvez également modifier des éléments spécifiques du widget si nécessaire.

Par exemple, nous avons décidé de modifier le rayon des bordures du bouton et des champs de recherche. De cette façon, ils paraissent plus arrondis et stylés.

Une fois que vous avez terminé, n’oubliez pas de cliquer sur le bouton « Enregistrer » pour sauvegarder vos paramètres.

Ensuite, allez-y et prévisualisez votre site Web pour voir votre nouveau design WordPress en action.

Nous espérons que cet article vous a aidé à apprendre comment ajouter des styles personnalisés aux widgets WordPress. Vous voudrez peut-être aussi consulter notre sélection des meilleurs constructeurs de pages glisser-déposer pour WordPress et notre comparaison des avantages et inconvénients entre les thèmes WordPress gratuits et premium.

Si cet article vous a plu, abonnez-vous à notre chaîne YouTube pour des tutoriels vidéo WordPress. Vous pouvez également nous retrouver sur Twitter et Facebook.