SÄ hÀr lÀgger du till anpassade stilar till WordPress-widgets

SÄ hÀr lÀgger du till anpassade stilar till WordPress-widgets

De flesta sidofÀltets widgets i WordPress ser vanligtvis likadana ut. Det skulle vara bra om alla dina widgets hade samma betydelse, men sanningen Àr att vissa widgets Àr viktigare för din webbplats tillvÀxt Àn andra. Till exempel Àr en prenumerationswidget för e-postlistan verkligen viktigare Àn en arkivwidget. Skulle det inte vara trevligt om du enkelt kunde utforma viktiga widgets annorlunda? I den hÀr artikeln visar vi dig hur du lÀgger till anpassade stilar till 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 plugin-programmet Widget CSS Classes. Vid aktivering helt enkelt gÄ till Utseende »Widgets och klicka pÄ valfri widget i ett sidofÀlt för att expandera.

Du kommer att mÀrka ett nytt fÀlt under dina widgets, sÄ du kan enkelt definiera en CSS-klass för varje widget. Till exempel har vi lagt till prenumerationsklassen i vÄr prenumerationsformulÀrwidget.

Nu kan du gÄ till temat stilformat och lÀgga till dina stilregler dÀr. SÄ hÀr:


.subscribe { 
background-color: #858585;
color:#FFF;
}

LĂ€gga till anpassade stilar till WordPress-widgets

Du kan lÀgga till vilken anpassad CSS du vill, 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 till CSS-klasser till olika element inklusive widgets.

Varje widget i sidofÀltet har en numrerad widgetklass. Liksom widget-1, widget-2, widget-3, etc. Med hjÀlp av Google Chromes verktyg för inspekteringselement kan du hitta CSS-klassen för den widget du vill anpassa.

Hitta widgetklass med Chrome-verktyget Inspect Element

Som du kan se pÄ skÀrmdumpen ovan har widgeten vi vill anpassa widget-2-klassen tillagd av WordPress. GÄ nu till temat stilformat och lÀgg till dina anpassade stilregler.


.widget-2 { 
background-color: #858585;
color:#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. Lek med CSS och experimentera med olika fÀrger. AnvÀnd A / B-delningstestning för att ta reda pÄ vilka anpassade stilar som fungerar bÀst för din webbplats.

OcksÄ om du vill ha ett enklare sÀtt att markera din sidofÀlt prenumerationsformulÀrwidget, prova sedan OptinMonster eftersom det erbjuder flera mönster, A / B-test och mycket mer.

Om du gillade den hÀr artikeln, prenumerera sedan pÄ vÄr YouTube-kanal för WordPress-sjÀlvstudier. Du kan ocksÄ hitta oss pÄ Twitter och Google+.