Slik legger du til egendefinerte stiler til WordPress-widgets

De fleste sidebar widgets i WordPress ser vanligvis ut som de samme. Det ville være fint hvis alle dine widgets hadde samme betydning, men sannheten er at noen widgets er viktigere for nettstedets vekst enn andre. For eksempel er en e-postlisteabonnement-widget absolutt viktigere enn en arkiv-widget. Ville det ikke vært fint hvis du enkelt kunne stillegge viktige widgets annerledes? I denne artikkelen vil vi vise deg hvordan du legger til tilpassede stiler til WordPress-widgets.

Bruke et plugin for å legge til tilpassede stiler til WordPress Widgets

Første du må gjøre er å installere og aktivere Widget CSS Classes plugin. Ved aktivering går du ganske enkelt til Utseende »Widgets og klikk på hvilken som helst widget i et sidefelt for å utvide.

Du vil legge merke til en ny CSS klasse feltet under widgets, slik at du enkelt kan definere en CSS-klasse for hver widget. For eksempel la vi til abonnere klassen til vårt abonnementsform-widget.

Nå kan du gå til temaets stilark og legge til stilregler der. Som dette:

 .abonnere bakgrunnsfarger: # 858585; farge: #fff;  

Du kan legge til tilpasset CSS du vil ha, for eksempel legge til bakgrunn, endre grenser, bruk forskjellige farger, osv.

Manuelt legge til egendefinerte stiler til WordPress Widgets

Hvis du ikke vil bruke et plugin, kan du manuelt legge til tilpassede stiler til WordPress-widgetene dine. Som standard legger WordPress CSS-klasser til forskjellige elementer, inkludert widgets.

Hver widget i sidelinjen har en nummerert widgetklasse. Som widget-1, widget-2, widget-3 osv. Ved hjelp av Google Chrome's Inspect Element-verktøy kan du finne CSS-klassen for widgeten du vil tilpasse.

Som du kan se i skjermbildet over, vil widgeten vi vil tilpasse, ha widget-2 klasse lagt til det av WordPress. Gå nå til temaets stilark og legg til dine tilpassede stilregler.

 .widget-2 bakgrunnsfarge: # 858585; farge: #fff;  .widget-2 .widget-title font-weight: bold;  

Det er alt, vi håper denne artikkelen hjalp deg med å legge til tilpassede stiler til WordPress-widgets. Spill rundt med CSS og eksperimentere med forskjellige farger. Bruk A / B delt testing for å finne ut hvilke tilpassede stiler fungerer best for nettstedet ditt.

Også hvis du vil ha en enklere måte å markere din sidebar abonnere skjema widget, så prøv OptinMonster fordi den tilbyr flere design, A / B testing, og mye mer.

Hvis du likte denne artikkelen, vennligst abonner på vår YouTube Channel for WordPress-videoopplæringsprogrammer. Du kan også finne oss på Twitter og Google+.