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.:

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

Metoda 1: Stilizează widgeturile WordPress cu cod CSS

Widgeturile WordPress folosesc acum editorul de blocuri pentru a adăuga un widget nou și un bloc în zonele de widgeturi și barele laterale. Aceasta înseamnă că veți vedea unele opțiuni de stilizare a blocurilor pentru unele dintre blocurile implicite WordPress.

De exemplu, dacă accesați pagina Aspect » Widgeturi și faceți clic pe un bloc WordPress implicit, veți vedea opțiuni pentru a schimba culorile și tipografia blocului.

Cu toate acestea, nu toate blocurile vin cu aceste opțiuni de widget, mai ales dacă aceste blocuri nu sunt cele implicite WordPress. Din fericire, unul dintre avantajele utilizării editorului de blocuri pentru widgeturi este că puteți adăuga cu ușurință clase CSS personalizate fiecărui bloc.

Tot ce trebuie să faceți este să faceți clic pe widgetul unde doriți să adăugați stiluri personalizate.

Apoi, trebuie să derulați în jos la fila „Avansat” din panoul Bloc. De aici, puteți adăuga o clasă CSS personalizată.

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

Acum, puteți adăuga CSS personalizat temei dvs. WordPress vizând acea clasă CSS particulară.

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

O altă metodă eficientă pentru adăugarea de CSS personalizat este utilizarea WPCode.

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, continuați și 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)

O problemă cu metoda de mai sus este că trebuie să scrieți cod CSS. Cu toate acestea, nu toți utilizatorii cunosc CSS sau pur și simplu nu doresc să scrie cod singuri.

În acest caz, puteți utiliza CSS Hero. Este un plugin personalizat pentru stilizarea WordPress care vă permite să adăugați CSS personalizat temei WordPress fără a scrie cod.

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.

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.