Voulez-vous ajouter des styles personnalisés aux widgets WordPress ?
L’Outil d’importation vous permet de préserver la cohérence de votre marque et de mettre en évidence les informations importantes pour vos utilisateurs/utilisatrices.
Dans cet article, nous allons vous afficher comment ajouter facilement des styles personnalisés aux widgets WordPress sans casser votre site.
Nous allons vous afficher trois façons d’ajouter des styles personnalisés aux widgets WordPress. Vous pouvez choisir celle qui vous convient le mieux.
- Ajout de styles personnalisés aux widgets de WordPress à l’aide de l’éditeur/éditrices de blocs
- Ajouter des styles personnalisés aux widgets classiques de WordPress
- Ajouter des styles personnalisés aux widgets WordPress en utilisant CSS Hero (aucun code)
Avant de commencer, cet article nécessite quelques connaissances en CSS afin que vous puissiez styliser les widgets. Vous devrez également ajouter des CSS personnalisés à votre thème WordPress.
Si vous préférez une méthode sans code à la place de CSS, vous pouvez passer à la méthode 3.
Premiers pas.
Ajouter des styles personnalisés aux widgets WordPress à l’aide de l’Éditeur de blocs
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.
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 vous rendre sur la page Apparence » Widgets et de cliquer sur le widget dans lequel 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 vos modifications 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.
Note: Si vous ne voyez pas Personnaliser dans le menu Apparence, jetez un coup d’œil à notre article sur la façon de corriger l’absence de personnalisation du thème dans l’administration de WordPress ou utilisez l’extension WPCode pour ajouter votre CSS personnalisé.
Voici quelques feuilles de style CSS de base que nous avons utilisées.
.latest-articles {
background-color:#def4f1;
padding:10px;
}
Après avoir ajouté votre CSS personnalisé, vous pouvez prévisualiser votre site pour le voir à l’œuvre.
Le problème avec l’utilisation des éditeurs/éditrices de blocs est de trouver le bon bloc à cibler.
Un correctif plus simple serait d’ajouter des blocs dans un bloc Groupe pour les styliser facilement ensemble. Vous pouvez en savoir plus sur le regroupement de blocs dans notre guide sur l’utilisation de l’éditeur de blocs WordPress.
Ajouter des styles personnalisés aux widgets classiques de WordPress
Cette méthode est faite pour vous si vous utilisez les anciens widgets classiques sur votre site WordPress.
Pour cette méthode, vous devez installer et activer l’extension Widget Options. Pour plus de détails, consultez notre guide étape par étape sur l’installation d’une extension WordPress.
Widget Options est une extension puissante qui ajoute des options supplémentaires à vos widgets WordPress. Cela inclut la possibilité d’afficher et de masquer les widgets en fonction de l’appareil de l’utilisateur, de son rôle et d’autres conditions.
L’extension ajoute également une option pour ajouter des classes CSS personnalisées à vos widgets WordPress.
Il vous suffit de vous rendre sur la page Apparence » Widgets et de cliquer sur le widget où vous souhaitez ajouter le style personnalisé.
Dans les Réglages du widget, vous verrez une plage étendue d’options. À partir de là, vous devez cliquer sur l’icône d’engrenage pour ajouter votre classe CSS personnalisée.
Une fois que vous avez terminé, n’oubliez pas de cliquer sur le bouton Enregistrer pour stocker les réglages de votre widget.
Vous pouvez maintenant ajouter une règle CSS personnalisée à votre thème en utilisant la classe CSS que vous venez de saisir. Par exemple, nous avons utilisé la CSS suivante sur notre site de test.
.latest-articles {
background-color:#def4f1;
padding:10px;
}
Voici ce que cela donne sur notre site de test.
Appliquer des styles personnalisés aux widgets WordPress avec CSS Hero
L’un des problèmes des deux méthodes 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.
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 et de cliquer pour le sélectionner.
Ensuite, vous pouvez utiliser le menu de gauche pour styliser votre widget comme vous le souhaitez.
Cela inclut des options de style avancées telles que les dégradés, la typographie, le rembourrage, les marges et les bordures.
Une fois que vous avez terminé, n’oubliez pas d’appuyer sur le bouton Enregistrer pour stocker vos Réglages.
Vous pouvez maintenant prévisualiser votre site pour voir vos modifications 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 widgets WordPress les plus utiles pour tous les sites ou notre guide pour créer un thème WordPress personnalisé à partir de zéro sans écrire de code.
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.
Syed Balkhi says
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!
Ankush says
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…
Rachael says
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?
Regina says
Does how to instructional above also also include the ability to customize the font of the widget titles?
Thanks!
terry says
Finally, after failing at trying to decode the jargon I get on inspect, this article told me exactly what I needed.
Thanks
Alex says
I don’t have any classes on widgets.
irfan says
There is extra white space while creating extra widget area for header. Kindly tell us , how to remove this
Thomas says
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?
WPBeginner Support says
Hey Thomas,
Please take a look at this guide on how to add custom css to WPForms.
Administrateur
daniel says
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.
WPBeginner Support says
Hey Daniel,
You’ll need to use place the widget code before your menu and then add custom CSS to position it.
Administrateur
Deniz Kumru says
It’s my first wordpress theme.I was nervous till found your article.It’s done thank you
ivan says
Why does my layout under widget styles only shows the padding option, without the bottom margin, gutter & row layout option.
Rimi says
hallo
I can not make any changes because it is inactive
Being processed plugin / css / plugin-front.css (inactive),How can I activate pleas
Grace says
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 says
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
Mr.T says
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?
Erick says
I have the same question
Correen K says
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
Abhishek Prakash says
Will using these many CSS not impact the page speed?
WPBeginner Staff says
Not if you do it right.