Cum să adăugați stiluri personalizate în widgeturile WordPress

Majoritatea widgeturilor din bara laterală din WordPress arată de obicei la fel. Ar fi bine dacă toate widgeturile dvs. ar avea aceeași importanță, dar adevărul este că unele widgeturi sunt mai importante pentru creșterea site-ului dvs. decât altele. De exemplu, un widget de abonament pentru lista de e-mailuri este cu siguranță mai important decât un widget pentru arhive. Nu ar fi frumos dacă ați putea personaliza cu ușurință widget-urile importante? În acest articol, vă vom arăta cum să adăugați stiluri personalizate widget-urilor WordPress.

Folosirea unui plugin pentru a adăuga stiluri personalizate în widgeturile WordPress

Primul lucru pe care trebuie să-l faceți este să instalați și să activați modulul Widget CSS Classes. La activare pur și simplu du-te la Aspect »Widgeturi și faceți clic pe orice widget dintr-o bară laterală pentru a se extinde.

Veți observa un nou Clasa CSS câmpul de mai jos widget-uri, astfel încât să puteți defini cu ușurință o clasă CSS pentru fiecare widget. De exemplu, am adăugat Abonati-va clasă la widget-ul nostru de formular pentru abonament.

Acum poți să te duci la foaia de stil a temei și să adaugi regulile de stil acolo. Asa:

 .subscrie background-color: # 858585; Culoare: #fff;  

Puteți adăuga orice CSS personalizat pe care îl doriți, cum ar fi adăugarea de fundal, schimbarea margini, utilizarea de culori diferite, etc.

Adăugarea manuală a stilurilor personalizate în widgeturile WordPress

Dacă nu doriți să utilizați un plugin, puteți adăuga manual stiluri personalizate widget-urilor WordPress. Implicit, WordPress adaugă clase CSS la diferite elemente, inclusiv widget-uri.

Fiecare widget din bara laterală are o clasă de widgeturi numerotate. Ca și widget-1, widget-2, widget-3 etc. Utilizând instrumentul Inspect Element al Google Chrome, puteți găsi clasa CSS pentru widgetul pe care doriți să-l personalizați.

După cum puteți vedea în captura de ecran de mai sus, widgetul pe care dorim să-l personalizăm are Widget 2 clasa adaugata de WordPress. Acum, mergeți la foaia de stil a temei și adăugați regulile personalizate ale stilului.

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

Asta e tot, sperăm că acest articol v-a ajutat să adăugați stiluri personalizate widget-urilor WordPress. Redați-vă cu CSS și experimentați cu culori diferite. Utilizați testarea split A / B pentru a afla ce stiluri personalizate funcționează cel mai bine pentru site-ul dvs..

De asemenea, dacă doriți o modalitate mai ușoară de a evidenția widget-ul dvs. pentru bara laterală, atunci încercați OptinMonster deoarece oferă mai multe modele, testări A / B și multe altele.

Dacă v-ați plăcut acest articol, vă rugăm să vă abonați la tutorialele video YouTube pentru canalul YouTube pentru WordPress. Ne puteți găsi pe Twitter și pe Google+.