Meilleurs plugins WordPress pour CSS Live Editor 2020

By | janvier 20, 2021

Formation WordPress

Personnaliser le design de votre site n'a jamais été aussi simple. En utilisant un plugin WordPress CSS live editor, vous pouvez désormais créer un site unique qui correspond à vos spécifications de conception particulières et reflète l'image de votre marque.

Jusqu'à tout récemment, l'utilisation de CSS pour modifier l'apparence de votre site était principalement laissée aux concepteurs Web. Cependant, il existe maintenant une gamme de plugins d'éditeur WordPress CSS live qui vous aident à personnaliser votre site. Certains nécessitent un peu de connaissances en codage, tandis que d'autres n'ont besoin d'aucune expérience de codage. Et tous vous permettent de travailler sur le front-end de votre site réel en temps réel.

Dans cet article, nous verrons ce qu'est exactement un plugin d'éditeur CSS live, quels plugins d'éditeur live CSS WordPress sont disponibles et ce qu'il faut rechercher lors du choix d'un.

Qu'est-ce qu'un plugin WordPress CSS Live Editor?

Un plugin WordPress CSS live editor vous permet de personnaliser la conception de votre thème. Cependant, différent de l'édition directe des fichiers CSS ou de l'utilisation d'un plugin CSS standard, un plugin WordPress CSS live editor vous permet de travailler sur le front-end de votre site. Cela signifie que vous pouvez regarder vos modifications appliquées en temps réel, au fur et à mesure que vous les effectuez.

Plugin d'éditeur WordPress CSS en direct

L'utilisation d'un plugin WordPress CSS live editor implique la saisie de code ou l'ajustement des commandes sur le front-end. Cela signifie que vous pouvez regarder vos modifications se produire pendant que vous tapez. De plus, travailler du côté du visiteur d'un site Web vous fait gagner du temps en basculant entre les onglets et en appuyant constamment sur l'actualisation.

Panneau de configuration des plugins WordPress CSS Live Editor

Les plugins WordPress CSS live editor qui ne vous obligent pas à modifier directement le CSS affichent un panneau de contrôle sur le front-end de votre site qui vous permet d'apporter des modifications à la conception de votre site via une interface visuelle. Cela fonctionne très simplement en pointant et en cliquant sur un élément de la page, puis en sélectionnant un nouveau paramètre parmi les options disponibles. Le choix de l’un des plugins WordPress de l’éditeur en direct CSS avec cette fonctionnalité est idéal pour ceux qui souhaitent personnaliser la conception de leur site mais ne savent pas comment écrire du CSS.

Quel que soit le type de plugin WordPress CSS Live Editor que vous utilisez, les résultats finaux sont essentiellement les mêmes. Vous obtenez de créer un design original et personnel pour votre site Web. Grâce au composant éditeur en direct, vous économisez non seulement du temps et des efforts, mais vous pouvez également apprécier le processus.

Que rechercher dans un plugin WordPress CSS Live Editor

Ce que vous recherchez dans un plugin d'éditeur CSS en direct dépendra beaucoup de votre niveau de connaissances CSS ou de votre expérience de codage.

Si vous êtes un non-codeur, ne vous inquiétez pas, certains plugins d'éditeur CSS live ont été créés pour être utilisés par les débutants. Cependant, vous devrez choisir un plugin d'éditeur en direct avec un panneau de contrôle, qui vous permet de simplement pointer et cliquer pour apporter des modifications. Cependant, il vaut la peine de vérifier exactement quels éléments vous pouvez personnaliser, car chaque plugin est différent.

Les développeurs plus expérimentés pourraient vouloir un plugin qui vous permet de saisir ou de modifier le code vous-même. Une bonne option est celle qui vous aidera à coder et à mettre en évidence les erreurs. Les autres fonctionnalités du plugin à rechercher, quelle que soit votre expérience, incluent:

  • Fonctionne-t-il avec tous les thèmes et plugins WordPress?
  • Offre-t-il des conceptions préfabriquées?
  • Pouvez-vous travailler en mode brouillon avant de publier les modifications?
  • Enregistre-t-il les modifications incrémentielles au fur et à mesure, afin que vous puissiez annuler votre travail si nécessaire?
  • Fournit-il une documentation approfondie, des didacticiels et une assistance?

Alors maintenant que vous savez ce qu'il faut considérer avant de faire un choix, jetons un coup d'œil aux différents plugins d'éditeur WordPress CSS live disponibles.

Avertissement: WPExplorer est un affilié pour un ou plusieurs produits listés ci-dessous. Si vous cliquez sur un lien et effectuez un achat, nous pouvons verser une commission.

1. CSS Hero

Héros CSS

