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

La creazione di siti WordPress ci ha insegnato che i piccoli dettagli fanno grandi differenze. Lo stile personalizzato dei widget può trasformare siti web buoni in ottimi.

Su WPBeginner, facciamo in modo che ogni elemento funzioni insieme. Prendiamo ad esempio i nostri widget della barra laterale.

Abbiamo personalizzato il loro aspetto per evidenziare risorse importanti e farli integrare perfettamente con il design del nostro sito. Questo ci aiuta a costruire fiducia con milioni di visitatori.

In questa guida, condivideremo i metodi più semplici per personalizzare gli stili dei widget di WordPress. Imparerai tecniche per far apparire i tuoi widget professionali e integrarli perfettamente con il tuo tema.

Perché aggiungere stili personalizzati ai widget di WordPress?

Per impostazione predefinita, i widget di WordPress utilizzano lo stile del tuo tema, che potrebbe non corrispondere sempre ai tuoi obiettivi di design. L'aggiunta di stili personalizzati ti offre un maggiore controllo sull'aspetto dei tuoi widget.

Ecco perché vale la pena personalizzare:

• 🎨 Abbina il tuo brand: Gli stili personalizzati ti consentono di allineare colori, font e spaziatura dei widget con il branding del tuo sito per un aspetto più coeso.
• 👓 Migliora la leggibilità: A volte, il layout predefinito dei widget non è facile da leggere. Lo styling può aiutare a migliorare le dimensioni dei font, il contrasto o l'allineamento per una migliore esperienza utente.
• 🌟 Evidenzia Contenuti Importanti: Vuoi che i tuoi ultimi post, call-to-action o informazioni di contatto si distinguano? Il CSS personalizzato può rendere quei widget più accattivanti.
• 🧹 Pulisci Design Affollati: Se un widget appare troppo affollato o fuori posto, gli stili personalizzati aiutano a snellirne l'aspetto e a integrarlo più agevolmente nel tuo layout.
• 🧩 Crea Layout Unici: Gli stili personalizzati aprono possibilità di layout, come trasformare un semplice widget di testo in una casella promozionale stilizzata o allineare più widget in una griglia.

In breve, stilizzare i tuoi widget ti aiuta ad andare oltre l'aspetto predefinito e a creare un sito web più rifinito e professionale.

Detto questo, diamo un'occhiata a come aggiungere facilmente stili personalizzati ai tuoi widget di WordPress.

Ti mostreremo 2 modi per personalizzare i tuoi widget di WordPress con stili personalizzati. Puoi usare questi collegamenti rapidi per passare a quello che funziona meglio per te:

Metodo 1: Stile dei Widget di WordPress con Codice CSS

Poiché i widget di WordPress utilizzano ora l'editor a blocchi, hai diversi modi per modificarne l'aspetto a seconda del livello di controllo di cui hai bisogno.

Esamineremo prima le opzioni integrate, quindi ti mostreremo come aggiungere stili completamente personalizzati:

1. Utilizzo delle impostazioni predefinite dei blocchi

Prima di aggiungere codice personalizzato, vale la pena verificare se il blocco dispone già delle impostazioni necessarie.

Se vai alla pagina Aspetto » Widget e fai clic su un blocco specifico, spesso vedrai opzioni nel pannello delle impostazioni del blocco per modificare colori e tipografia.

2. Aggiunta di una classe CSS personalizzata

Se le impostazioni predefinite non sono sufficienti, puoi aggiungere una "classe" specifica al widget. Questa funziona come un'etichetta che ti consente di selezionare solo quel widget con il tuo codice personalizzato.

Fai semplicemente clic sul widget dove desideri aggiungere stili personalizzati. Successivamente, scorri verso il basso fino alla scheda ‘Avanzate’ nel pannello Blocchi. Da qui, puoi aggiungere una classe CSS personalizzato.

Per questo tutorial, digita latest-articles nel campo. Assicurati di non aggiungere un punto (.) all'inizio del nome della classe.

Non dimenticare di salvare le impostazioni del tuo widget facendo clic sul pulsante 'Aggiorna'.

3. Applicare i tuoi stili personalizzati

Ora che hai assegnato un nome di classe al tuo widget, devi aggiungere il codice che dice a WordPress come stilizzarlo. Ci sono due modi per farlo:

Opzione 1: Utilizzo del personalizzatore del tema

Questo è il modo più veloce per aggiungere codice se vuoi solo testarlo.

Vai semplicemente alla pagina Aspetto » Personalizza e passa alla scheda ‘CSS aggiuntivo’. Lì, vedrai un'anteprima live del tuo sito web con una casella per aggiungere le tue regole CSS.

Opzione 2: Utilizzo di WPCode (Consigliato)

Ti consigliamo di utilizzare WPCode perché salva i tuoi stili personalizzati anche se cambi tema in seguito. È anche il modo più sicuro per aggiungere snippet di codice a WordPress.

L'abbiamo testato a fondo e l'abbiamo trovato uno dei modi più sicuri per integrare codice personalizzato nel tuo tema. Se gestisci numerosi snippet CSS, WPCode rende facile organizzarli e monitorarli.

Per maggiori dettagli sulle sue funzionalità e vantaggi, sentiti libero di consultare la nostra recensione di WPCode.

Innanzitutto, assicurati di installare il plugin WPCode. Per istruzioni passo passo, puoi leggere la nostra guida su come installare un plugin WordPress.

