Sommaire
Vous voulez que vos widgets se distinguent les uns des autres ? Par défaut, la plupart des widgets auront un style presque identique, mais chaque widget est unique. Chaque widget sert son propre objectif et ils ne sont pas tous égaux. Vous pouvez personnaliser les widgets dans WordPress pour qu’ils se distinguent les uns des autres en utilisant des styles CSS.
Par exemple, vous pouvez avoir un widget d’abonnement au courrier électronique et un autre widget sur votre barre latérale. Le nombre d’abonnés est l’un des éléments les plus importants pour les nouveaux sites web et faire en sorte que ce widget se démarque peut contribuer à attirer l’attention d’un visiteur. Aujourd’hui, je vais vous montrer comment personnaliser les styles de widgets dans WordPress en utilisant le plugin Widget CSS Classes.
Pourquoi personnaliser les widgets dans WordPress
Essayer de distinguer votre contenu de celui de vos concurrents est très similaire à essayer de distinguer vos widgets les uns des autres. Pensez-y, une barre latérale typique comporte généralement quatre widgets ou plus et ils sont tous en concurrence pour le même visiteur sur la page. Maintenant, réfléchissez à l’importance de chaque widget dans la barre latérale. Il y a de fortes chances pour que vous puissiez lister vos widgets du plus important au moins important.
Si vous pouvez faire cela, vous voulez probablement que votre widget le plus important se démarque des autres. L’ajout de styles à vos widgets vous aidera à y parvenir. Cela peut aller de la modification de la couleur de fond à l’ajout d’images de fond. Le style dans WordPress avec CSS offre un grand nombre de possibilités et d’options.
Comment personnaliser les styles de widgets dans WordPress
Aujourd’hui, je vais démontrer comment personnaliser les styles de widgets dans WordPress en utilisant le plugin Widget CSS Classes. Ce plugin simplifie l’ajout de styles CSS à chaque widget individuel de votre site web. Bien sûr, vous n’avez pas besoin d’utiliser un plugin pour cela, mais ce plugin simplifiera le processus pour les débutants. Chaque widget aura la possibilité de créer une classe CSS qui n’aura de style que pour ce widget spécifique.
Installation des classes CSS de widgets
Commencez par cliquer sur Plugins et sélectionnez l’option Add New dans le panneau d’administration de gauche.
Recherchez Widget CSS Classes dans la zone de recherche disponible. Vous obtiendrez ainsi des plugins supplémentaires qui pourraient vous être utiles.
Faites défiler vers le bas jusqu’à ce que vous trouviez le plugin Widget CSS Classes et cliquez sur le bouton “Installer maintenant” et activez le plugin pour l’utiliser.
Dans le panneau d’administration de gauche, cliquez sur Apparence et sélectionnez l’option Widgets. La page des widgets s’affichera alors.
Utilisation des classes CSS de widgets
Ce plugin est extrêmement simple à utiliser. Il n’y a pas de paramètres à modifier pour le plugin. Chaque widget aura désormais une boîte de classes CSS en bas de celui-ci pour que vous puissiez y ajouter directement un nom de classe. Ce plugin vous demandera toujours de créer du code ou de copier du code et de le modifier pour votre site web.
Avant de commencer, il est très important de comprendre la différence entre se démarquer d’une bonne manière et être une horreur. Disons que vous avez deux gadgets sur votre côté. Si vous utilisez un fond bleu sur votre site web, donnez au widget une couleur ou une bordure différente autour de laquelle il se distinguera à coup sûr. En même temps, vous pourriez le faire ressortir vraiment, dans le mauvais sens, si vos couleurs ne vont pas bien ensemble. N’oubliez pas qu’il doit être beau et se distinguer des autres.
Développez n’importe lequel de vos widgets et en bas, vous verrez la boîte des classes CSS.
Vous pouvez ajouter le nom de la classe CSS dans cette boîte et utiliser ce nom pour styliser ce widget particulier en ajoutant le code dans la feuille de style. Cela n’affectera aucun autre widget, ce qui est une bonne et une mauvaise chose. Cela signifie que vous devrez appliquer ce design à chaque widget individuellement, mais cela vous donne la liberté de modifier un widget sans les affecter tous.
Voici un exemple de code CSS que vous pouvez ajouter pour changer la couleur de votre fond :
Votre_nom_de_classe_CSS {
background: #800000 ;
couleur:#FFF ;
Quel que soit le nom que vous avez saisi dans la zone de texte Classes CSS, il remplacera l’emplacement “Votre_nom_de_classe_CSS”. Vous pouvez modifier la couleur de fond en changeant le numéro de la couleur. Si vous ne savez pas comment trouver des numéros de couleur hexadécimaux pour le CSS, cochez cette case. L’option de couleur modifiera la couleur de la police utilisée.
Il existe sur Internet des tonnes de modèles CSS préfabriqués à utiliser et à modifier pour votre site web.
Assurez-vous que votre site web est bien conçu
Il est important d’essayer de se démarquer, mais vous devez en même temps veiller à ce que votre site web ait un bon aspect. Choisir des couleurs mal assorties pour se démarquer aura un effet négatif sur votre site web. Faites en sorte qu’il se démarque, mais soyez élégant en même temps. Le design de votre site web est extrêmement important. Une mauvaise apparence peut faire croire à certains visiteurs que le contenu est également mauvais. La conception et la création de contenu sont deux choses très différentes, mais elles s’enrichissent l’une l’autre.
Pourquoi voulez-vous faire ressortir un widget ? Trouvez-vous le plugin utile ?