CSS Hero est un plugin d'édition de thème WordPress en direct premium, qui vous permet de personnaliser presque tous les aspects de la conception de votre thème. Pour ce faire, il utilise une interface pointer-cliquer intuitive qui fonctionne sur le front-end du site, sans que vous ayez à entrer une ligne de CSS si vous le souhaitez. Par conséquent, même si vous n'avez aucune connaissance en codage, vous pouvez toujours utiliser ce plugin pour modifier la conception de votre site.

CSS Hero a quelques fonctionnalités particulièrement remarquables. Tout d'abord, il enregistre toutes vos modifications, vous pouvez donc annuler tout travail que vous avez effectué ou revenir à un point particulier de votre flux de travail. Vous n'avez plus à craindre de vous tromper et de casser votre site.

Deuxièmement, CSS Hero fournit des «styles prêts à l'emploi» et des «skins de thème». Cela vous donne des centaines de conceptions et 29 mises en page prédéfinies parmi lesquelles choisir comme points de départ pour votre site. Ainsi, même ceux d'entre nous sans inspiration ni vision en matière de design peuvent créer un site dont ils peuvent être fiers.

CSS Hero est l'un des plugins d'éditeur en direct WordPress les plus impressionnants, conçu pour vous permettre de personnaliser facilement la conception de votre site, que vous soyez un débutant en codage ou un développeur Web. Avant d'acheter CSS Hero pour seulement 19 $, il vaut la peine de vérifier si ce plugin fonctionnera avec votre thème. CSS Hero fonctionne sur un certain nombre de thèmes prêts pour les héros, et ils vous fournissent une description, un pourcentage de compatibilité (fyi Total obtient la note la plus élevée de 99% – bien plus élevée que les autres thèmes premium les plus vendus) et un site de test en direct pour chacun. Vous pouvez également essayer CSSHero RocketMode pour le rendre accessible à votre thème actuel.

2. Crayon jaune

Crayon jaune

Yellow Pencil est un éditeur de style CSS visuel WordPress et un autre plugin qui ne nécessite aucun codage. Cela dit, il existe un éditeur CSS intégré pour ceux qui aiment modifier leurs feuilles de style à la main. Ce plugin fonctionne à 100% sur le front-end, vous permettant de voir et de travailler sur votre site en temps réel. Il a été créé pour vous permettre de personnaliser n'importe quel élément sur n'importe quel thème ou plugin, et vous permet de modifier votre thème en quelques minutes, ou de redéfinir la conception entière de votre site Web si vous le souhaitez.

Le crayon jaune vous permet de mettre facilement en évidence des sélecteurs CSS individuels, ce qui rend la modification de votre thème rapide et sans douleur. Ce plugin propose plus de 300 arrière-plans, plus de 600 familles de polices et plus de 50 animations au choix, vous permettant de personnaliser votre thème en fonction de l'image de votre marque. Yellow Pages est également fourni avec une documentation et un support complets pour ceux qui n'ont jamais utilisé les plugins d'éditeur CSS en direct WordPress auparavant.

Yellow Pencil vous coûtera 23 $ et est compatible avec tous les thèmes et plugins WordPress. Encore une fois, une excellente option pour les débutants et les concepteurs de sites Web expérimentés.

3. CSS personnalisé TJ

Plugin CSS personnalisé TJ

TJ Custom CSS de Theme Junkie est un plugin WordPress gratuit qui vous permettra de personnaliser votre site via une interface frontale. Ce plugin a été conçu en pensant aux codeurs, et ce n’est pas un plugin à recommander à ceux qui n’ont pas confiance en CSS.

Comme beaucoup de ces plugins, TJ Custom CSS utilise un gestionnaire CSS pour ajouter le CSS personnalisé à votre site, en remplaçant tout thème ou style par défaut. Cela peut être consulté et travaillé à partir de votre tableau de bord.

Cependant, TJ Custom CSS vous permet également de prévisualiser vos modifications en temps réel. En utilisant Live Customizer, vous pouvez voir l'effet de vos modifications lorsque vous ajoutez le CSS personnalisé. Cela peut vous faire gagner beaucoup de temps, car vous n'aurez plus à enregistrer votre travail, à changer d'onglet de navigateur et à actualiser les pages.

TJ Custom est un plugin très simple qui vous aidera à créer un site unique exactement selon vos besoins. Si vous aimez bricoler du code et avez l'expérience de la personnalisation de votre thème à l'aide de CSS, alors cela pourrait être le plugin parfait pour vous.

4. SiteOrigin CSS

Éditeur CSS SiteOrigin

SiteOrigin CSS est un plugin gratuit avancé d'éditeur de live CSS WordPress de SiteOrigin. Selon les rapports, compatible avec tous les thèmes WordPress, ce plugin riche en fonctionnalités propose une sélection d'outils pour répondre aux besoins de tous ses utilisateurs, quelle que soit leur expérience de codage.

