Le thème est installé, le contenu est en place, et le site ressemble… à rien. Le personnalisateur intégré de WordPress couvre les scénarios de base: couleur de fond, logo, widgets de la barre latérale. Mais dès que vous voulez décaler un titre de 10 pixels vers la gauche, changer la police d’un bouton spécifique ou ajouter un fond en dégradé à un seul bloc, les contrôles standard montrent leurs limites. Et personne n’a envie de plonger dans le fichier style.css après chaque retouche mineure.

Yellow Pencil résout ce problème de front. C’est un éditeur CSS visuel: vous cliquez sur un élément de la page et modifiez immédiatement les polices, les couleurs, les espacements, les bordures, les animations, sans écrire une seule ligne de code. Le plugin génère du CSS propre à la volée et laisse vos fichiers de thème intacts.

À la fin de ce guide, vous ajusterez vos designs plus vite qu’un développeur front-end n’ouvre l’inspecteur de code, et sans aucun risque de casser quelque chose.

💡 Aperçu rapide:

• Installez Yellow Pencil depuis le répertoire WordPress.org (version gratuite) ou téléchargez la version Pro depuis le site officiel
• Activez le plugin et ouvrez l’éditeur visuel via le bouton «Let’s Start» sur l’écran d’accueil
• Choisissez un type de personnalisation: global (à l’échelle du site), page unique ou modèle d’article
• Cliquez sur les éléments de la page et ajustez leur apparence via le panneau de droite: polices, couleur, bordures, arrière-plan, animation
• Sauvegardez vos modifications et vérifiez la réactivité à l’aide de l’émulateur tablette et mobile intégré

Qu’est-ce que Yellow Pencil et pourquoi vous en avez besoin

Yellow Pencil est un plugin d’édition CSS visuelle pour WordPress. Une distinction importante d’emblée: il ne s’agit pas d’un constructeur de pages comme Elementor ou Gutenberg. Le plugin n’ajoute pas de nouveaux blocs; il met en forme ceux qui existent déjà. Ceux que vous avez créés avec n’importe quel constructeur ou ceux qui sont fournis avec votre thème.

Son cœur est un inspecteur d’éléments: cliquez sur un titre, un bouton ou une image, et vous accédez instantanément à plus de 60 propriétés CSS dans le panneau de droite. Déplacez un curseur, et la page change en temps réel. Fini les cycles «modifier le code → rafraîchir le navigateur → ça ne va pas → recommencer».

Le plugin fonctionne avec n’importe quel thème WordPress et ne modifie pas ses fichiers. Toutes les modifications sont stockées dans une feuille de style séparée et chargées dynamiquement. Le thème reste intact, les changements peuvent être annulés, exportés sous forme de CSS prêt à l’emploi, ou supprimés en même temps que le plugin.

À qui cela s’adresse-t-il? Principalement à ceux qui n’écrivent pas de CSS à la main mais souhaitent peaufiner le design visuellement. Cependant, les développeurs expérimentés apprécieront aussi la rapidité: au lieu de modifier les fichiers source et de recharger, un clic de souris donne un résultat instantané. Les freelances et les agences utilisent Yellow Pencil pour personnaliser rapidement les sites de leurs clients sans risquer d’endommager le thème de quelqu’un d’autre.

Fonctionnalités clés de Yellow Pencil

Les fonctionnalités sont nombreuses, mais elles tournent toutes autour d’une même idée: prenez n’importe quel élément de la page et modifiez son apparence via une interface visuelle. Voici les fonctionnalités clés de la version Pro (v7.6.7, à jour en 2026):

• Inspecteur d’éléments: cliquer sur n’importe quel bloc, texte ou image ouvre un panneau avec toutes les propriétés CSS disponibles
• Glisser-déposer visuel: modifiez la position des éléments à la souris, sans toucher au code
• Redimensionnement: faites glisser les bords du cadre bleu autour d’un élément, et la taille change visuellement
• Plus de 900 polices Google: connectez-les en un clic depuis la bibliothèque intégrée du plugin
• Plus de 300 motifs d’arrière-plan: ainsi que des dégradés, des couleurs unies et des images personnalisées
• Plus de 50 animations: des animations CSS prêtes à l’emploi avec un gestionnaire visuel et un générateur d’images clés personnalisé
• Éditeur de code CSS: pour ceux qui veulent écrire les styles manuellement, avec autocomplétion et vérification des erreurs
• Mode responsive: édition séparée des styles pour ordinateur, tablette et mobile

