Personalizzare lo stile dei widget con il plugin Widget CSS Classes

Personalizza lo stile dei widget con il plugin Widget CSS Classes

Ti è mai capitato di voler personalizzare lo stile dei widget installati sul tuo sito?

La funzionalità di un widget ti piaceva, ma il look proprio non c’entrava nulla con il design delle tue pagine?

Questa è la guida che fa per te. Oggi ti presento uno strumento molto utile: si tratta di un plugin chiamato Widget CSS Classes, che serve ad associare classi css ai tuoi widget, così da poterli personalizzare in modo molto semplice, senza alcuna limitazione.

Vediamo subito come funziona.

Personalizzare lo stile dei widget con il plugin Widget CSS Class

Pagina di configurazione del plugin

Quando installi il plugin, per prima cosa dovrai lavorare su alcune impostazioni generali. Naviga quindi in Impostazioni > Widget CSS Classes.

Prima di guardare le opzioni disponibili una ad una, facciamo una premessa: questo plugin non permette di scrivere direttamente codici CSS. Serve, invece, ad associare classi ed ID ai widget, così che la creazione delle regole CSS risulti più semplice.  Dovrai quindi avere almeno una conoscenza base di CSS.

Non hai mai usato il CSS? Leggi la guida base per capirne il funzionamento.

Torniamo ora alla configurazione del plugin.

Tra le opzioni disponibili, puoi scegliere se abilitare solo la funzionalità per associare ai tuoi widget una classe, oppure anche un ID.

personalizzare lo stile dei widget con il plugin Widget CSS Classes

Come regola generale, le classi possono essere assegnate a più di un elemento all’interno del sito, mentre gli ID dovrebbero essere usati per un singolo widget.

Un campo interessante è quello chiamato “Class Field Type”. Qui puoi scegliere se inserire – all’interno della pagina di configurazione dei widget – un campo di testo dove digitare il nome della classe, oppure un menu a tendina.

Se scegli la seconda opzione, dovrai compilare per ciascuna classe un campo nella sezione “Define Classes for Dropdown”. Le classi che inserisci in questi campi, appariranno come opzione disponibile sotto ai singoli widget.

Navighiamo ora all’interno della pagina Aspetto > Widget.

Vedrai che ogni widget ha ora un nuovo campo (o due se hai selezionato anche l’opzione per l’aggiunta degli ID).

Per personalizzare lo stile dei widget ti basterà digitare il nome della classe che vuoi assegnare. Quindi, aggiungere le corrispondenti regole CSS.

Dove aggiungere i codici CSS?

Ci sono diverse opzioni:

  • all’interno del file style.css del tuo tema. In questo caso, ricorda però che quando andrai ad aggiornare il tema, le modifiche andranno perdute e dovrai tornare ad aggiungerle.
  • all’interno del file style.css di un tema child. Un tema child serve proprio a fare modifiche al tema senza che queste vengano perse con gli aggiornamenti. Se ti interessa imparare a creare un tema child per il tuo sito, leggi questa guida.
  • All’interno di un plugin come Simple Custom CSS. Se non vuoi andare a lavorare direttamente all’interno del file style.css, questa è una buona alternativa. Le tue modifiche non andranno perse con gli aggiornamenti, e quando farai delle aggiunte potrai anche vederle in anteprima, prima di salvarle rendendole effettive.

Conclusione

In questa breve guida abbiamo visto come personalizzare lo stile dei widget con il plugin Widget CSS Classes. Ovviamente, per poter usare questo strumento è necessario avere conoscenza di CSS. Non farti spaventare da questo, il CSS è abbastanza semplice! Se non l’hai ancora fatto, vai a leggere la guida base menzionata nel post ed inizia a sperimentare.

Ti invito poi a farmi sapere se hai testato questo plugin e se ti è stato utile. Come al solito, ne parliamo nei commenti.

 

Andrea Di Rocco

Andrea Di Rocco

Ciao! Sono Andrea, il webmaster di SOS WordPress. La mia missione è di aiutarti a diventare autonomo nel creare il tuo sito web, posizionarti sui motori di ricerca e guadagnare online grazie al tuo progetto. Oltre a questo voglio far si che tu spenda il minor quantitativo di soldi e tempo mentre raggiungi i tuoi obiettivi sul web. Conosciamoci nell'area commenti di questo articolo!

[PROMO LIMITATA] 50% SU HOSTING SITEGROUND + ASSISTENZA SOS WP GRATIS

SiteGround - Miglior hosting per Wordpress
2 commenti

Lascia un Commento

Vuoi partecipare alla discussione?
Fornisci il tuo contributo!

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *