meer verkopen chatbots

Aangepaste stijlen toevoegen aan WordPress-widgets

2 min


107

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 archiveringswidget. 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 . Bij activering ga je gewoon naar Uiterlijk »Widgets en klik je op een widget in een zijbalk om uit te vouwen.

Een CSS-klasse toevoegen om aangepaste stijlen aan een WordPress-widget toe te voegen

U ziet een nieuw veld CSS-klasse onder uw widgets, zodat u eenvoudig een CSS-klasse voor elke widget kunt definiëren. We hebben de subscribeklas bijvoorbeeld toegevoegd aan onze widget voor het abonnementsformulier.

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

1
2
3
4
.subscribe {
background-color: #858585;
color:#FFF;
}

Aangepaste stijlen toevoegen aan WordPress-widgets

U kunt elke gewenste aangepaste CSS toevoegen, zoals achtergrond toevoegen, randen wijzigen, verschillende kleuren gebruiken, enz.

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.

Widgets zoeken met Chrome's Inspect Element-tool

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

1
2
3
4
5
6
7
.widget-2 {
background-color: #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 u een gemakkelijker manier wilt om uw zijbalk-subscribe formulier-widget te markeren, probeer dan OptinMonster omdat het meerdere ontwerpen, A / B-testen en nog veel meer biedt.


Erwin@delaatbusiness.com
Dag, Hulp nodig met internet marketing of websites maken? neem dan contact op

0 Comments

Het e-mailadres wordt niet gepubliceerd. Vereiste velden zijn gemarkeerd met *

Choose A Format
Personality quiz
Series of questions that intends to reveal something about the personality
Trivia quiz
Series of questions with right and wrong answers that intends to check knowledge
Poll
Voting to make decisions or determine opinions
Story
Formatted Text with Embeds and Visuals
List
The Classic Internet Listicles
Countdown
The Classic Internet Countdowns
Open List
Submit your own item and vote up for the best submission
Ranked List
Upvote or downvote to decide the best list item
Meme
Upload your own images to make custom memes
Video
Youtube, Vimeo or Vine Embeds
Audio
Soundcloud or Mixcloud Embeds
Image
Photo or GIF
Gif
GIF format