Le plugin génère le CSS dynamiquement et le charge sous forme de feuille de style séparée. Les performances du site ne sont pas affectées; exactement une feuille de style est ajoutée, rien de plus.

Installer Yellow Pencil

L’installation n’est pas différente de celle de n’importe quel autre plugin WordPress. Commencez par obtenir le fichier: la version gratuite est disponible dans le répertoire WordPress.org, tandis que la version Pro s’achète sur le site officiel du développeur (licence par site, mises à jour à vie). Certains thèmes premium incluent Yellow Pencil Pro dans leur offre groupée.

Ouvrez le tableau de bord WordPress et allez dans «Extensions» → «Ajouter».

Cliquez sur «Upload Plugin» → «Choose File.»

Sélectionnez l’archive ZIP téléchargée waspthemes-yellow-pencil.zip et cliquez sur «Install Now.»

Une fois l’installation terminée, cliquez sur «Activate.» Pour la version Pro, saisissez votre clé de licence (elle vous parviendra par email après l’achat). L’activation débloque les mises à jour et l’ensemble des fonctionnalités Pro.

La page d’accueil de Yellow Pencil s’affiche à l’écran. La section «Resources» contient la documentation, les guides et les liens d’assistance.

Cliquez sur «Let’s Start»: vous accédez immédiatement à l’éditeur visuel sur la page en cours du site.

Interface: trois zones d’édition

L’interface de Yellow Pencil se divise en trois zones. À gauche, une barre d’outils étroite avec des icônes: inspecteur d’éléments, actions annuler et rétablir, mode plein écran, outil de responsive et règle de mesure. Le panneau est minimaliste et ne détourne pas l’attention de la page que vous modifiez.

À droite se trouve le panneau d’édition. Lorsqu’aucun élément n’est sélectionné, il affiche trois types de personnalisation disponibles.

Quand vous cliquez sur un élément de la page, le panneau bascule sur les propriétés de style: polices, couleurs, espacements, bordures.

Un cadre bleu avec des poignées de redimensionnement apparaît autour de l’élément sélectionné. Vous pouvez déplacer l’élément par glisser-déposer et le redimensionner en tirant sur les bords du cadre.

La zone centrale est occupée par la page elle-même: vous la voyez comme vos visiteurs la verront, et vous la modifiez en temps réel.

Outils principaux

Le panneau de gauche comporte trois outils que vous utiliserez constamment:

• Inspecteur d’éléments: sélectionne n’importe quel élément visuel de la page pour le personnaliser. Cliquez sur un titre, un bouton ou un bloc, et toutes ses propriétés CSS apparaissent dans le panneau de droite.
• Annuler et rétablir: vous testez des couleurs et des polices? Cliquez sur «annuler» si vous êtes allé trop loin. L’historique des modifications est conservé jusqu’à ce que vous quittiez l’éditeur.
• Mode plein écran: masque l’administration WordPress pour ne laisser que la page et les panneaux d’édition. Pratique pour un positionnement précis.

Sur le panneau de droite, tout en haut, trois boutons essentiels:

• Preview: affiche la page sans l’interface d’édition. Cela vous permet de voir le résultat avec le regard d’un visiteur.
• Reset changes: annule toutes les modifications non sauvegardées. Utile quand vous avez multiplié les essais et perdu le fil.
• Save: applique les modifications. Après la sauvegarde, les modifications sont visibles pour tous les visiteurs du site.

Trois modes de personnalisation: quand utiliser chacun

Avant de commencer à modifier, Yellow Pencil vous demande de choisir la portée de vos changements. Le panneau d'édition (lorsque rien n'est sélectionné) affiche trois options:

• Personnalisation globale: les modifications s'appliquent à toutes les pages du site. Changez la couleur de tous les titres H2, et ils changent partout (page d'accueil, blog, page de contact).
• Personnalisation d'une page unique: les modifications ne s'appliquent qu'à la page que vous êtes en train d'éditer. Idéal pour les pages d'atterrissage et les sections uniques.
• Personnalisation par modèle: les modifications s'appliquent à toutes les publications du même type. Vous voulez que toutes les pages produit aient le même aspect? Ce mode est fait pour vous.

Le mode actif est affiché en haut du panneau d'édition. Vérifiez toujours que vous modifiez le bon type avant d'enregistrer: confondre personnalisation globale et personnalisation de page est facile, et les conséquences apparaissent immédiatement sur l'ensemble du site.