Pour les débutants, SiteOrigin CSS fournit un éditeur visuel. Il s'agit d'un simple ensemble de commandes qui vous permettent de choisir facilement des styles, des couleurs et d'autres paramètres. Ne nécessitant aucune compétence en matière de codage, vous pouvez apporter des modifications à la conception de votre site en quelques clics.

Pour ceux qui ont une certaine expérience de l'édition manuelle de CSS et qui ont besoin d'en faire plus, SiteOrigin est livré avec un inspecteur dynamique. Cela vous aide à trouver le sélecteur approprié à utiliser pour cibler un élément spécifique que vous souhaitez personnaliser. Cela peut souvent être la partie la plus difficile de l'édition du CSS existant, c'est donc un excellent coup de main pour ceux qui apprennent encore.

Pour les codeurs les plus avancés, le puissant éditeur CSS du plug-in SiteOrigin dispose d'une saisie semi-automatique pour les sélecteurs et les attributs CSS. Cela vous aidera également à trouver des problèmes dans votre CSS avant de le publier.

Quelles que soient les fonctionnalités de ce plugin que vous utilisez pour personnaliser votre site WordPress, tout le travail se déroule sur le front-end de votre site en temps réel, vous pouvez donc suivre vos modifications au fur et à mesure que vous les apportez.

5. Microthemer

Microtherme

Microthemer est un plugin d'éditeur CSS WordPress premium intuitif et puissant. Il peut personnaliser l'apparence de n'importe quel thème ou plugin WordPress et il est suffisamment léger pour éviter de ralentir votre site.

Microthemer propose des options pour les débutants et les professionnels. Les non-codeurs peuvent modifier des éléments tels que les couleurs, les polices, les images d'arrière-plan et les mises en page du site, pour n'en nommer que quelques-uns. Les développeurs peuvent travailler en mode d'aperçu en direct, en codant en CSS, SCSS et JavaScript, à la main.

Une caractéristique clé de Microthemer est qu'il vous permet de travailler en mode brouillon. Vous pouvez essayer un nouveau design pour votre site ou passer du temps à essayer diverses options de style sans que cela n'affecte l'expérience de votre public sur votre site. Vous pouvez ensuite publier toutes vos modifications en une seule fois une fois que vous êtes satisfait du projet final.

Microthemer est livré avec des tutoriels, une documentation et des forums de support extrêmement complets, vous aidant à tirer le meilleur parti de ce plugin. Vous pouvez acheter Microthemer pour un montant unique de 45 $, qui comprend des mises à niveau gratuites à vie.

Bonus: Ultimate Tweaker

Ultimate Tweaker pour WordPress

Vous souhaitez peut-être modifier non seulement l'apparence frontale de votre site Web, mais également certains des rôles utilisateur, la page de connexion ou d'autres fonctionnalités de WordPress. C'est là que l'Ultimate Tweaker pour WordPress peut être utile. Le plugin est compatible avec les versions actuelles de WordPress. La plupart des navigateurs activés par JavaScript les feront fonctionner sans problème.

Ultimate Tweaker contient plus de 260 hacks et ajustements différents qui permettent aux utilisateurs (sans php ni connaissances en programmation) de configurer et de personnaliser WordPress. Malgré le grand nombre de fonctionnalités, le plugin est très rapide et optimisé pour ne charger que les tweaks utilisés (chargement paresseux sans utilisation de la mémoire).

Le plugin prend également en charge la plupart des thèmes, logos et icônes, et protège le contenu (pas de menu contextuel, pas de sélection et pas de glissement). La fonction HTML Minifier aide les utilisateurs à supprimer les commentaires, à réduire le HTML et à créer des URL relatives.

Parmi les caractéristiques notables de ce plugin, on trouve une interface d'administration légère avec enregistrement automatique, HTML Minifier et générateur de liens relatifs, option pour masquer les méta-boîtes sur les types de pages personnalisées, gestionnaire de rôles, mode de réglage indépendant du rôle, chargement 2X plus rapide / chargement paresseux, masquage et le rôle d'administrateur «Ultimate Tweaker».


Dernières pensées

Tous les plugins d'éditeur live CSS WordPress mentionnés ici sont des options impressionnantes pour vous aider à personnaliser la conception de votre site. Quel que soit le plugin que vous choisissez, assurez-vous de lire la documentation fournie afin de pouvoir en tirer le meilleur parti. Plus vous comprendrez comment utiliser un éditeur en direct, meilleurs seront les designs que vous produirez.

Utilisez-vous un plugin d'éditeur CSS live et si oui lequel? Le recommanderiez-vous? Veuillez partager vos conseils ou observations utiles dans les commentaires.

[ad_2]