skip to Main Content

5 plugins WordPress pour éditer visuellement le CSS

Divi : le thème WordPress le plus facile à utiliser

Divi : Le meilleur thème WordPress de tous les temps !

Avec plus de 600.000 téléchargements, Divi est le thème WordPress le plus populaire au monde. Il est complet, facile à utiliser et livré avec plus de 62 templates gratuits. [ Recommandé ]

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.

Créez Facilement votre site Web avec Elementor

Elementor vous permet de créer facilement n'importe quel design de site Web avec un look professionnel. Arrêtez de payer cher pour ce que vous pouvez faire vous-même. [ Gratuit ]

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.

Cherchez-vous les meilleurs thèmes et plugins WordPress ?

Téléchargez les meilleurs plugins et thèmes WordPress sur Envato et créez facilement votre site web. Déjà plus de 49.720.000 de téléchargements. [EXCLUSIF]

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.

Créez Facilement votre Boutique en ligne

Téléchargez gratuitement WooCommerce, le meilleurs plugins e-commerce pour vendre vos produits physiques et numériques sur WordPress. [Recommandé]

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.   

… 

Cet article comporte 0 commentaires

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.

Back To Top
5 Partages
Partagez2
Tweetez
Enregistrer3