Ce que vous pouvez faire avec Yellow Pencil: visite guidée pratique

Voici un aperçu des principales fonctionnalités avec des exemples concrets. Chaque opération s’effectue en cliquant sur un élément et en sélectionnant la section appropriée dans le panneau de droite.

Typographie

Le texte est la première chose que les utilisateurs retouchent après avoir installé l’extension. Cliquez sur n’importe quel bloc de texte et sélectionnez «Texte» dans le panneau d’édition. Toutes les propriétés de base sont disponibles: changement de police (plus de 900 options Google Fonts en version Pro), taille, interlignage, espacement des lettres et des mots. La couleur du texte se choisit parmi les palettes intégrées (material et flat) ou se définit à l’aide d’une pipette.

Le principal atout est la prévisualisation en direct. Vous déplacez le curseur de taille de police et voyez immédiatement comment la mise en page s’ajuste. C’est bien plus rapide que le cycle «modifier le CSS → rafraîchir la page → ça ne convient pas → recommencer».

Bordures

Une bordure autour d’un bloc est un moyen simple de mettre en valeur une carte, une citation ou un formulaire d’inscription. Sélectionnez l’élément et allez dans l’onglet «Bordure» du panneau d’édition. Quatre styles sont disponibles: plein, tirets, pointillés et masqué.

Une fonctionnalité que la plupart des concurrents n’ont pas: chacun des quatre côtés de la bordure peut être configuré séparément. Bordure supérieure rouge en tirets, gauche bleue en trait plein, droite verte, inférieure absente. La largeur, la couleur et le style de chaque côté se règlent indépendamment, ce qui vous offre une liberté de conception sans écrire une seule ligne de code.

Arrière-plan

L’arrière-plan d’un élément se configure dans l’onglet «Arrière-plan». Trois options sont disponibles: couleur unie (pipette ou palette), l’un des plus de 300 motifs intégrés et un dégradé CSS (linéaire ou radial). Vous pouvez télécharger une image personnalisée et configurer son positionnement, son comportement de répétition et son comportement au défilement.

Les motifs d’arrière-plan sont un détail appréciable qui fait gagner du temps. Au lieu de chercher des textures sur des banques d’images, vous choisissez un motif dans la bibliothèque, modifiez sa couleur et son opacité, et obtenez un fond de bloc soigné en quelques clics.

Animation

L’onglet «Animation» donne accès à plus de 50 animations CSS prêtes à l’emploi: fondu à l’ouverture, fondu à la fermeture, rebond, rotation, pulsation, etc. Vous sélectionnez un effet dans le gestionnaire visuel, définissez la durée et le délai, et voyez immédiatement l’élément prendre vie.

Pour les scénarios personnalisés, il existe un générateur d’animation (Pro): vous définissez les images clés dans l’éditeur visuel et l’extension génère le CSS @keyframes. Plusieurs animations peuvent s’exécuter simultanément pour un comportement d’élément complexe.

Taille et position

Modifier la taille d’un élément consiste littéralement à faire glisser ses bords. Cliquer sur un élément fait apparaître un cadre bleu avec des poignées aux coins et sur les côtés. Tirez une poignée et la taille change.

Changer la position est encore plus simple: saisissez l’élément avec votre souris et faites-le glisser là où vous le souhaitez.

Un bémol: le glisser-déposer peut nuire à l’adaptabilité. Après avoir déplacé des éléments, vérifiez toujours l’aspect de la page sur tablette et téléphone. Le panneau de gauche comporte un émulateur d’adaptabilité qui bascule la zone de prévisualisation entre ordinateur, tablette et smartphone. Si quelque chose s’est décalé, des styles distincts peuvent être définis pour chaque résolution.

Version gratuite vs Pro: que choisir

Les capacités des versions gratuite et Pro diffèrent sensiblement. La version gratuite fournit un ensemble de propriétés CSS de base: polices (sans Google Fonts), couleur du texte, espacements, bordures, ombres, positionnement. Cela suffit pour une personnalisation minimale du thème (déplacer un titre, changer la couleur d’un bouton, ajouter une bordure).

La version Pro débloque tout le reste: plus de 900 polices Google, couleur et images d’arrière-plan, animations avec un gestionnaire visuel, dégradés, motifs d’arrière-plan, contrôle de la largeur et de la hauteur, un éditeur CSS avec autocomplétion, personnalisation de la page de connexion WordPress et le générateur d’animation.

