Il tema è installato, i contenuti sono al loro posto e il sito ha l’aspetto… di niente. Il personalizzatore integrato di WordPress copre gli scenari di base: colore di sfondo, logo, widget della sidebar. Ma nel momento in cui vuoi spostare un titolo di 10 pixel a sinistra, cambiare il font su un pulsante specifico o aggiungere uno sfondo sfumato a un singolo blocco, i controlli standard mostrano i loro limiti. E nessuno ha voglia di immergersi nel style.css dopo ogni piccola modifica.

Yellow Pencil risolve questo problema alla radice. È un editor CSS visuale: clicchi su un elemento della pagina e modifichi immediatamente font, colori, spaziatura, bordi, animazioni, senza scrivere una sola riga di codice. Il plugin genera CSS pulito al volo e lascia intatti i file del tema.

Alla fine di questa guida regolerai il design più velocemente di quanto uno sviluppatore front-end riesca ad aprire l’inspector del codice, e senza alcun rischio di rompere qualcosa.

💡 Panoramica rapida:

• Installa Yellow Pencil dalla directory di WordPress.org (gratuito) o scarica la versione Pro dal sito ufficiale
• Attiva il plugin e apri l’editor visuale usando il pulsante «Let’s Start» nella schermata di benvenuto
• Scegli un tipo di personalizzazione: globale (per tutto il sito), pagina singola o template di articolo
• Clicca sugli elementi nella pagina e regola il loro aspetto tramite il pannello di destra: font, colore, bordi, sfondo, animazione
• Salva le modifiche e verifica la responsività usando l’emulatore integrato per tablet e telefono

Cos’è Yellow Pencil e perché ti serve

Yellow Pencil è un plugin di editing CSS visuale per WordPress. Una distinzione importante da subito: non è un page builder come Elementor o Gutenberg. Il plugin non aggiunge nuovi blocchi; applica stili a quelli esistenti. Quelli che hai creato con qualsiasi builder o quelli forniti dal tuo tema.

Alla base c’è un inspector di elementi: clicca su un titolo, un pulsante o un’immagine e accedi immediatamente a oltre 60 proprietà CSS nel pannello di destra. Sposta un cursore e la pagina cambia in tempo reale. Basta con i cicli «modifica codice → aggiorna browser → non va bene → ripeti».

Il plugin funziona con qualsiasi tema WordPress e non ne modifica i file. Tutte le modifiche sono salvate in un foglio di stile separato e caricate dinamicamente. Il tema resta intatto, le modifiche possono essere annullate, esportate come CSS pronto all’uso o rimosse insieme al plugin.

A chi serve? Principalmente a chi non scrive CSS a mano ma vuole rifinire il design in modo visuale. Tuttavia, anche gli sviluppatori esperti ne apprezzeranno la velocità: invece di modificare i file sorgente e ricaricare, un clic del mouse produce risultati immediati. Freelance e agenzie usano Yellow Pencil per personalizzare rapidamente i siti dei clienti senza rischiare di danneggiare il tema di qualcun altro.

Funzionalità principali di Yellow Pencil

Le funzionalità sono molte, ma ruotano tutte attorno a un’unica idea: prendere qualsiasi elemento della pagina e modificarne l’aspetto attraverso un’interfaccia visuale. Di seguito le caratteristiche principali della versione Pro (v7.6.7, aggiornata al 2026):

• Inspector di elementi: cliccando su qualsiasi blocco, testo o immagine si apre un pannello con tutte le proprietà CSS disponibili
• Drag and drop visuale: modifica la posizione degli elementi con il mouse, senza toccare il codice
• Ridimensionamento: trascina i bordi della cornice blu attorno a un elemento e la dimensione cambia visivamente
• Oltre 900 Google Fonts: collegali con un clic dalla libreria integrata del plugin
• Oltre 300 pattern di sfondo: più gradienti, colori pieni e immagini personalizzate
• Oltre 50 animazioni: animazioni CSS pronte con un gestore visuale e generatore di keyframe personalizzati
• Editor di codice CSS: per chi vuole scrivere stili a mano, con autocompletamento e controllo degli errori
• Modalità responsive: modifica degli stili separata per desktop, tablet e telefono

