Faire des personnalisation avec une prévisualisation en temps réel sur votre blog est beaucoup plus facile, et beaucoup plus satisfaisant, lorsque vous avez la possibilité de voir les différents changement aussitôt que vous les effectuez. La meilleure façon de faire des modifications applicables en temps réel c’est bien sûr en utilisant un plugin.
La personnalisation CSS est une fonctionnalité proposée par plusieurs plugins sur WordPress.org. Si vous recherchez un plugin qui génère un stylesheet (code CSS), vous avez plusieurs choix qui s’offrent à vous. Mais, s’il y a beaucoup de plugins que vous pouvez utiliser pour créer un code CSS personnalisé, il y a très peu d’options qui proposent l’édition en temps réel d’un code CSS.
Alors après avoir exploré le répertoire de plugins pour rechercher une solution à cette limite, j’ai réussi à trouver quelques perles rares qui méritent que l’on leur accorde notre attention.
Mais avant, si vous n’avez jamais installé WordPress découvrez Comment installer un blog WordPress en 7 étapes et Comment rechercher, installer et activer un thème WordPress sur votre blog
Ensuite revenons vers ce pourquoi nous sommes là.
1. Yellow Pencil : Visual CSS Style Editor
Yellow Pencil est un éditeur visuel de style que vous pouvez utiliser avec n’importe quel thème pour personnaliser votre site Web en quelques minutes (polices, couleurs, animations et plus…).
Ce plugin WordPress premium va créer des styles CSS en arrière-plan pendant que vous jouez avec les couleurs comme s’il s’agissait d’un jeu. Il a été conçu aussi bien pour les débutants que pour les utilisateurs expérimentés.
Découvrez aussi nos 5 plugins WordPress pour afficher des notifications
Aucune connaissance en codage n’est requise. Toutefois, le plugin WordPress dispose d’un bon éditeur de CSS pour ceux qui aiment coder. Vous pouvez coder en live avec cet éditeur et personnaliser votre CSS.
Télécharger | Démo | Hébergement Web
2. Easy Custom JS and CSS
Ce plugin WordPress premium est un éditeur puissant de code CSS et Javascript qui vous permet d’ajouter ces derniers sur n’importe quelle section de votre site web. Il vous permet de garder vos personnalisations même après une importante mise à jour de votre thème WordPress. 
Vous avez la possibilité de limiter le champ d’utilisation de votre code personnalisé. Par exemple, vous pouvez utiliser votre code uniquement pour un article ayant le format vidéo.
Consultez notre articles sur Comment exiger l’acceptation des termes d’utilisation sur WordPress
Ou encore vous pouvez limiter votre code à un thème WordPress spécifique; Ce qui est pratique si vous changez couramment de thèmes pour votre blog WordPress.
Télécharger | Démo | Hébergement Web
3. Custom JS and CSS for Gutenberg
Le plugin WordPress premium Custom JS and CSS for Gutenberg vous permettra d’ajouter un nombre illimité de styles personnalisés à l’éditeur WYSIWYG pour vos articles et pages WordPress. Il est entièrement compatible avec la version Gutenberg de WordPress.
Vous pourrez simplement créer un nouveau style avec un éditeur de CSS facile à utiliser. Ce plugin WordPress étend les fonctionnalités des champs personnalisés de votre site web et vous donne la faculté de modifier vos champs personnalisés avec un module de personnalisation dynamique et puissant. et la fonctionnalité de prévisualisation en temps réel de ce plugin WordPress le rend très confortable et convivial.
Télécharger | Démo | Hébergement Web
4. Advanced CSS Editor
La compagnie de produits WordPress ThemeIsle et Wunderkind a développé ce plugin. Après avoir installé et activé ce dernier, accédez à l'emplacement suivant « Apparence > Personnalisation » pour accéder au tableau de bord et recherchez « Advanced CSS Editor » dans le menu. Il s’affichera tout en haut de la liste des éléments du menu du Customizer. 
Pour modifier un code CSS, il vous suffira tout simplement d’ajouter un sélecteur et la règle qui s’y applique dans la zone de texte lorsque vous cliquez sur le menu « Advanced CSS Editor« .
Consultez aussi Comment améliorer les pages de mauvaise qualité de votre blog
Les règles CSS peuvent être écrites pour s’appliquer généralement ou pour cibler un élément en particulier sur des appareils précis (ordinateur, téléphone, tablette, etc). Aussitôt que les règles sont écrites, le Customizer affichera une prévisualisation avec les modifications qui ont été effectuées.
Télécharger | Démo | Hébergement Web
5. SiteOrigin CSS
C’est de loin le plugin WordPress qui propose le plus d’options dans cette liste. Le plus étonnant avec ce dernier, c’est qu’il est gratuit. Ce plugin WordPress est le seul que l’on ne retrouve pas dans le customizer.
Après avoir installé et activé le plugin, vous devez accéder à l'emplacement suivant « Apparence > CSS personnalisé » pour accéder à l’édition CSS du plugin. Sur cette page, vous pouvez voir un éditeur de texte qui ne propose pas de prévisualisation en temps réel.
Lire aussi notre article sur les 10 plugins WordPress pour booster les ventes de votre site web
Pour accéder à cette dernière, vous devez cliquer sur l’un des deux boutons qui s’affichent sur la gauche, juste au-dessus de l’éditeur. Le bouton avec une icône en forme d’œil affichera un éditeur visuel de code CSS que les amateurs apprécieront. L’icone avec les flèches d’extensions affichera un éditeur de texte qui impliquera une maîtrise des codes CSS.
Télécharger | Démo | Hébergement Web
Autres ressources recommandées
Nous vous invitons aussi à consulter les ressources ci-dessous pour aller plus loin dans la prise en main et le contrôle de votre site web et blog.
- 7 plugins WordPress pour optimiser le référencement des images de votre site web
- Comment trouver un sponsor et monétiser votre blog ?
- Comment supprimer la chaîne de caractères v=xxx des URLs WordPress
- Comment ajouter le défilement infini sur un blog WordPress
Conclusion
Voila ! C’est tout pour cette liste de plugins WordPress premium qui vous aideront à éditer de manière visuelle le CSS sur votre blog. Si vous avez des commentaires ou des suggestions, n’hésitez pas à nous en faire part dans la section réservée.
Cependant, vous pourrez aussi consulter nos ressources, si vous avez besoin de plus d’éléments pour mener à bien vos projets de création de sites internet, en consultant notre guide sur la création de blog WordPress ou celui sur Divi : le meilleur thème WordPress de tous les temps.
Nous vous invitons grandement à le partager sur vos réseaux sociaux préférés.
…