Pour un projet client ponctuel, la licence Pro est rentabilisée immédiatement, car elle vous fait gagner des heures de codage manuel. Pour un blog personnel, la version gratuite est souvent suffisante.

Prix

Yellow Pencil Pro est distribué sous licence payante depuis le site officiel du développeur. Le prix inclut les mises à jour de l’extension à vie et une période de support. La licence est valable pour un seul site; des clés distinctes doivent être achetées pour plusieurs projets.

La version gratuite est disponible sur la page de l’extension sur WordPress.org. L’installation est standard, directement depuis l’administration via «Extensions» → «Ajouter» → rechercher «Yellow Pencil».

Une présentation vidéo détaillée de l’interface et des techniques clés pour travailler avec l’extension (en anglais, visuelle et qui va à l’essentiel).

⁉️🤔 Foire aux questions

Yellow Pencil risque-t-il de casser mon thème?

Non. L’extension ne modifie pas les fichiers du thème et ne touche pas aux autres extensions. Toutes les modifications sont stockées séparément et chargées dynamiquement. En cas de problème, annulez les modifications avec le bouton «Réinitialiser les modifications» ou supprimez l’extension, et le thème retrouve son état d’origine.

Faut-il connaître le CSS pour travailler avec Yellow Pencil?

Non, c’est justement tout l’intérêt de l’extension. Vous cliquez sur un élément et modifiez ses propriétés visuellement: couleur, police, espacements, bordures, animation. Le CSS est généré automatiquement. Si vous connaissez le CSS, un éditeur de code intégré avec autocomplétion et coloration syntaxique est disponible, et vous pouvez écrire des styles manuellement en complément des modifications visuelles.

L’extension fonctionne-t-elle avec Gutenberg et Elementor?

Oui, Yellow Pencil est compatible avec tous les constructeurs de pages courants: Gutenberg, Elementor, Divi, Beaver Builder, WPBakery. L’extension met en forme les blocs prêts à l’emploi que vous créez dans le constructeur et n’entre pas en conflit avec leur balisage.

Puis-je personnaliser la page de connexion WordPress?

Oui, dans la version Pro. Allez dans «Apparence» → «YellowPencil Editor», sélectionnez «Page de connexion WordPress» comme cible et cliquez sur «Personnaliser». Vous modifiez le logo, l’arrière-plan, les boutons et les champs du formulaire exactement comme une page normale.

Que se passe-t-il après la suppression de l’extension?

Tous les styles appliqués disparaîtront et le site retrouvera le design par défaut du thème. Avant de supprimer, vous pouvez exporter le CSS via la fonction intégrée «Exporter la feuille de style» et le connecter manuellement en tant que thème enfant, afin que les styles soient conservés même sans l’extension.

Existe-t-il des alternatives?

Parmi les équivalents directs avec un éditeur CSS visuel, on trouve Microthemer (inspecteur d’éléments similaire) et CSS Hero (un peu plus simple, moins de propriétés). Les deux sont payants. Parmi les options gratuites, il n’existe que l’outil de personnalisation intégré de WordPress, mais il ne donne accès qu’à une infime partie des propriétés CSS proposées par Yellow Pencil.

Yellow Pencil vaut-il la peine pour personnaliser un thème

Si vous n’écrivez pas le CSS à la main et ne souhaitez pas passer des heures à modifier les fichiers du thème, Yellow Pencil est l’un des meilleurs outils du marché. Il ne remplace pas un constructeur de pages, mais il répond précisément à la frustration que rencontre tout propriétaire de site: «Je voudrais ajuster quelques détails, changer une couleur et une police, mais sans toucher au code.»

Pour les freelances et les petites agences, cela signifie un gain de temps sur les modifications courantes des sites clients. Pour les blogueurs, c’est un moyen de soigner l’aspect visuel sans faire appel à un développeur front-end. Pour les développeurs, cela permet un prototypage rapide des styles avant de les reporter dans un thème enfant.

La règle principale avec Yellow Pencil: vérifiez la réactivité après chaque série de modifications. L’émulateur intégré pour tablette et mobile donne une image fidèle, et les styles distincts par résolution vous permettent de corriger tout ce qui a bougé. Avec cette habitude, le plugin est rentabilisé dès le premier jour d’utilisation.