Comment ajouter des styles personnalisés aux widgets WordPress (2 façons)

La version des sites WordPress nous a appris que les petits détails font de grandes différences. Un style de widget personnalisé peut transformer un bon site en un site exceptionnel.

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

Nous avons personnalisé leur apparence pour mettre en valeur les ressources importantes et les intégrer parfaitement à la conception de notre site. Cela nous aide à instaurer un climat de confiance avec des millions d’internautes.

Dans ce guide, nous partagerons les méthodes les plus simples pour personnaliser les styles de widgets WordPress. Vous apprendrez des techniques pour que vos widgets aient un aspect professionnel et s’intègrent 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, qui ne correspond pas toujours à vos objectifs en matière de design. L’ajout de publicités personnalisées vous permet de mieux contrôler l’apparence et la convivialité de vos widgets.

Voici pourquoi il vaut la peine de le personnaliser :

• 🎨 A dapté à votre marque : Les styles personnalisés vous permettent d’aligner les couleurs, les polices et l’espacement des widgets sur la marque de votre site, pour un aspect plus cohérent.
• 👓 Amélioration de la lisibilité : Parfois, la présentation par défaut des widgets n’est pas facile à lire. Le style peut aider à améliorer les tailles de police, le contraste ou l’alignement pour une meilleure expérience pour l’utilisateur.
• 🌟 Mettez en évidence le contenu important : Vous voulez que vos publications récentes, votre appel à l’action ou vos coordonnées ressortent ? Une CSS personnalisée peut rendre ces widgets plus attrayants.
• 🧹 Nettoyer les designs encombrés : Si un widget semble trop encombré ou mal placé, les styles personnalisés aident à rationaliser son apparence et à l’intégrer plus harmonieusement dans votre mise en page.
• 🧩 Créez des mises en page uniques : Les styles personnalisés ouvrent des possibilités de mise en page, comme la transformation d’un widget de texte de base en une boîte de promotion personnalisée ou l’alignement de plusieurs widgets dans une grille.

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

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

Nous allons vous afficher 2 façons de personnaliser vos widgets WordPress avec des styles personnalisés. Vous pouvez utiliser ces liens rapides pour aller à/au qui vous convient le mieux :

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 colonnes latérales. Cela signifie que vous verrez quelques options de style de bloc pour certains des blocs WordPress par défaut.

Par exemple, si vous allez sur la page Apparence ” Widgets et cliquez sur un bloc WordPress par défaut, vous verrez des options permettant de modifier les couleurs et la typographie du bloc.

Cependant, tous les blocs ne sont pas livrés avec ces options de widget, en particulier si ces blocs ne sont pas ceux de 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.

Il vous suffit de cliquer sur le widget auquel vous souhaitez ajouter des styles personnalisés.

Ensuite, vous devez défiler vers le bas jusqu’à l’onglet “Avancé” sous le panneau Bloc. À partir de là, vous pouvez ajouter une classe CSS personnalisée.

N’oubliez pas d’enregistrer les réglages de votre widget en cliquant sur le bouton “Mettre à jour”.

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

Il vous suffit de vous rendre sur la page Apparence ” Outil de personnalisation et de personnaliser l’onglet CSS supplémentaire. Vous y verrez une prévisualisation en direct de votre site avec une case pour ajouter vos règles CSS.

Une autre méthode efficace pour ajouter des feuilles de style CSS personnalisées consiste à utiliser WPCode.

Nous l’avons testé de manière approfondie et avons trouvé qu’il s’agissait de 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.

Confirmez, tout d’abord, l’installation de l’extension WPCode. Pour obtenir des instructions étape par étape, vous pouvez lire notre guide sur l’installation d’une extension WordPress.

Ensuite, allez dans Code Snippets “ + Add Snippet et sélectionnez ‘Add Your Custom Code (New Snippet)’ (Ajouter votre code personnalisé (nouvel extrait)). Cliquez ensuite sur le bouton “+ Ajouter un extrait personnalisé”.

Donnez maintenant un nom à votre nouveau CSS personnalisé. Il peut s’agir de quelque chose de simple comme “Style de widget personnalisé”.

Modifiez ensuite le type de code en “extrait CSS”.

Ensuite, ajoutez votre CSS personnalisé dans le champ.

Voici quelques feuilles de style CSS de base que nous avons utilisées :

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

Une fois cela fait, défilez vers le bas jusqu’à la section Insertion. Confirmez que la méthode d’insertion est définie sur “Insertion automatique” et que l’Emplacement est “En-tête du site”.

Ensuite, faites basculer le bouton en haut à droite jusqu’à ce qu’il indique “Actif” et cliquez sur “Enregistrer l’extrait”.

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

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

Méthode 2 : Styliser les widgets WordPress avec la bannière CSS d’accroche (Aucun code)

L’un des problèmes de la méthode ci-dessus est que vous devez écrire du code CSS. Or, tous les utilisateurs/utilisatrices ne connaissent pas CSS ou ne veulent tout simplement pas écrire du code eux-mêmes.

Dans ce cas, vous pouvez utiliser CSS Hero. Il s’agit d’une extension de personnalisation WordPress qui vous permet d’ajouter des CSS personnalisés à votre thème WordPress sans écrire de code.

Vous pouvez en savoir plus sur cette extension dans notre Avis CSS Hero.

Tout d’abord, vous devez installer et activer la bannière d’accroche CSS Hero. Pour plus de détails, consultez notre guide étape par étape sur l’installation d’une extension WordPress.

Dès qu’elle est activée, l’extension ajoute un nouvel élément de menu à votre barre d’outils d’administration WordPress, en haut de la page.

Ensuite, vous devez vous rendre sur la page où se trouve le widget que vous souhaitez styliser et cliquer sur le bouton CSS Hero en haut de la page.

La page s’ouvre alors dans l’interface de l’éditeur/éditrices CSS Hero.

Il s’agit d’un éditeur/éditrices direct où vous pouvez simplement pointer et cliquer sur n’importe quel article de votre site et en modifier le style.

Il vous suffit de placer votre souris sur le widget que vous souhaitez styliser. Cliquez ensuite pour le sélectionner.

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

Ensuite, 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, le rembourrage, les marges et les bordures.

Dans l’exemple ci-dessous, nous avons modifié la taille de la police du widget de recherche WordPress afin qu’il ressorte 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-radius de la bordure du bouton et des champs de recherche. De cette manière, ils sont plus courbés et plus élégants.

Lorsque vous avez terminé, n’oubliez pas de cliquer sur le bouton “Enregistrer” pour stocker vos réglages.

Ensuite, allez-y et prévisualisez votre site pour voir votre nouvelle conception WordPress en action.

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

Si vous avez aimé cet article, veuillez alors vous abonner à notre chaîne YouTube pour obtenir des tutoriels vidéo sur WordPress. Vous pouvez également nous trouver sur Twitter et Facebook.