Il plugin genera CSS dinamicamente e lo carica come un foglio di stile separato. Le prestazioni del sito non ne risentono; viene aggiunto esattamente un foglio di stile, niente di più.

Installare Yellow Pencil

L’installazione non è diversa da quella di qualsiasi altro plugin WordPress. Per prima cosa procurati il file: la versione gratuita è disponibile nella directory di WordPress.org, mentre la Pro si acquista dal sito ufficiale dello sviluppatore (licenza per sito singolo, aggiornamenti a vita). Alcuni temi premium includono Yellow Pencil Pro nel pacchetto.

Apri la bacheca di WordPress e vai su «Plugin» → «Aggiungi nuovo».

Clicca su "Carica plugin" → "Scegli file".

Seleziona l'archivio ZIP scaricato waspthemes-yellow-pencil.zip e clicca su "Installa ora".

Dopo l'installazione clicca su "Attiva". Per la versione Pro, inserisci la tua chiave di licenza (ti arriverà via email dopo l'acquisto). L'attivazione sblocca gli aggiornamenti e tutte le funzionalità Pro.

Apparirà la pagina di benvenuto di Yellow Pencil. La sezione "Risorse" contiene documentazione, guide e link al supporto.

Clicca su "Iniziamo" e accederai immediatamente all'editor visuale sulla pagina corrente del sito.

Interfaccia: tre zone dell'editor

L'interfaccia di Yellow Pencil è divisa in tre zone. A sinistra c'è una barra degli strumenti stretta con icone: ispettore elementi, azioni annulla e ripeti, modalità a schermo intero, strumento di responsività e righello di misurazione. Il pannello è minimalista e non distrae dalla pagina che stai modificando.

A destra si trova il pannello dell'editor. Quando nessun elemento è selezionato, mostra tre tipi di personalizzazione disponibili.

Quando clicchi su un elemento della pagina, il pannello passa alle proprietà di stile: font, colori, spaziatura, bordi.

Attorno all'elemento selezionato appare una cornice blu con maniglie di ridimensionamento. L'elemento può essere spostato trascinandolo e ridimensionato tirando i bordi della cornice.

La zona centrale è occupata dalla pagina stessa: la vedi come la vedranno i visitatori e la modifichi in tempo reale.

Strumenti principali

Il pannello di sinistra ha tre strumenti che userai costantemente:

• Ispettore elementi: seleziona qualsiasi elemento visivo sulla pagina per personalizzarlo. Clicca su un titolo, un pulsante o un blocco e tutte le sue proprietà CSS appariranno nel pannello di destra.
• Annulla e ripeti: stai sperimentando con colori e font? Clicca su "annulla" se hai esagerato. La cronologia delle modifiche viene conservata fino a quando non esci dall'editor.
• Modalità a schermo intero: nasconde l'amministrazione di WordPress, lasciando solo la pagina e i pannelli dell'editor. Utile per un posizionamento preciso.

Sul pannello di destra, in alto, ci sono tre pulsanti cruciali:

• Anteprima: mostra la pagina senza l'interfaccia dell'editor. Questo ti permette di vedere il risultato con gli occhi di un visitatore.
• Ripristina modifiche: annulla tutte le modifiche non salvate. Utile quando hai esagerato e perso il filo.
• Salva: applica le modifiche. Dopo il salvataggio, le modifiche sono visibili a tutti i visitatori del sito.

Tre modalità di personalizzazione: quando usare ciascuna

Prima di iniziare a modificare, Yellow Pencil ti chiede di scegliere l'ambito delle modifiche. Il pannello editor (con nessun elemento selezionato) mostra tre opzioni:

• Personalizzazione globale: le modifiche si applicano a tutte le pagine del sito. Cambia il colore di tutti i titoli H2 e questi cambieranno ovunque (homepage, blog, pagina contatti).
• Personalizzazione singola pagina: le modifiche si applicano solo alla pagina che stai modificando. Ideale per landing page e sezioni uniche.
• Personalizzazione template: le modifiche si applicano a tutti gli articoli dello stesso tipo. Vuoi che tutte le pagine prodotto abbiano lo stesso aspetto? Questa è la modalità che fa per te.

