Aangepaste stijlen toevoegen aan WordPress-widgets

De meeste sidebar-widgets in WordPress zien er meestal hetzelfde uit. Het zou prima zijn als al je widgets hetzelfde belang hadden, maar de waarheid is dat sommige widgets belangrijker zijn voor de groei van je site dan andere. Een abonnementswidget voor een e-maillijst is bijvoorbeeld zeker belangrijker dan een archievenwidget. Zou het niet mooi zijn als je belangrijke widgets gemakkelijk anders kon stylen? In dit artikel laten we u zien hoe u aangepaste stijlen aan WordPress-widgets kunt toevoegen.

Een plug-in gebruiken om aangepaste stijlen toe te voegen aan WordPress-widgets

Het eerste wat u hoeft te doen is de widget Widget CSS Classes installeren en activeren. Ga bij activering gewoon naar Uiterlijk »Widgets en klik op een widget in een zijbalk om uit te vouwen.

Je zult een nieuwe opmerken CSS-klasse onder uw widgets, zodat u eenvoudig een CSS-klasse voor elke widget kunt definiëren. We hebben bijvoorbeeld het abonneren klasse naar onze widget voor het abonnementsformulier.

Nu kunt u naar de stylesheet van uw thema gaan en daar uw stijlregels toevoegen. Zoals dit:

 .abonneren background-color: # 858585; color: # fff;  

U kunt elke gewenste aangepaste CSS toevoegen, zoals achtergrond toevoegen, randen wijzigen, andere kleuren gebruiken, enzovoort.

Handmatig aangepaste stijlen toevoegen aan WordPress-widgets

Als u geen plug-in wilt gebruiken, kunt u handmatig aangepaste stijlen toevoegen aan uw WordPress-widgets. WordPress voegt standaard CSS-klassen toe aan verschillende elementen, waaronder widgets.

Elke widget in uw zijbalk heeft een genummerde widgetklasse. Zoals widget-1, widget-2, widget-3, enzovoort. Met het Inspect Element-gereedschap van Google Chrome kunt u de CSS-klasse vinden voor de widget die u wilt aanpassen.

Zoals je kunt zien in de bovenstaande schermafbeelding, heeft de widget die we willen aanpassen widget-2 klasse toegevoegd door WordPress. Ga nu naar de stylesheet van je thema en voeg je eigen stijlregels toe.

 .widget-2 background-colour: # 858585; color: # fff;  .widget-2 .widget-title font-weight: bold;  

Dat is alles, we hopen dat dit artikel u heeft geholpen aangepaste stijlen toe te voegen aan WordPress-widgets. Speel rond met de CSS en experimenteer met verschillende kleuren. Gebruik A / B-scheidingstests om erachter te komen welke aangepaste stijlen het beste werken voor uw site.

Ook als je een gemakkelijker manier wilt om je zijbalk-subscribe-formulierwidget te markeren, probeer dan OptinMonster omdat het meerdere ontwerpen, A / B-testen en nog veel meer biedt.

Als je dit artikel leuk vond, meld je dan aan voor onze YouTube-video-tutorials over WordPress. U kunt ons ook vinden op Twitter en Google+.