Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
Coupe WPB
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

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

La personnalisation de vos widgets est un moyen efficace d’améliorer l’apparence de votre site, de maintenir la cohérence de votre marque et d’attirer l’attention sur des informations importantes.

Cependant, de nombreux utilisateurs/utilisatrices de WordPress trouvent que le style des widgets est un défi, en particulier s’ils ne sont pas à l’aise avec le CSS. Ne vous inquiétez pas, car nous sommes là pour vous aider.

Dans cet article, nous allons vous afficher deux méthodes faciles pour ajouter des styles personnalisés aux widgets WordPress sans casser votre site. Que vous soyez à l’aise avec un peu de CSS ou que vous préfériez une solution sans code, nous avons tout ce qu’il vous faut.

Adding custom styles to WordPress widgets

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

Note : Cet article s’adresse aux utilisateurs/utilisatrices de thèmes classiques. Si vous utilisez un thème sur blocs, alors vous ne verrez pas les pages Widgets ou Outil de personnalisation du thème sur votre admin. Vous devrez utiliser les blocs et l’éditeur de site complet pour personnaliser votre thème.

En savoir plus, consultez notre guide du débutant sur l’édition de site WordPress.

Méthode 1 : Ajouter des styles personnalisés aux widgets WordPress avec l’Éditeur de blocs (Basic)

Les widgets WordPress utilisent désormais l’éditeur de blocs pour ajouter des widgets et des blocs aux zones prêtes à recevoir des 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.

The default WordPress widget styling options

Cependant, tous les blocs ne sont pas livrés avec cette option, 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.

Adding custom CSS class to widgets in Block Editor

N’oubliez pas d’enregistrer vos modifications en cliquant sur le bouton « Mise à 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.

Add CSS rules

Une autre façon d’ajouter du CSS personnalisé est d’utiliser WPCode. Nous vous recommandons de l’utiliser si vous avez déjà beaucoup de code CSS personnalisé dans votre thème et que vous voulez facilement différencier et suivre tous les extraits.

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é ».

Adding a new custom code snippet in WPCode

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 ».

Custom CSS to style WordPress widgets

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 ».

Choosing Site Wide Header as the code location in WPCode

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

Voici à quoi ressemble le nôtre :

Block widget with custom style preview

Méthode 2 : Appliquer des styles personnalisés aux widgets WordPress avec CSS Hero (plus personnalisable)

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.

Opening CSS Hero in WordPress

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.

CSS Hero interface

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.

Clicking on a search widget in CSS Hero

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 Recherche pour qu’il soit encore plus visible.

Changing a search widget's typography in CSS Hero

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.

Changing a search widget's border radius in CSS Hero

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 vos modifications en action.

Clicking the Save button in CSS Hero

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.

Divulgation : Notre contenu est soutenu par les lecteurs. Cela signifie que si vous cliquez sur certains de nos liens, nous pouvons gagner une commission. Consultez comment WPBeginner est financé, pourquoi cela compte et comment vous pouvez nous soutenir. Voici notre processus éditorial.

Avatar

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

L'ultime WordPress Toolkit

Accédez GRATUITEMENT à notre boîte à outils - une collection de produits et de ressources liés à WordPress que tous les professionnels devraient avoir !

Reader Interactions

21 commentairesLaisser une réponse

  1. Syed Balkhi

    Hey WPBeginner readers,
    Did you know you can win exciting prizes by commenting on WPBeginner?
    Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
    You can get more details about the contest from here.
    Start sharing your thoughts below to stand a chance to win!

  2. Ankush

    The Plugin was really Great but I had a problem…

    It doesn’t work when i add custom css….

    May be plugin css is overriding my code but.. that really sad…

    Hey Wpbeginner.com Team.. Please leave me a reply,]

    I You can tell me how to fix it…

  3. Rachael

    I love this plugin but every time I activate it, I have trouble with the gallery widget. It works fine with the plugin deactivated, but if I turn on the plugin, the gallery widget won’t save any images. All of the other widgets work fine. Does anyone else have this issue?

  4. Regina

    Does how to instructional above also also include the ability to customize the font of the widget titles?
    Thanks!

  5. terry

    Finally, after failing at trying to decode the jargon I get on inspect, this article told me exactly what I needed.

    Thanks

  6. Alex

    I don’t have any classes on widgets.

  7. irfan

    There is extra white space while creating extra widget area for header. Kindly tell us , how to remove this

  8. Thomas

    Hi, I tried to do it manually, inspected the element and its class but it did not work.

    I am trying to change the style of a WPform.

    Could you help me?

  9. daniel

    i have added a widget area to my header using the functions.php and header.php files. i can see the widget ive added on my site but i want to put it next to the menu, any idea how to do this please? i want it to sit to the right hand side of the menu.

  10. Deniz Kumru

    It’s my first wordpress theme.I was nervous till found your article.It’s done thank you :)

  11. ivan

    Why does my layout under widget styles only shows the padding option, without the bottom margin, gutter & row layout option.

  12. Rimi

    hallo
    I can not make any changes because it is inactive
    Being processed plugin / css / plugin-front.css (inactive),How can I activate pleas

  13. Grace

    Hello, my theme doesn’t have a right sidebar, it came with just a footer widget area, can I use the custom css to add a right sidebar? Please help me, thanks

    • WPBeginner Support

      No, you will first need to define a widget ready area. Your theme may already have an option to use a sidebar layout. If it doesn’t, then we would recommend you to ask the theme author for support. On the other hand, if you feel confident in your coding skills, then go a head.

      Administrateur

  14. Mr.T

    I want to change them manually. Am I right that by using widget-number class you actually can’t move them up or down in the widgets area, because their id will change, or it works differently?

  15. Correen K

    I was looking for something like this to add some style to my sidebar and stumbled upon the Flexible Posts Widget plugin. I think it’s always nice to have options ;)

Laisser une réponse

Merci d'avoir choisi de laisser un commentaire. Veuillez garder à l'esprit que tous les commentaires sont modérés selon notre politique de commentaires, et votre adresse e-mail ne sera PAS publiée. Veuillez NE PAS utiliser de mots-clés dans le champ du nom. Ayons une conversation personnelle et significative.