Comment ajouter des styles personnalisés aux widgets WordPress

La plupart des widgets de la barre latérale de WordPress ont généralement le même aspect. Ce serait bien si tous vos widgets avaient la même importance, mais la vérité est que certains widgets sont plus importants que d'autres pour la croissance de votre site. Par exemple, un widget d'abonnement à une liste de courrier électronique est certainement plus important qu'un widget d'archives. Ne serait-il pas bien si vous pouviez facilement coiffer différemment les widgets importants? Dans cet article, nous allons vous montrer comment ajouter des styles personnalisés aux widgets WordPress.

Utiliser un plugin pour ajouter des styles personnalisés aux widgets WordPress

La première chose à faire est d’installer et d’activer le plugin Widget CSS Classes. Lors de l'activation, allez simplement à Apparence »Widgets et cliquez sur un widget dans une barre latérale pour développer.

Vous remarquerez un nouveau Classe CSS champ sous vos widgets, vous pouvez donc facilement définir une classe CSS pour chaque widget. Par exemple, nous avons ajouté le souscrire classe à notre widget de formulaire d'abonnement.

Vous pouvez maintenant accéder à la feuille de style de votre thème et y ajouter vos règles de style. Comme ça:

 .subscribe background-color: # 858585; couleur: #FFF;  

Vous pouvez ajouter n'importe quel CSS personnalisé, comme ajouter un arrière-plan, modifier les bordures, utiliser des couleurs différentes, etc..

Ajouter manuellement des styles personnalisés à des widgets WordPress

Si vous ne souhaitez pas utiliser de plug-in, vous pouvez ajouter manuellement des styles personnalisés à vos widgets WordPress. Par défaut, WordPress ajoute des classes CSS à différents éléments, notamment des widgets..

Chaque widget de votre barre latérale a une classe de widgets numérotée. Comme widget-1, widget-2, widget-3, etc. À l'aide de l'outil Inspecter un élément de Google Chrome, vous pouvez rechercher la classe CSS du widget que vous souhaitez personnaliser..

Comme vous pouvez le voir dans la capture d'écran ci-dessus, le widget que nous souhaitons personnaliser a widget-2 classe ajoutée par WordPress. Maintenant, allez à la feuille de style de votre thème et ajoutez vos règles de style personnalisées.

 .widget-2 background-color: # 858585; couleur: #FFF;  .widget-2 .widget-title font-weight: gras;  

C’est tout, nous espérons que cet article vous a aidé à ajouter des styles personnalisés aux widgets WordPress. Jouez avec le CSS et expérimentez différentes couleurs. Utilisez les tests fractionnés A / B pour déterminer les styles personnalisés les mieux adaptés à votre site..

Si vous souhaitez également mettre en évidence votre widget de formulaire d’inscription dans la barre latérale, essayez OptinMonster, car il propose plusieurs conceptions, des tests A / B, et bien plus encore..

Si vous avez aimé cet article, abonnez-vous à nos tutoriels vidéo sur la chaîne YouTube pour WordPress. Vous pouvez aussi nous trouver sur Twitter et Google+.