Cum să adăugați stiluri personalizate la widgeturile WordPress (2 moduri)

Construirea de site-uri WordPress ne-a învățat că micile detalii fac diferențe mari. Stilul personalizat al widget-urilor poate transforma site-urile bune în site-uri grozave.

La WPBeginner, facem ca fiecare element să funcționeze împreună. Luați, de exemplu, widget-urile noastre de bară laterală.

Le-am personalizat aspectul pentru a evidenția resursele importante și pentru a le integra perfect cu designul site-ului nostru. Acest lucru ne ajută să construim încredere cu milioane de vizitatori.

În acest ghid, vom împărtăși cele mai ușoare metode pentru a personaliza stilurile widgeturilor WordPress. Veți învăța tehnici pentru a face widgeturile dvs. să arate profesional și să se integreze perfect cu tema dvs.

De ce să adăugați stiluri personalizate la widgeturile WordPress?

În mod implicit, widgeturile WordPress folosesc stilurile temei dvs., care s-ar putea să nu se potrivească întotdeauna cu obiectivele dvs. de design. Adăugarea de stiluri personalizate vă oferă mai mult control asupra aspectului widgeturilor dvs.

Iată de ce merită personalizat:

• 🎨 Potriviți-vă marca: Stilurile personalizate vă permit să aliniați culorile, fonturile și spațierea widget-urilor cu brandingul site-ului pentru un aspect mai coeziv.
• 👓 Îmbunătățește lizibilitatea: Uneori, aspectul implicit al widgetului nu este ușor de citit. Stilul poate ajuta la îmbunătățirea dimensiunilor fonturilor, a contrastului sau a alinierii pentru o experiență mai bună a utilizatorului.
• 🌟 Evidențiați conținutul important: Doriți ca postările recente, apelul la acțiune sau informațiile de contact să iasă în evidență? CSS personalizat poate face aceste widget-uri mai atrăgătoare.
• 🧹 Curăță designurile aglomerate: Dacă un widget pare prea aglomerat sau deplasat, stilurile personalizate ajută la simplificarea aspectului său și la integrarea sa mai fluidă în aspectul tău.
• 🧩 Creați layout-uri unice: Stilurile personalizate deschid posibilități de layout, cum ar fi transformarea unui widget text simplu într-o cutie promoțională stilizată sau alinierea mai multor widget-uri într-o grilă.

Pe scurt, stilizarea widgeturilor dvs. vă ajută să depășiți aspectul implicit și să creați un site web mai rafinat și profesional.

Acestea fiind spuse, să vedem cum să adăugăm cu ușurință stiluri personalizate la widget-urile dvs. WordPress.

Vă vom arăta 2 modalități de a vă personaliza widgeturile WordPress cu stiluri personalizate. Puteți folosi aceste linkuri rapide pentru a sări la cea care funcționează cel mai bine pentru dvs.:

• Method 1: Style WordPress Widgets With CSS Code
• Metoda 2: Stilizează widgeturile WordPress cu CSS Hero (fără cod)
• Întrebări frecvente despre opțiunile de stilizare în WordPress

Metoda 1: Stilizează widgeturile WordPress cu cod CSS

Deoarece widget-urile WordPress folosesc acum editorul de blocuri, aveți câteva moduri diferite de a le schimba aspectul, în funcție de cât de mult control aveți nevoie.

Vom parcurge mai întâi opțiunile încorporate, apoi vă vom arăta cum să adăugați stiluri complet personalizate:

1. Utilizarea setărilor implicite ale blocurilor

Înainte de a adăuga cod personalizat, merită să verificați dacă blocul are deja setările de care aveți nevoie.

Dacă mergeți la pagina Aspect » Widget-uri și faceți clic pe un bloc specific, veți vedea adesea opțiuni în panoul de setări al blocului pentru a schimba culorile și tipografia.

2. Adăugarea unei clase CSS personalizate

Dacă setările implicite nu sunt suficiente, puteți adăuga o „clasă” specifică la widget. Aceasta acționează ca o etichetă de nume care vă permite să vizați doar acel widget cu codul dvs. personalizat.

Pur și simplu faceți clic pe widgetul unde doriți să adăugați stiluri personalizate. Apoi, derulați în jos la fila „Avansat” din panoul Bloc. De aici, puteți adăuga o clasă CSS personalizat.

Pentru acest tutorial, continuați și introduceți latest-articles în câmp. Asigurați-vă că nu adăugați un punct (.) la începutul numelui clasei.

Nu uitați să salvați setările widgetului făcând clic pe butonul „Actualizare”.

3. Aplicarea stilurilor personalizate

Acum că ați atribuit widgetului dvs. un nume de clasă, trebuie să adăugați codul care îi spune WordPress-ului cum să îl stilizeze. Există două modalități de a face acest lucru:

Opțiunea 1: Utilizarea personalizatorului de temă

Aceasta este cea mai rapidă modalitate de a adăuga cod dacă doriți doar să îl testați.

Pur și simplu accesați pagina Aspect » Personalizare și comutați la fila „CSS suplimentar”. Acolo, veți vedea o previzualizare live a site-ului dvs. web cu o casetă pentru a adăuga regulile dvs. CSS.

Opțiunea 2: Utilizarea WPCode (Recomandat)

Recomandăm utilizarea WPCode deoarece salvează stilurile dvs. personalizate chiar dacă schimbați tema mai târziu. Este, de asemenea, cea mai sigură modalitate de a adăuga fragmente de cod în WordPress.

L-am testat extensiv și am constatat că este una dintre cele mai sigure modalități de a integra cod personalizat în tema dvs. Dacă gestionați numeroase fragmente CSS, WPCode facilitează organizarea și urmărirea acestora.

Pentru mai multe detalii despre caracteristicile și beneficiile sale, nu ezitați să consultați recenzia noastră WPCode.

Mai întâi, asigurați-vă că instalați pluginul WPCode. Pentru instrucțiuni pas cu pas, puteți citi ghidul nostru despre cum să instalați un plugin WordPress.

Apoi, accesați Code Snippets » + Add Snippet și selectați ‘Add Your Custom Code (New Snippet). Apoi, faceți clic pe butonul ‘+ Add Custom Snippet’.

Acum, dați un nume noului dvs. CSS personalizat. Poate fi ceva simplu, cum ar fi „Stil widget personalizat”.

Apoi, schimbați Tipul de cod în „Fragment CSS”.

Apoi, adăugați CSS-ul personalizat în câmp.

Iată câteva CSS de bază pe care le-am folosit:

.latest-articles { 
background-color:#def4f1;
padding:10px;
}

Odată terminat, derulați în jos la secțiunea Inserare. Asigurați-vă că Metoda de inserare este setată la „Inserare automată” și Locația este „Antetul întregului site”.

După aceea, comutați butonul din colțul din dreapta sus până când afișează „Activ” și faceți clic pe „Salvare fragment”.

După ce ați adăugat CSS-ul personalizat, puteți vizualiza site-ul dvs. WordPress pe mobil sau desktop pentru a-l vedea în acțiune.

Iată cum arată al nostru pe site-ul nostru demo WordPress:

Metoda 2: Stilizează widgeturile WordPress cu CSS Hero (fără cod)

Scrierea codului CSS manual poate fi dificilă pentru începători. O mică greșeală ar putea deteriora aspectul site-ului dvs., iar învățarea sintaxei necesită timp.

Dacă nu doriți să vă ocupați de cod, puteți utiliza CSS Hero. Este un plugin de stilizare vizuală care vă permite să vă personalizați widgeturile cu o interfață simplă de tip point-and-click.

Puteți afla mai multe despre plugin în recenzia CSS Hero.

Mai întâi, trebuie să instalați și să activați pluginul CSS Hero. Pentru mai multe detalii, consultați ghidul nostru pas cu pas despre cum să instalați un plugin WordPress.

După activare, pluginul va adăuga un nou element de meniu în bara de administrare WordPress din partea de sus.

