Vai alla home page

Fogli di stile: 5 plugin gratuiti per WordPress

Fogli di stile 960x480 - Fogli di stile: 5 plugin gratuiti per WordPress

Editare i fogli di stile (CSS) non è facile come sembra, ma spesso necessario. Oggi ti voglio parlare di 5 plugin che possono semplificarti molto questo lavoro fondamentale per personalizzare il tuo sito e blog nei minimi dettagli rendendolo veramente unico. I fogli di stile sono quei codici responsabili della grafica e della formattazione dei testi tel tuo sito WordPress, blog o eCommerce.

Un sito web si può creare da zero (ma è necessario essere un web designer), oppure installando un tema (template), dopo avere naturalmente installato la nostra copia aggiornata di WordPress. I migliori template premium hanno la possibilità di modificare un sacco di cose nelle loro opzioni di personalizzazione (colori, grafica, corpo dei testi, caratteri, eccetera). Se però stai usando un tema che non ha questa possibilità, dovrai andare ad editare manualmente ciascun foglio di stile.


Fogli di stile: 5 plugin gratuiti

Dalle ultime versioni di WordPress è possibile utilizzare l’editor dedicato alla modifica dei CSS che trovi in: aspetto>personalizza, ma puoi anche usare un plugin sviluppato apposta per fare queste modifiche. Oggi ti voglio segnalare 5 plugin con i quali potrai editare i CSS in modo più semplice e con opzioni di anteprima dal vivo. Qual’è la novità? Sono gratuiti.


Advance CSS Editor

Fogli di stile

Dopo l’installazione e l’attivazione del plugin Advance CSS Editor, vai in Aspetto> Personalizza per accedere alla personalizzazione del plugin dal backend e cercare l’opzione di menu avanzato CSS Editor. Apparirà in cima alla lista delle opzioni del menu Customizer. Per modificare i fogli di stile, è sufficiente aggiungere un selettore e una regola per la casella di testo che appare quando si apre la voce di menu avanzato CSS Editor.

Le regole CSS possono essere scritte per essere applicate a tutti o solo i dispositivi specifici come i computer desktop, tablet o cellulari. Appena scrivi una nuova regola, il Customizer del sito viene aggiornato fornendoti un’anteprima in tempo reale delle modifiche. Se selezioni la visualizzazione per tablet o cellulare, la finestra del browser si ridimensionerà automaticamente in modo da rendere possibile visualizzare i cambiamenti come appariranno in un dispositivo di quelle dimensioni.

Potente. Usalo se vuoi fare modifiche sui dispositivi di diverse dimensioni senza avere troppe opzioni.


Customizer Custom CSS

Customizer Custom CSS

Installato e attivato il plugin Customizer Custom CSS vai in Aspetto> Personalizza e vedrai che una scheda personalizzata CSS è stata aggiunta alla lista delle voci del menu Customizer. Apri questo menu e troverai una casella di testo in cui i fogli di stile possono essere scritti. Appena scriverai la nuova regola, l’anteprima del Customizer si aggiornerà automaticamente per mostrarti i cambiamenti. Preset automatici non sono integrati nel plugin per i diversi dispositivi, ma il plugin accetterà le regole dei diversi media screen, in modo da poter scrivere gli stili che hanno come target specifici modifiche alla viewport.

Semplice e leggero. Usalo se chiedi la semplicità come prima caratteristica.


Modular Custom CSS

Modular Custom CSS

Se devi cambiare il tuo tema WordPress di frequente, Modular Custom CSS è il plugin di modifica dei fogli di stile che hai sempre sognato. Installalo, attivalo, e usalo andando in Aspetto> Personalizza. Quindi seleziona la scheda Personalizza CSS, che troverai in fondo al menu di personalizzazione. Con questo plugin, è possibile scrivere le regole CSS del tema. Le regole specifiche verranno applicate solo al tema attivo.

Facile da usare, con una caratteristica unica. Usalo se passi frequentemente da un tema ad un’altro.


Site Origin CSS

SiteOrigin CSS

Di gran lunga il plugin più ricco di funzionalità di questa lista, SiteOrigin CSS è potentissimo per essere gratuito. Questo plugin è l’unico che non utilizza il Customizer (Aspetto> Personalizza) per generare una funzione di anteprima dal vivo. Dopo l’installazione e l’attivazione del plugin, vai in Aspetto> Custom CSS per accedere al foglio di stile. In questa pagina, verrà visualizzato un editor di testo che non include un’anteprima in tempo reale. Per vedere l’anteprima dal vivo, dovrai cliccare su uno dei due pulsanti che appaiono sulla destra, appena sopra la casella di testo. Cliccando il pulsante con l’icona a forma di occhio si aprirà un editor CSS visivo e intuitivo che gli utenti meno tecnici apprezzeranno particolarmente. L’icona con le frecce in espansione, è una versione ridotta dell’editor visuale che richiede di scrivere manualmente regole CSS.

L’editor CSS fornisce una serie di controlli che lo rendono facile per fare un sacco di modifiche senza dover quasi conoscere la sintassi CSS. Di tutti gli editor CSS di questo elenco, la modalità editor visuale del plugin SiteOrigin CSS è la più facile da usare.

Completo e potente. Usalo se hai bisogno di fare tante modifiche e scrivere i CSS personalizzati.


Tj Custom CSS

Tj Custom CSS

Dopo l’installazione e l’attivazione del plugin Tj Custom CSS sarai in grado di aggiungere CSS personalizzati in due modi diversi:

  1. Con un editor di testo che si trova in Aspetto> Custom CSS, completo di suggerimenti di sintassi con codici colore.
  2. Nella voce di menu personalizzata CSS Customizer, a cui è possibile accedere navigando in Aspetto> Personalizza.

Quando usi la voce di menu personalizzata CSS all’interno del Customizer, gli stili verranno applicati automaticamente all’anteprima del Customizer. Se vuoi eseguire il debug dei CSS, passa alla vista testo dell’editor che comprende riferimenti colore per individuare e correggere i set di regole non chiusi e altri errori di sintassi.

Facile da usare con un editor di testo di evidenziazione della sintassi “built-in”. Usalo se un plugin semplice da usare e legegro che ti può aiutare ad individuare e correggere gli errori di sintassi CSS.


Fogli di stile con 5 plugin: conclusioni

Personalmente non ho un plugin preferito tra quelli descritti. Ognuno dei prodotti citati si rivolge a un diverso tipo di utente e sarà ciascuno a giudicare il più adatto per le proprie esigenze di codifica CSS. Plugin gratuiti ma di qualità anche per tutti gli utenti che hanno poca dimestichezza con i CSS. Come ti dicevo all’inizio, è anche vero che un web designer professionista probabilmente non ha bisogno di nessuno di questi plugin. Prodotti secondo me dedicati a semplificarti il lavoro, ma anche ad un utenza non PRO. Hai bisogno di una consulenza gratuita? Contattaci! Saty tuned, Gestione WP.


Richiedi l'analisi gratuita del tuo sito web, blog o eCommerce

ANALISI SITO

Assistenza WordPress | SEO | Siti web