La modalità corrente è visualizzata nella parte superiore del pannello editor. Controlla sempre di stare modificando il tipo corretto prima di salvare: confondere personalizzazione globale e di singola pagina è facile, e le conseguenze compaiono immediatamente sull'intero sito.

Cosa puoi fare con Yellow Pencil: guida pratica

Di seguito una panoramica delle funzionalità principali con esempi concreti. Ogni operazione si esegue cliccando su un elemento e selezionando la sezione appropriata nel pannello di destra.

Tipografia

Il testo è la prima cosa su cui le persone intervengono dopo aver installato il plugin. Clicca su un blocco di testo e seleziona «Text» nel pannello editor. Sono disponibili tutte le proprietà di base: cambio font (oltre 900 opzioni da Google Fonts nella versione Pro), dimensione, interlinea, spaziatura tra lettere e tra parole. Il colore del testo si sceglie dalle palette integrate (material e flat) oppure si imposta con il contagocce.

Il vantaggio principale è l'anteprima in tempo reale. Muovi lo slider della dimensione del font e vedi subito come si adatta il layout. È molto più veloce del ciclo «modifica CSS → aggiorna pagina → non va bene → ripeti».

Bordi

Un bordo attorno a un blocco è un modo semplice per evidenziare una card, una citazione o un form di iscrizione. Seleziona l'elemento e vai alla scheda «Border» nel pannello editor. Sono disponibili quattro stili: solido, tratteggiato, puntinato e nascosto.

Una funzionalità che manca alla maggior parte dei concorrenti: ciascuno dei quattro lati del bordo può essere configurato separatamente. Bordo superiore rosso tratteggiato, sinistro blu solido, destro verde, inferiore assente. Larghezza, colore e stile di ogni lato si impostano in modo indipendente, offrendoti libertà progettuale senza scrivere una riga di codice.

Sfondo

Lo sfondo di un elemento si configura nella scheda «Background». Sono disponibili tre opzioni: colore pieno (contagocce o palette), uno tra oltre 300 pattern integrati e un gradiente CSS (lineare o radiale). Puoi caricare un'immagine personalizzata e configurarne posizionamento, comportamento di ripetizione e comportamento allo scroll.

I pattern di sfondo sono un dettaglio utile che fa risparmiare tempo. Invece di cercare texture su siti di stock, scegli un pattern dalla libreria, ne cambi colore e opacità e ottieni uno sfondo curato per il blocco in un paio di clic.

Animazione

La scheda «Animation» dà accesso a oltre 50 animazioni CSS già pronte: fade in, fade out, rimbalzo, rotazione, pulsazione e altre. Selezioni un effetto nel gestore visuale, imposti durata e ritardo e vedi subito l'elemento prendere vita.

Per scenari personalizzati c'è un generatore di animazioni (Pro): definisci i keyframe nell'editor visuale e il plugin genera i CSS @keyframes. È possibile eseguire più animazioni contemporaneamente per un comportamento complesso dell'elemento.

Dimensioni e posizione

Per cambiare le dimensioni di un elemento basta letteralmente trascinarne i bordi. Cliccando su un elemento appare una cornice blu con maniglie agli angoli e sui lati. Tira una maniglia e la dimensione cambia.

Cambiare la posizione è ancora più semplice: afferra l'elemento con il mouse e trascinalo dove serve.

Un'avvertenza: il trascinamento può compromettere la responsività. Dopo aver spostato gli elementi, verifica sempre l'aspetto della pagina su tablet e telefono. Il pannello di sinistra ha un emulatore di responsività che commuta l'area di anteprima tra desktop, tablet e smartphone. Se qualcosa si è spostato, si possono impostare stili separati per ciascuna risoluzione.

Free vs Pro: cosa scegliere

Le funzionalità della versione gratuita e di quella Pro differiscono in modo significativo. La versione gratuita fornisce un set base di proprietà CSS: font (senza Google Fonts), colore del testo, spaziatura, bordi, ombre, posizionamento. Questo basta per una personalizzazione minima del tema (spostare un titolo, cambiare il colore di un pulsante, aggiungere un bordo).

La Pro sblocca tutto il resto: oltre 900 Google Fonts, colore e immagini di sfondo, animazioni con gestore visuale, gradienti, pattern di sfondo, controllo di larghezza e altezza, un editor CSS con autocompletamento, personalizzazione della pagina di login di WordPress e il generatore di animazioni.

Per un progetto cliente una tantum, la licenza Pro si ripaga all'istante, facendoti risparmiare ore di codifica manuale. Per un blog personale, la versione gratuita è spesso sufficiente.

Prezzo

Yellow Pencil Pro è distribuito con licenza a pagamento dal sito ufficiale dello sviluppatore. Il prezzo include aggiornamenti a vita del plugin e un periodo di supporto. La licenza è valida per un sito; per progetti multipli occorre acquistare chiavi separate.

La versione gratuita è disponibile sulla pagina del plugin su WordPress.org. L'installazione è standard, direttamente dall'amministrazione via «Plugins» → «Add New» → cerca «Yellow Pencil».

Una panoramica video dettagliata dell'interfaccia e delle tecniche chiave per lavorare con il plugin (in inglese, visiva e concreta).

⁉️🤔 Domande frequenti

Yellow Pencil può rompere il mio tema?

No. Il plugin non modifica i file del tema né tocca altri plugin. Tutte le modifiche sono salvate separatamente e caricate dinamicamente. Se qualcosa va storto, annulla le modifiche con il pulsante «Reset changes» oppure elimina il plugin e il tema torna allo stato originale.

Devo conoscere i CSS per lavorare con Yellow Pencil?

No, è proprio questo lo scopo del plugin. Clicchi su un elemento e ne modifichi le proprietà in modo visuale: colore, font, spaziatura, bordi, animazione. I CSS sono generati automaticamente. Se conosci i CSS, c'è un editor di codice integrato con autocompletamento e highlighting e puoi scrivere stili manualmente in aggiunta alle modifiche visuali.

Il plugin funziona con Gutenberg ed Elementor?

Sì, Yellow Pencil è compatibile con tutti i page builder più diffusi: Gutenberg, Elementor, Divi, Beaver Builder, WPBakery. Il plugin stilizza i blocchi già pronti che crei nel builder e non entra in conflitto con il loro markup.

Posso personalizzare la pagina di login di WordPress?

Sì, nella versione Pro. Vai su «Appearance» → «YellowPencil Editor», seleziona «WordPress login page» come destinazione e clicca su «Customize». Modifichi logo, sfondo, pulsanti e campi del form esattamente come una pagina normale.

Cosa succede dopo aver eliminato il plugin?

Tutti gli stili applicati spariranno e il sito tornerà al design predefinito del tema. Prima di eliminare, puoi esportare i CSS tramite la funzione integrata «Export stylesheet» e collegarli manualmente come child theme, così gli stili si conservano anche senza il plugin.

Esistono alternative?

Tra gli analoghi diretti con editor CSS visuale ci sono Microthemer (ispettore elementi simile) e CSS Hero (un po' più semplice, meno proprietà). Entrambi sono a pagamento. Tra le opzioni gratuite esiste solo il customizer integrato di WordPress, ma dà accesso solo a una minima parte delle proprietà CSS che Yellow Pencil offre.

Vale la pena prendere Yellow Pencil per personalizzare il tema

Se non scrivi CSS a mano e non vuoi passare ore a modificare i file del tema, Yellow Pencil è uno dei migliori strumenti sul mercato. Non sostituisce un page builder, ma risolve esattamente il problema che ogni proprietario di sito conosce: «Vorrei modificare qualche dettaglio, cambiare un colore e un font, ma senza mettere mano al codice».

Per freelance e piccole agenzie significa tempo risparmiato sulle modifiche di routine ai siti dei clienti. Per chi gestisce un blog è un modo per sistemare l'aspetto visivo senza chiamare uno sviluppatore front-end. Per gli sviluppatori offre una prototipazione rapida degli stili prima di trasferirli in un child theme.

La regola principale quando lavori con Yellow Pencil: verifica la responsività dopo ogni serie di modifiche. L'emulatore integrato per tablet e telefono mostra una situazione realistica, e gli stili separati per ciascuna risoluzione ti permettono di correggere qualsiasi elemento si sia spostato. Con questa abitudine il plugin si ripaga già dal primo giorno di utilizzo.