Apoi, trebuie să vizitați pagina unde puteți vedea widget-ul pe care doriți să-l stilizați și să faceți clic pe butonul CSS Hero din partea de sus.

Aceasta va deschide pagina în interfața editorului CSS Hero.

Este un editor live unde puteți pur și simplu să indicați și să faceți clic pe orice element de pe site-ul dvs. web și să îi schimbați stilul.

Pur și simplu duceți mouse-ul peste widgetul pe care doriți să îl stilizați. Apoi, faceți clic pentru a-l selecta.

În acest exemplu, am selectat widgetul nostru de căutare.

După aceea, puteți folosi meniul din stânga pentru a vă stiliza widgetul oricum doriți. Aceasta include opțiuni avansate de stilizare precum gradienți, tipografie, padding, margini și borduri.

În exemplul de mai jos, am modificat dimensiunea fontului widget-ului de căutare WordPress, astfel încât să iasă mai mult în evidență.

De asemenea, puteți modifica elemente specifice ale widgetului, dacă este necesar.

De exemplu, am decis să schimbăm raza bordurii butonului și a câmpurilor de căutare. Astfel, acestea arată mai rotunjite și mai stilate.

După ce ați terminat, nu uitați să faceți clic pe butonul „Salvare” pentru a vă stoca setările.

Apoi, previzualizați site-ul dvs. web pentru a vedea noul dvs. design WordPress în acțiune.

Întrebări frecvente despre opțiunile de stilizare în WordPress

Iată câteva întrebări pe care cititorii noștri le-au pus frecvent despre stilizarea diferitelor elemente în WordPress:

Cum adaug widgeturi personalizate în WordPress?

Pentru a adăuga un widget personalizat, accesați Aspect » Widgeturi în tabloul de bord și faceți clic pe butonul de adăugare bloc (plus). Puteți apoi selecta orice bloc disponibil, cum ar fi text, imagini sau postări recente, și îl puteți plasa în bara laterală sau în zona de subsol.

Cum adăugați stiluri în WordPress?

Cea mai sigură metodă de a adăuga stiluri este prin utilizarea tab-ului CSS Suplimentar din Personalizatorul de Temă sau a unui plugin precum WPCode. Aceste metode vă permit să adăugați cod CSS personalizat fără a modifica fișierele de bază ale temei dvs., asigurându-vă că modificările nu se pierd în timpul actualizărilor.

Poți personaliza un widget?

Da, poți personaliza aproape fiecare aspect al unui widget. Widgeturile moderne WordPress au setări integrate pentru culorile de fundal și tipografie. Pentru un control mai avansat, poți atribui o clasă CSS specifică widgetului și îl poți stiliza manual cu cod.

Cum să creezi un widget de meniu personalizat în WordPress?

Poți adăuga un meniu personalizat utilizând blocul Meniu de Navigare în zona widgeturilor tale. Mai întâi, creează meniul tău specific în Aspect » Meniuri, apoi selectează pur și simplu acel meniu din opțiunile dropdown din setările blocului Meniu de Navigare.

Cum să construiești un widget personalizat?

Dacă ai nevoie de funcționalități specifice care nu se găsesc în blocurile implicite, poți construi un widget personalizat scriind un plugin sau utilizând un instrument precum WPCode. Totuși, dacă dorești pur și simplu un design personalizat, de obicei poți realiza acest lucru grupând blocurile existente și aplicând stiluri CSS personalizate.

Sperăm că acest articol v-a ajutat să învățați cum să adăugați stiluri personalizate la widget-urile WordPress. De asemenea, ați putea dori să vedeți selecția noastră de cele mai bune constructori de pagini drag-and-drop pentru WordPress și comparația noastră de avantaje și dezavantaje între teme WordPress gratuite vs premium.

Dacă ți-a plăcut acest articol, te rugăm să te abonezi la canalul nostru de YouTube pentru tutoriale video WordPress. Ne poți găsi, de asemenea, pe Twitter și Facebook.