Come aggiungere stili personalizzati ai widget di WordPress (2 modi)

Personalizzare i widget è un modo efficace per migliorare l’aspetto del sito web, mantenere la coerenza del brand e attirare l’attenzione su informazioni importanti.

Tuttavia, per molti utenti di WordPress lo stile dei widget è una sfida, soprattutto se non hanno dimestichezza con i CSS. Non preoccupatevi, però, perché siamo qui per aiutarvi.

In questo articolo vi mostreremo due metodi semplici per aggiungere stili personalizzati ai widget di WordPress senza rompere il vostro sito web. Sia che vi sentiate a vostro agio con un po’ di CSS o che preferiate una soluzione senza codice, vi abbiamo messo alla copertina.

Vi mostriamo due modi per aggiungere stili personalizzati ai widget di WordPress. Potete usare questi link rapidi per passare a quello che funziona meglio per voi:

Metodo 1: Aggiungere stili personalizzati ai widget di WordPress con l’editor a blocchi (base)

I widget di WordPress ora utilizzano l’editor a blocchi per aggiungere widget e blocchi alle aree e alle barre laterali predisposte per i widget. Ciò significa che si vedranno alcune opzioni di stile dei blocchi per alcuni dei blocchi predefiniti di WordPress.

Ad esempio, se si va nella pagina Aspetto ” Widget e si fa clic su un blocco predefinito di WordPress, si vedranno le opzioni per modificare i colori e la tipografia del blocco.

Tuttavia, non tutti i blocchi sono dotati di questa opzione, soprattutto se non si tratta di blocchi predefiniti di WordPress. Fortunatamente, uno dei vantaggi dell’uso dell’editor a blocchi per i widget è che si possono facilmente aggiungere classi CSS personalizzate a ogni blocco.

È sufficiente fare clic sul widget in cui si desidera aggiungere gli stili personalizzati.

Successivamente, è necessario andare giù fino alla scheda “Avanzate” nel pannello dei blocchi. Da qui è possibile aggiungere una classe CSS personalizzata.

Non dimenticate di salvare le modifiche facendo clic sul pulsante “Aggiorna”.

A questo punto, è possibile aggiungere CSS personalizzati al proprio tema WordPress, mirando a quella particolare classe CSS.

Basta andare alla pagina Aspetto ” Personalizza e passare alla scheda CSS aggiuntivo. Lì verrà visualizzata un’anteprima live del sito web con un riquadro per aggiungere le regole CSS.

Un altro modo per aggiungere CSS personalizzati è WPCode. Si consiglia di utilizzarlo se si dispone di molto codice CSS personalizzato già nel tema e si desidera differenziare e tracciare facilmente tutti gli snippet.

Per prima cosa, assicurarsi di installare il plugin WPCode. Per istruzioni passo passo, potete leggere la nostra guida su come installare un plugin di WordPress.

Quindi, andare su Code Snippets “ + Add Snippet e selezionare ‘Add Your Custom Code (New Snippet)’. Quindi, fare clic sul pulsante ‘+ Aggiungi snippet personalizzato’.

A questo punto, dare un nome al nuovo CSS personalizzato. Può essere qualcosa di semplice come “Stile widget personalizzato”.

Quindi, modificare il tipo di codice in “Snippet CSS”.

Quindi, aggiungere il CSS personalizzato nel campo.

Ecco alcuni CSS di base che abbiamo utilizzato:

.latest-articles { 
background-color:#def4f1;
padding:10px;
}

Una volta terminato, scorrere verso il basso fino alla sezione Pannelli di inserimento. Assicurarsi che il Metodo di inserimento sia impostato su “Inserimento automatico” e che la Posizione sia “Intestazione del sito”.

A questo punto, attivare il pulsante in alto a destra fino a quando non compare la dicitura “Attivo” e cliccare su “Salva snippet”.

Dopo aver aggiunto il CSS personalizzato, è possibile visualizzare il sito web su mobile o desktop per vederlo in azione.

Ecco come si presenta il nostro:

Metodo 2: Applicare stili personalizzati ai widget di WordPress con CSS Hero (più personalizzabile)

Un problema con il metodo precedente è che è necessario scrivere codice CSS. Tuttavia, non tutti gli utenti conoscono i CSS o semplicemente non vogliono scrivere codice.

In questo caso, potete utilizzare CSS Hero. Si tratta di un plugin per lo styling personalizzato di WordPress che consente di aggiungere CSS personalizzati al vostro tema WordPress senza scrivere alcun codice.

Chi siamo può approfondire la conoscenza del plugin nella nostra recensione di CSS Hero.

Per prima cosa, è necessario installare e attivare il plugin CSS Hero. Per maggiori dettagli, consultare la nostra guida passo-passo su come installare un plugin di WordPress.

Dopo l’attivazione, il plugin aggiungerà una nuova voce di menu alla barra degli strumenti di amministrazione di WordPress nella parte superiore.

Successivamente, è necessario visitare la pagina in cui si trova il widget che si desidera stilizzare e fare clic sul pulsante CSS Hero in alto.

Questo aprirà la pagina nell’interfaccia dell’editor CSS Hero.

Si tratta di un editor live in cui è sufficiente puntare e cliccare su qualsiasi elemento del sito web per modificarne lo stile.

È sufficiente posizionare il mouse sul widget che si desidera stilizzare. Quindi, fare clic per selezionarlo.

In questo esempio, abbiamo selezionato il widget Ricerca.

Dopodiché, è possibile utilizzare il menu a sinistra per creare il widget nel modo desiderato. Questo include opzioni di stile avanzate come gradienti, tipografia, spaziatura interna, margini e bordi.

Nell’esempio seguente, abbiamo modificato la dimensione del font del widget Ricerca, in modo che risalti ancora di più.

Se necessario, è possibile modificare elementi specifici del widget.

Ad esempio, abbiamo deciso di modificare il raggio del bordo dei pulsanti e dei campi di ricerca. In questo modo, hanno un aspetto più curvo ed elegante.

Una volta terminato, non dimenticate di fare clic sul pulsante “Salva” per memorizzare le impostazioni.

Quindi, andate avanti e visualizzate l’anteprima del sito web per vedere le modifiche in azione.

Speriamo che questo articolo vi abbia aiutato a capire come aggiungere stili personalizzati ai widget di WordPress. Potreste anche voler vedere la nostra selezione dei migliori builder di pagine trascina e rilascia per WordPress e il nostro confronto pro e contro tra temi WordPress gratuiti e premium.

Se questo articolo vi è piaciuto, iscrivetevi al nostro canale YouTube per le esercitazioni video su WordPress. Potete trovarci anche su Twitter e Facebook.