Personnalisez le style de widget avec le plugin CSS Classes Widget

Ouvrir l’index du contenu

Ce guide a été mis à jour le

Voyons comment fonctionne le widget CSS Classes.

Personnalisez le style de widget avec le plugin CSS Classes Widget

Page de configuration du plugin

Lors de l’installation du plugin, vous devrez d’abord travailler sur certains paramètres généraux. Puis naviguez jusqu’à Paramètres > Widget Classes CSS.

Avant de regarder les options disponibles une par une, faisons une prémisse : ce plugin ne vous permet pas d’écrire des codes CSS directement. Il est plutôt utilisé pour associer des classes et des ID à des widgets, de sorte que la création de règles CSS est plus facile. Vous devez donc avoir au moins une connaissance de base de la CSS.

Revenons maintenant à la configuration du plugin.

Parmi les options disponibles, vous pouvez choisir si n’activer que la fonctionnalité d’associer à vos widgets une classe, ou même un ID.

Personnalisez le style de widget avec le plugin CSS Classes Widget

En règle générale, les classes peuvent être affectées à plus d’un élément du site, tandis que les classes Les ID doivent être utilisés pour un seul widget.

Un domaine intéressant est celui qui s’appelle  » « .Type de champ de classe“. Ici, vous pouvez choisir d’insérer – dans la page de configuration du widget – un champ de texte où saisir le nom de la classe, ou un menu déroulant.

Si vous choisissez la deuxième option, vous devrez remplir un champ pour chaque classe dans le champ  » « .Définir les classes pour la liste déroulante“. Les classes que vous saisissez dans ces zones apparaîtront comme une option disponible sous les widgets individuels.

Nous naviguons maintenant à l’intérieur de la page Apparence > Widgets.

Vous verrez que chaque widget a maintenant un nouveau champ (ou deux si vous avez également sélectionné l’option d’ajouter des ID).

Pour personnaliser le style des widgets, tapez simplement le nom de la classe que vous voulez assigner. Ensuite, ajoutez les règles CSS correspondantes.

Où ajouter des codes CSS ?

Il y a plusieurs options :

  • dans le fichier style.css de votre thème. Dans ce cas, cependant, rappelez-vous que lorsque vous mettez à jour le thème, les changements seront perdus et vous devrez revenir pour les ajouter.
  • Dans le fichier style.css d’un thème enfant. Un thème enfant est utilisé pour apporter des modifications au thème sans les perdre avec les mises à jour. Si vous êtes intéressé à apprendre comment créer un thème enfant pour votre site, lisez la section ce guide.
  • Dans un plugin tel que CSS personnalisé simple. Si vous ne voulez pas aller travailler directement dans le fichier style.css, c’est une bonne alternative. Vos modifications ne seront pas perdues avec les mises à jour, et lorsque vous faites des ajouts, vous pouvez même les prévisualiser avant de les enregistrer et de les rendre effectifs.
Personnalisez le style de widget avec le plugin CSS Classes Widget

Conclusion

Dans ce petit guide, nous avons vu comment personnaliser le style des widgets avec le plugin Widget Classes CSS. Évidemment, pour utiliser cet outil, vous devez être familier avec le CSS. N’ayez pas peur de cela, le CSS est très simple ! Si vous ne l’avez pas encore fait, allez le lire. le guide de base mentionné dans le post et commence à expérimenter.

Je vous invite à me faire savoir si vous avez testé ce plugin et s’il vous a été utile. Comme d’habitude, on en parle dans les commentaires.

Partager l'article :

Facebook
Twitter
Pinterest
LinkedIn

כתיבת תגובה

האימייל לא יוצג באתר.

Continuer votre lecture