Come aggiungere stili personalizzati ai widget di WordPress

La maggior parte dei widget della barra laterale in WordPress di solito hanno lo stesso aspetto. Andrebbe bene se tutti i tuoi widget avessero la stessa importanza, ma la verità è che alcuni widget sono più importanti per la crescita del tuo sito rispetto ad altri. Ad esempio, un widget di iscrizione a un elenco di e-mail è sicuramente più importante di un widget di archivio. Non sarebbe bello se si potesse facilmente modificare i widget importanti in modo diverso? In questo articolo, ti mostreremo come aggiungere stili personalizzati ai widget di WordPress.

Utilizzo di un plugin per aggiungere stili personalizzati ai widget di WordPress

La prima cosa che devi fare è installare e attivare il plugin Widget CSS Classes. All'attivazione basta andare su Aspetto »Widget e fare clic su qualsiasi widget in una barra laterale per espandere.

Noterai un nuovo Classe CSS campo sotto i tuoi widget, così puoi facilmente definire una classe CSS per ogni widget. Ad esempio, abbiamo aggiunto il sottoscrivi classe al nostro widget modulo di iscrizione.

Ora puoi andare al foglio di stile del tuo tema e aggiungere lì le tue regole di stile. Come questo:

 .subscribe background-color: # 858585; colore: #FFF;  

Puoi aggiungere qualsiasi CSS personalizzato, ad esempio aggiungi sfondo, cambia i bordi, usa colori diversi, ecc.

Aggiunta manuale di stili personalizzati a widget WordPress

Se non si desidera utilizzare un plug-in, è possibile aggiungere manualmente stili personalizzati ai widget di WordPress. Per impostazione predefinita, WordPress aggiunge classi CSS a diversi elementi, inclusi i widget.

Ogni widget nella barra laterale ha una classe widget numerata. Come widget-1, widget-2, widget-3, ecc. Utilizzando lo strumento Ispeziona elemento di Google Chrome, puoi trovare la classe CSS per il widget che desideri personalizzare.

Come puoi vedere nello screenshot qui sopra, il widget che vogliamo personalizzare ha widget di-2 classe aggiunta da WordPress. Ora vai al foglio di stile del tuo tema e aggiungi le tue regole di stile personalizzate.

 .widget-2 background-color: # 858585; colore: #FFF;  .widget-2 .widget-title font-weight: bold;  

Questo è tutto, speriamo che questo articolo ti abbia aiutato ad aggiungere stili personalizzati ai widget di WordPress. Gioca con i CSS e sperimenta con colori diversi. Utilizza i test split A / B per capire quali stili personalizzati funzionano meglio per il tuo sito.

Inoltre, se desideri un modo più semplice per evidenziare il widget del modulo di iscrizione della barra laterale, prova OptinMonster perché offre più progetti, test A / B e molto altro.

Se questo articolo ti è piaciuto, ti preghiamo di iscriverti al nostro canale YouTube per le esercitazioni video di WordPress. Puoi trovarci anche su Twitter e Google+.