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
- Metodo 2: Stile dei Widget di WordPress con CSS Hero (Senza Codice)
Nota: Questo articolo è destinato agli utenti di temi classici. Se utilizzi un tema a blocchi, non vedrai le pagine Widget o Personalizzatore del tema nella tua area amministrativa. Dovrai utilizzare blocchi e l'editor completo del sito per personalizzare il tuo tema.
Per maggiori informazioni, consulta la nostra guida completa all'editing completo del sito di WordPress.
Metodo 1: Stile dei Widget di WordPress con Codice CSS
I widget di WordPress ora utilizzano l'editor a blocchi per aggiungere un nuovo widget e blocco alle aree widget e alle barre laterali. Ciò significa che vedrai alcune opzioni di stile dei blocchi per alcuni dei blocchi predefiniti di WordPress.
Ad esempio, se vai alla pagina Aspetto » Widget e fai clic su un blocco predefinito di WordPress, vedrai opzioni per modificare i colori e la tipografia del blocco.
Tuttavia, non tutti i blocchi sono dotati di queste opzioni widget, specialmente se questi blocchi non sono quelli predefiniti di WordPress. Fortunatamente, uno dei vantaggi dell'utilizzo dell'editor a blocchi per i widget è che puoi facilmente aggiungere classi CSS personalizzate a ciascun blocco.
Tutto quello che devi fare è semplicemente fare clic sul widget a cui vuoi aggiungere stili personalizzati.
Successivamente, devi scorrere verso il basso fino alla scheda 'Avanzate' nel pannello Blocchi. Da qui, puoi aggiungere una classe CSS personalizzata.
Non dimenticare di salvare le impostazioni del tuo widget facendo clic sul pulsante 'Aggiorna'.
Ora, puoi aggiungere CSS personalizzato al tuo tema WordPress che si rivolge a quella particolare classe CSS.
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.
Un altro metodo efficace per aggiungere CSS personalizzato è utilizzare WPCode.
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.
Nota: Puoi utilizzare il piano gratuito di WPCode per questo tutorial. Ma se decidi di passare alla versione pro, otterrai vantaggi aggiuntivi come l'accesso a una libreria cloud di snippet di codice e una logica condizionale intelligente per una maggiore flessibilità nella gestione del tuo codice.
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, procedi e 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)
Un problema con il metodo sopra è che devi scrivere codice CSS. Tuttavia, non tutti gli utenti conoscono il CSS o semplicemente non vogliono scrivere codice da soli.
In tal caso, puoi usare CSS Hero. È un plugin di styling personalizzato per WordPress che ti consente di aggiungere CSS personalizzato al tuo tema WordPress senza scrivere codice.
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 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.
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.
Ankush
Il plugin era davvero fantastico ma ho avuto un problema…
Non funziona quando aggiungo CSS personalizzato…
Forse il CSS del plugin sta sovrascrivendo il mio codice ma… è davvero triste…
Ehi Team Wpbeginner.com.. Per favore, lasciatemi una risposta,
Puoi dirmi come risolverlo…
Rachael
Adoro questo plugin ma ogni volta che lo attivo, ho problemi con il widget della galleria. Funziona bene con il plugin disattivato, ma se attivo il plugin, il widget della galleria non salva alcuna immagine. Tutti gli altri widget funzionano bene. Qualcun altro ha questo problema?
Regina
L'istruzione sopra include anche la possibilità di personalizzare il carattere dei titoli dei widget?
Grazie!
terry
Finalmente, dopo aver fallito nel cercare di decodificare il gergo che ottengo nell'ispezione, questo articolo mi ha detto esattamente ciò di cui avevo bisogno.
Grazie
Alex
Non ho alcuna classe sui widget.
irfan
C'è spazio bianco extra durante la creazione di un'area widget aggiuntiva per l'intestazione. Per favore, dicci come rimuoverlo
Thomas
Ciao, ho provato a farlo manualmente, ho ispezionato l'elemento e la sua classe ma non ha funzionato.
Sto cercando di cambiare lo stile di un WPform.
Potresti aiutarmi?
Supporto WPBeginner
Ciao Thomas,
Per favore, dai un'occhiata a questa guida su come aggiungere CSS personalizzato a WPForms.
Amministratore
daniel
Ho aggiunto un'area widget all'intestazione utilizzando i file functions.php e header.php. Vedo il widget che ho aggiunto sul mio sito ma voglio metterlo accanto al menu, qualche idea su come fare per favore? Voglio che si trovi sul lato destro del menu.
Supporto WPBeginner
Ciao Daniel,
Dovrai posizionare il codice del widget prima del tuo menu e poi aggiungere CSS personalizzato per posizionarlo.
Amministratore
Deniz Kumru
It’s my first wordpress theme.I was nervous till found your article.It’s done thank you
ivan
Perché il mio layout sotto gli stili dei widget mostra solo l'opzione di padding, senza l'opzione di margine inferiore, grondaia e layout di riga.
Rimi
ciao
Non posso apportare modifiche perché è inattivo
In elaborazione plugin / css / plugin-front.css (inattivo), come posso attivare per favore
Grace
Ciao, il mio tema non ha una barra laterale destra, è venuto solo con un'area widget nel footer, posso usare il css personalizzato per aggiungere una barra laterale destra? Per favore, aiutami, grazie
Supporto WPBeginner
No, dovrai prima definire un'area pronta per i widget. Il tuo tema potrebbe già avere un'opzione per utilizzare un layout a barra laterale. Se non ce l'ha, ti consigliamo di chiedere supporto all'autore del tema. D'altra parte, se ti senti sicuro delle tue capacità di codifica, allora procedi pure.
Amministratore
Mr.T
Voglio cambiarli manualmente. Ho ragione nel pensare che usando la classe widget-number non puoi effettivamente spostarli su o giù nell'area dei widget, perché il loro ID cambierà, o funziona diversamente?
Erick
Ho la stessa domanda
Correen K
I was looking for something like this to add some style to my sidebar and stumbled upon the Flexible Posts Widget plugin. I think it’s always nice to have options
Abhishek Prakash
L'utilizzo di così tanti CSS non influenzerà la velocità della pagina?
Staff di WPBeginner
Non se lo fai bene.