Så här lägger du till anpassade stilar till WordPress-widgetar

De flesta sidlängds widgets i WordPress ser oftast ut på samma sätt. Det skulle vara bra om alla dina widgets hade samma betydelse, men sanningen är att vissa widgets är viktigare för din webbplatss tillväxt än andra. Till exempel är en widget för e-postlista abonnemang avgörande viktigare än en arkivgränssnitt. Skulle det inte vara trevligt om du enkelt kan utforma viktiga widgets annorlunda? I den här artikeln visar vi hur du lägger till anpassade format för WordPress-widgets.

Använda ett plugin för att lägga till anpassade stilar till WordPress Widgets

Det första du behöver göra är att installera och aktivera Widget CSS Classes plugin. Vid aktivering gå helt enkelt till Utseende »Widgets och klicka på vilken widget som helst i ett sidofält för att expandera.

Du kommer att märka en ny CSS-klass fält under dina widgets, så du kan enkelt definiera en CSS-klass för varje widget. Till exempel lade vi till prenumerera klass till vår prenumerationsformulär widget.

Nu kan du gå till ditt temans stilark och lägga till dina stilregler där. Så här:

 .prenumerera bakgrundsfärg: # 858585; färg: #fff;  

Du kan lägga till någon anpassad CSS du vill ha, till exempel lägga till bakgrund, ändra gränser, använda olika färger, etc..

Manuellt lägga till anpassade stilar till WordPress Widgets

Om du inte vill använda ett plugin kan du manuellt lägga till anpassade stilar till dina WordPress-widgets. Som standard lägger WordPress CSS-klasser till olika element, inklusive widgets.

Varje widget i sidofältet har en numrerad widgetklass. Gilla widget-1, widget-2, widget-3, etc. Med hjälp av Google Chromes inspektionsverktyg kan du hitta CSS-klassen för widgeten du vill anpassa.

Som du kan se i skärmdumpen ovan, widgeten vi vill anpassa har widget-2 klass läggs till det av WordPress. Gå nu till ditt temans stilark och lägg till dina anpassade stilregler.

 .widget-2 bakgrundsfärg: # 858585; färg: #fff;  .widget-2 .widget-title font-weight: bold;  

Det är allt, vi hoppas att den här artikeln hjälpte dig att lägga till anpassade stilar till WordPress-widgets. Spela runt med CSS och experimentera med olika färger. Använd A / B split testning för att ta reda på vilka anpassade stilar fungerar bäst för din webbplats.

Också om du vill ha ett enklare sätt att markera din sidobar prenumerera formulär widget, prova OptinMonster eftersom det erbjuder flera mönster, A / B testning och mycket mer.

Om du gillade den här artikeln kan du prenumerera på vår YouTube-kanal för WordPress-videoinstruktioner. Du kan också hitta oss på Twitter och Google+.