Successivamente, vai su Snippet di codice » + Aggiungi snippet e seleziona 'Aggiungi il tuo codice personalizzato (Nuovo snippet)'. Quindi, fai clic sul pulsante '+ Aggiungi snippet personalizzato'.

Ora, dai un nome al tuo nuovo CSS personalizzato. Può essere qualcosa di semplice come 'Stile widget personalizzato'.

Quindi, cambia il Tipo di codice in 'Snippet CSS'.

Successivamente, aggiungi il tuo CSS personalizzato nel campo.

Ecco alcuni CSS di base che abbiamo utilizzato:

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

Una volta terminato, scorri verso il basso fino alla sezione Inserimento. Assicurati che il Metodo di inserimento sia impostato su 'Inserimento automatico' e la Posizione su 'Intestazione sito'.

Dopodiché, attiva l'interruttore nell'angolo in alto a destra finché non dice 'Attivo' e fai clic su 'Salva Snippet'.

Dopo aver aggiunto il tuo CSS personalizzato, puoi visualizzare il tuo sito web WordPress su mobile o desktop per vederlo in azione.

Ecco come appare il nostro sul nostro sito demo WordPress:

Metodo 2: Stile dei Widget di WordPress con CSS Hero (Senza Codice)

Scrivere codice CSS manualmente può essere complicato per i principianti. Un piccolo errore potrebbe compromettere il layout del tuo sito e imparare la sintassi richiede tempo.

Se non vuoi avere a che fare con il codice, puoi usare CSS Hero. È un plugin di styling visivo che ti consente di personalizzare i tuoi widget con una semplice interfaccia point-and-click.

Puoi saperne di più sul plugin nella nostra recensione di CSS Hero.

Innanzitutto, devi installare e attivare il plugin CSS Hero. Per maggiori dettagli, consulta 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 in alto.

Successivamente, devi visitare la pagina in cui puoi vedere il widget che desideri stilizzare e fare clic sul pulsante CSS Hero in alto.

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

È un editor live dove puoi semplicemente puntare e fare clic su qualsiasi elemento del tuo sito web e cambiarne lo stile.

Semplicemente, sposta il mouse sul widget che desideri stilizzare. Quindi, fai clic per selezionarlo.

In questo esempio, abbiamo selezionato il nostro widget di ricerca.

Dopodiché, puoi usare il menu a sinistra per personalizzare il tuo widget come preferisci. Questo include opzioni di stile avanzate come sfumature, tipografia, padding, margini e bordi.

Nell'esempio seguente, abbiamo modificato la dimensione del carattere del widget di ricerca di WordPress in modo che risalti ancora di più.

Puoi anche modificare elementi specifici del widget, se necessario.

Ad esempio, abbiamo deciso di modificare il raggio del bordo del pulsante e dei campi di ricerca. In questo modo, appaiono più arrotondati ed eleganti.

Una volta terminato, non dimenticare di fare clic sul pulsante ‘Salva’ per memorizzare le tue impostazioni.

Quindi, procedi e visualizza in anteprima il tuo sito web per vedere il tuo nuovo design di WordPress in azione.

Domande frequenti sulle opzioni di stile in WordPress

Ecco alcune domande che i nostri lettori hanno posto frequentemente riguardo allo styling di diversi elementi in WordPress:

Come aggiungo widget personalizzati in WordPress?

Per aggiungere un widget personalizzato, vai su Aspetto » Widget nella tua bacheca e fai clic sul pulsante Aggiungi blocco (+). Puoi quindi selezionare qualsiasi blocco disponibile, come testo, immagini o articoli recenti, e inserirlo nella barra laterale o nell'area del piè di pagina.

Come si aggiungono stili in WordPress?

Il modo più sicuro per aggiungere stili è utilizzare la scheda CSS aggiuntivo nel Personalizzatore del tema o un plugin come WPCode. Questi metodi ti consentono di aggiungere codice CSS personalizzato senza modificare i file principali del tuo tema, garantendo che le tue modifiche non vengano perse durante gli aggiornamenti.

È possibile personalizzare un widget?

Sì, puoi personalizzare quasi ogni aspetto di un widget. I widget moderni di WordPress hanno impostazioni integrate per i colori di sfondo e la tipografia. Per un controllo più avanzato, puoi assegnare una classe CSS specifica al widget e stilizzarlo manualmente con il codice.

Come creare un widget menu personalizzato in WordPress?

Puoi aggiungere un menu personalizzato utilizzando il blocco Menu di navigazione nella tua area widget. Innanzitutto, crea il tuo menu specifico in Aspetto » Menu, quindi seleziona semplicemente quel menu dalle opzioni a discesa nelle impostazioni del blocco Menu di navigazione.

Come creare un widget personalizzato?

Se hai bisogno di funzionalità specifiche non presenti nei blocchi predefiniti, puoi creare un widget personalizzato scrivendo un plugin o utilizzando uno strumento come WPCode. Tuttavia, se desideri semplicemente un design personalizzato, di solito puoi ottenerlo raggruppando blocchi esistenti e applicando stili CSS personalizzati.

Speriamo che questo articolo ti abbia aiutato a imparare come aggiungere stili personalizzati ai widget di WordPress. Potresti anche voler vedere la nostra selezione dei migliori page builder drag-and-drop per WordPress e il nostro confronto pro e contro tra temi WordPress gratuiti vs premium.

Se ti è piaciuto questo articolo, iscriviti al nostro canale YouTube per tutorial video su WordPress. Puoi anche trovarci su Twitter e Facebook.