Come aggiungere stili personalizzati ai widget di WordPress

Volete aggiungere stili personalizzati ai widget di WordPress?

Lo styling dei widget consente di mantenere il branding coerente e di evidenziare le informazioni importanti per gli utenti.

In questo articolo, vi mostreremo come aggiungere facilmente stili personalizzati ai widget di WordPress senza rompere il vostro sito web.

Vi mostriamo tre modi per aggiungere stili personalizzati ai widget di WordPress. Potete scegliere quello che funziona meglio per voi.

• Aggiungere stili personalizzati ai widget di WordPress usando l’editor di blocchi
• Aggiunta di stili personalizzati ai widget classici di WordPress
• Aggiungere stili personalizzati ai widget di WordPress usando CSS Hero (senza codice)

Prima di iniziare, questo articolo richiede una certa conoscenza dei CSS, in modo che possiate creare lo stile dei widget. Dovrete anche aggiungere dei CSS personalizzati al vostro tema WordPress.

Se si preferisce un metodo senza codice al posto dei CSS, si può passare al metodo 3.

Cominciamo.

Aggiunta di stili personalizzati ai widget di WordPress con l’editor di blocchi

I widget di WordPress ora utilizzano l’editor di blocchi per aggiungere widget e blocchi alle aree e alle barre laterali predisposte per i widget.

Uno dei vantaggi dell’uso dell’editor di blocchi per i widget è la possibilità di aggiungere facilmente classi CSS personalizzate a ciascun blocco.

È sufficiente andare alla pagina Aspetto ” Widget e fare clic sul widget in cui si desidera aggiungere gli stili personalizzati.

Successivamente, è necessario scorrere verso il basso fino alla scheda Avanzate sotto il 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.

Ecco alcuni CSS di base che abbiamo utilizzato.

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

Dopo aver aggiunto il CSS personalizzato, è possibile visualizzare l’anteprima del sito web per vederlo in azione.

Il problema nell’uso dei widget dell’editor di blocchi è trovare il blocco giusto da indirizzare.

Una soluzione più semplice potrebbe essere quella di aggiungere i blocchi in un blocco Gruppo, in modo da renderli facilmente stilizzabili insieme. Per saperne di più sul raggruppamento dei blocchi, consultare la nostra guida su come utilizzare l’editor di blocchi di WordPress.

Aggiunta di stili personalizzati ai widget classici di WordPress

Questo metodo fa al caso vostro se utilizzate i vecchi widget classici sul vostro sito WordPress.

Per questo metodo, è necessario installare e attivare il plugin Widget Options. Per maggiori dettagli, consultate la nostra guida passo passo su come installare un plugin di WordPress.

Widget Options è un potente plugin che aggiunge opzioni extra ai widget di WordPress. Tra queste, la possibilità di mostrare e nascondere i widget in base al dispositivo dell’utente, al ruolo e ad altre condizioni.

Il plugin aggiunge anche un’opzione per aggiungere classi CSS personalizzate ai widget di WordPress.

È sufficiente andare alla pagina Aspetto ” Widget e fare clic sul widget in cui si desidera aggiungere lo stile personalizzato.

Nelle impostazioni del widget, si vedrà un’ampia gamma di opzioni. Da qui, è necessario fare clic sull’icona dell’ingranaggio per aggiungere la classe CSS personalizzata.

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

È ora possibile aggiungere regole CSS personalizzate al tema, utilizzando la classe CSS appena inserita. Ad esempio, nel nostro sito di prova abbiamo utilizzato il seguente CSS.

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

Ecco come appariva sul nostro sito web di prova.

Applicare stili personalizzati ai widget di WordPress con CSS Hero

Un problema con i due metodi precedenti è 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.

Per prima cosa, è necessario installare e attivare il plugin CSS Hero. Per maggiori dettagli, consultate 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 e fare clic per selezionarlo.

Dopodiché, è possibile utilizzare il menu a sinistra per creare il widget nel modo desiderato.

Questo include opzioni di stile avanzate come gradienti, tipografia, padding, margini e bordi.

Una volta terminato, non dimenticate di premere il pulsante Salva per memorizzare le impostazioni.

Ora è possibile visualizzare 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 widget WordPress più utili per tutti i siti web o la nostra guida su come creare un tema WordPress personalizzato da zero senza scrivere codice.

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