Cum să personalizați culorile pe site-ul dvs. WordPress

Culorile joacă un rol important în a face site-ul dvs. atractiv vizual și în stabilirea identității mărcii sale. Din fericire, WordPress face extrem de ușor să personalizați culorile pe întregul site.

Acest lucru este esențial pentru a crea un aspect unic și pentru a oferi coerență și claritate.

Am folosit cu succes culoarea pentru a construi o identitate de marcă puternică pe site-urile noastre web. De exemplu, culoarea portocalie a devenit o parte definitorie a mărcii WPBeginner. Face site-ul nostru memorabil pentru cititori, creând în același timp un design estetic plăcut.

Această utilizare atentă a culorii ajută la asigurarea faptului că marca noastră este ușor de recunoscut, sporind experiența utilizatorului și loialitatea față de marcă.

În acest articol, vă vom arăta cum să personalizați cu ușurință culorile pe site-ul dvs. WordPress, inclusiv culorile de fundal, antet, text și link-uri.

Ce este teoria culorilor?

Înainte de a putea începe personalizarea culorilor pe site-ul dvs. WordPress, este important să înțelegeți teoria culorilor.

Teoria culorilor este studiul culorilor și al modului în care acestea funcționează împreună. Ajută designerii să creeze combinații de culori care se completează reciproc.

Când proiectați un site web, trebuie să alegeți culori care arată bine împreună. Acest lucru va face ca site-ul dvs. web să arate mai atractiv pentru vizitatorii dvs., ceea ce poate îmbunătăți experiența utilizatorului și crește implicarea.

Culorile diferite pot provoca emoții și sentimente diferite la oameni, iar teoria culorilor vă poate ajuta să alegeți combinația potrivită pentru site-ul dvs. web.

De exemplu, roșul este adesea folosit pentru a reprezenta mâncarea și restaurantele. Pe de altă parte, albastrul este de obicei folosit pe site-urile bancare și financiare.

Acest lucru se datorează faptului că roșul poate crea sentimente de căldură, energie și pasiune, în timp ce albastrul semnifică încredere, securitate și calm.

Pe lângă complementarea culorilor, puteți folosi și contrastul culorilor pentru a atrage atenția asupra zonelor importante ale blogului dvs. WordPress.

Acest lucru vă permite să faceți conținutul mai lizibil, să stabiliți o identitate puternică a mărcii și să creați o anumită stare de spirit pe site.

Ce sunt temele WordPress și puteți schimba culorile temei?

Temele WordPress controlează modul în care site-ul dvs. arată utilizatorului. O temă WordPress tipică este un set de șabloane pre-proiectate pe care le instalați pe site-ul dvs. pentru a-i schimba aspectul și aspectul.

Temele fac site-ul dvs. mai atractiv, mai ușor de utilizat și cresc implicarea.

Poți, de asemenea, să creezi propriile teme de la zero folosind plugin-uri precum SeedProd și Thrive Theme Builder.

Cu WordPress, puteți personaliza cu ușurință temele și le puteți schimba culorile de fundal, fonturile, butoanele și linkurile.

Cu toate acestea, rețineți că unele teme vin cu alegeri de culori predefinite, în timp ce altele oferă mai multă flexibilitate pentru a vă alege propriile culori.

Acestea fiind spuse, haideți să vedem cum puteți personaliza cu ușurință culorile în WordPress. Puteți folosi linkurile rapide de mai jos pentru a sări la diferite părți ale tutorialului nostru:

• Cum să personalizați culorile în WordPress
• Cum să schimbați culoarea de fundal în WordPress
• Cum să schimbați culoarea antetului în WordPress
• Cum să schimbați culoarea textului în WordPress
• Cum să schimbați culoarea selecției de text în WordPress
• Cum să schimbați culoarea linkului în WordPress
• Cum să schimbați schema de culori a administratorului în WordPress

Cum să personalizați culorile în WordPress

Puteți personaliza culorile în WordPress folosind multe metode diferite, inclusiv personalizatorul temei, editorul complet al site-ului, CSS personalizat, plugin-uri de creare de pagini și multe altele.

Schimbă culorile folosind personalizatorul de teme

Este foarte ușor să schimbi culorile folosind personalizatorul de teme WordPress încorporat.

Mai întâi, vizitați pagina Aspect » Personalizare din bara laterală de administrare.

Notă: Dacă nu găsiți fila „Personalizare” în tabloul de bord WordPress, înseamnă că utilizați o temă bazată pe blocuri. Derulați în jos la secțiunea următoare a acestui tutorial pentru a afla cum să schimbați culorile într-o temă bazată pe blocuri.

Pentru acest tutorial, vom folosi tema implicită Twenty Twenty-One.

Rețineți că personalizatorul temei poate arăta diferit în funcție de tema pe care o utilizați în prezent.

De exemplu, tema Twenty Twenty-One vine cu un panou „Culori și mod întunecat” care permite utilizatorilor să selecteze o culoare de fundal și să personalizeze modul întunecat.

După deschiderea panoului, pur și simplu faceți clic pe opțiunea „Selectați Culoarea”. Aceasta va deschide Selectorul de Culori, unde puteți alege culoarea de fundal preferată.

Odată ce ați terminat, nu uitați să faceți clic pe butonul „Publicare” din partea de sus pentru a salva modificările și a le face live pe site-ul dvs. web.

Schimbați culorile în editorul complet al site-ului

Dacă utilizați o temă bazată pe blocuri, atunci nu veți avea acces la personalizatorul de teme. Cu toate acestea, puteți utiliza editorul complet al site-ului (FSE) pentru a schimba culorile pe site-ul dvs. web.

Mai întâi, accesați ecranul Aspect » Editor din bara laterală de administrare pentru a lansa editorul complet al site-ului. Acum, trebuie să faceți clic pe pictograma „Stiluri” din colțul din dreapta sus al ecranului.

Aceasta va deschide coloana „Stiluri”, unde trebuie să faceți clic pe panoul „Culori”.

Puteți schimba culorile de fundal, text, link, antet și butoane ale temei de aici.

Când ați terminat, faceți clic pe butonul „Salvare” pentru a salva setările.

Schimbă culorile folosind CSS personalizat

CSS este un limbaj de programare pe care îl puteți utiliza pentru a modifica aspectul vizual al site-ului dvs. web, inclusiv culorile acestuia. Puteți salva CSS personalizat în setările temei dvs. pentru a aplica personalizările pe întregul site.

Cu toate acestea, codul CSS personalizat nu se va mai aplica dacă schimbați temele pe site-ul dvs. web sau dacă actualizați tema existentă.

De aceea, recomandăm utilizarea WPCode, care este cel mai bun plugin pentru fragmente de cod WordPress de pe piață. Este cea mai ușoară modalitate de a adăuga cod CSS personalizat și vă va permite să personalizați în siguranță culorile pe site-ul dvs. WordPress.

Mai întâi, va trebui să instalați și să activați pluginul WPCode. Pentru mai multe instrucțiuni, consultați ghidul nostru pentru începători despre cum să instalați un plugin WordPress.

După activare, vizitați pagina Fragmente de cod » + Adăugați fragment din bara laterală de administrare WordPress.

Aici, pur și simplu faceți clic pe butonul „Utilizați fragmentul” sub opțiunea „Adăugați codul personalizat (Fragment nou)”.

Odată ajuns pe pagina „Creare fragment personalizat”, puteți începe prin a introduce un nume pentru codul dvs.

După aceea, selectați pur și simplu „CSS Snippet” ca „Tip de cod” din meniul derulant.

Pentru această secțiune, adăugăm cod CSS personalizat care modifică culoarea textului pe site:

p   { color:#990000;  }

Pur și simplu adăugați codul CSS personalizat în caseta „Previzualizare cod”.

Odată ce ați făcut acest lucru, derulați în jos la secțiunea „Inserare”.

Aici, puteți alege opțiunea „Inserare automată” dacă doriți ca codul să fie executat automat la activare.

De asemenea, puteți adăuga un shortcode la pagini sau postări specifice WordPress.

Odată ce ați terminat, derulați înapoi în partea de sus a paginii și comutați comutatorul „Inactiv” la „Activ”.

În cele din urmă, trebuie să faceți clic pe butonul „Salvare fragment” pentru a aplica codul CSS pe site-ul dvs.

Schimbați culorile folosind SeedProd

Puteți personaliza culorile și folosind pluginul SeedProd.

Este cel mai bun constructor de pagini WordPress de pe piață și vă permite să creați teme de la zero, fără a folosi cod.

Mai întâi, trebuie să instalați și să activați pluginul SeedProd. Pentru mai multe detalii, puteți citi ghidul nostru pentru începători despre cum să instalați un plugin WordPress.

După activare, accesați pagina SeedProd » Theme Builder din bara laterală de administrare WordPress.

De aici, faceți clic pe butonul „Theme Template Kits” din partea de sus.

Notă: Dacă doriți să creați propria temă de la zero, atunci va trebui să faceți clic pe butonul „+ Adăugare șablon temă nouă” în schimb.

Acest lucru vă va duce la pagina „Selector de kituri de șabloane de temă”. Aici, puteți alege dintre oricare dintre șabloanele de temă predefinite oferite de SeedProd.

Pentru mai multe detalii, consultați tutorialul nostru despre cum să creați ușor o temă WordPress fără cod.

După ce ați ales o temă, veți fi redirecționat către pagina „Șabloane de temă”.

Aici, comutați comutatorul „Activați tema SeedProd” la „Da” pentru a activa tema.

Acum, faceți clic pe linkul „Editare design” de sub orice pagină a temei pentru a deschide editorul drag-and-drop.

Odată ce sunteți acolo, faceți clic pe pictograma roată dințată din partea de jos a coloanei din stânga.

Acest lucru vă va direcționa către setările „CSS global”.

De aici, puteți personaliza culorile fundalului site-ului dvs., textului, butoanelor, linkurilor și multe altele.

Odată ce sunteți mulțumit de alegerile dvs., faceți clic pe butonul „Salvare” pentru a stoca setările.

Cum să schimbați culoarea de fundal în WordPress

Toate temele WordPress vin cu o culoare de fundal implicită. Cu toate acestea, o puteți schimba cu ușurință pentru a vă personaliza site-ul web și a-i îmbunătăți lizibilitatea.

Dacă utilizați o temă bazată pe blocuri, va trebui să schimbați culoarea de fundal folosind editorul complet al site-ului.

Mai întâi, trebuie să vizitați ecranul Aspect » Editor din tabloul de bord WordPress.

Aceasta va lansa editorul complet al site-ului, unde trebuie să faceți clic pe pictograma „Stiluri” din colțul din dreapta sus al ecranului.

După aceea, pur și simplu faceți clic pe panoul „Culori” pentru a deschide setări suplimentare

În acest panou, puteți gestiona acum culoarea implicită a diferitelor elemente de pe site-ul dvs. web.

Aici, trebuie să faceți clic pe opțiunea „Fundal” din secțiunea „Elemente”.

Odată ce acest panou a fost extins, puteți alege culoarea de fundal a site-ului dvs. de aici.

Toate temele WordPress oferă o serie de culori implicite pentru site-ul web din care puteți alege.

Cu toate acestea, dacă doriți să folosiți o culoare personalizată, atunci trebuie să faceți clic pe instrumentul Culoare personalizată. Acesta va deschide Selectorul de culori, unde puteți selecta o culoare la alegere.

Puteți folosi, de asemenea, culori gradient pentru fundalul site-ului dvs. web.

Pentru a face acest lucru, va trebui mai întâi să comutați la fila „Gradient” din partea de sus.

În continuare, puteți alege un gradient implicit din temă sau puteți selecta propriile culori de gradient cu ajutorul instrumentului Selector de culori.

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

De asemenea, puteți schimba fundalul site-ului dvs. web folosind personalizatorul de temă, SeedProd și CSS personalizat.

Pentru instrucțiuni mai detaliate, poate doriți să consultați ghidul nostru pentru începători despre cum să schimbi culoarea de fundal în WordPress.

Cum să schimbați culoarea antetului în WordPress

Multe teme WordPress vin cu un antet încorporat în partea de sus a paginii. Acesta conține de obicei linkuri importante ale paginii, pictograme sociale, CTA-uri și multe altele.

Dacă utilizați o temă bazată pe blocuri, puteți personaliza cu ușurință antetul WordPress folosind editorul complet al site-ului.

Mai întâi, trebuie să vizitați ecranul Aspect » Editor din bara laterală de administrare pentru a lansa editorul complet al site-ului. Odată ajuns acolo, faceți dublu clic pe șablonul „Antet” din partea de sus pentru a-l selecta.

Aceasta va deschide setările antetului în panoul bloc din dreapta. Aici, trebuie să derulați în jos la secțiunea „Culoare” și să faceți clic pe opțiunea „Fundal”.

Aceasta va deschide o fereastră pop-up unde poți alege o culoare implicită pentru antetul tău.

De asemenea, puteți selecta o culoare personalizată deschizând instrumentul Selector de culori.

Pentru a vă personaliza antetul folosind un gradient de culoare, trebuie să comutați la fila „Gradient”.

După aceea, puteți alege o opțiune de gradient implicită sau vă puteți personaliza propria utilizând selectorul de culori.

În cele din urmă, faceți clic pe butonul „Salvare” pentru a vă stoca setările.

Dacă doriți să schimbați culoarea antetului folosind personalizatorul temei sau CSS suplimentar, atunci poate doriți să citiți ghidul nostru pentru începători despre cum să vă personalizați antetul WordPress.

Cum să schimbați culoarea textului în WordPress

Schimbarea culorii textului poate contribui la îmbunătățirea lizibilității blogului dvs. WordPress.

Dacă utilizați o temă bazată pe blocuri, atunci va trebui să schimbați culoarea textului folosind editorul complet al site-ului.

Puteți începe vizitând ecranul Aspect » Editor din zona de administrare WordPress. Aceasta va lansa editorul complet al site-ului, unde trebuie să faceți clic pe pictograma „Stiluri” din colțul din dreapta sus.

În continuare, faceți clic pe panoul „Culori” pentru a accesa setările suplimentare.

Odată ce sunteți acolo, continuați și faceți clic pe opțiunea „Text” din secțiunea „Elemente”.

Odată ce setările culorii textului s-au deschis, veți putea vedea un număr de culori de text sub secțiunea „Implicit”.

Alternativ, puteți folosi și o culoare de text personalizată făcând clic pe instrumentul Culoare personalizată și deschizând Selectorul de culori.

Odată ce ați făcut alegerea, pur și simplu faceți clic pe butonul „Salvare” pentru a stoca modificările.

Sfat bonus: Puteți utiliza instrumentul WebAIM Contrast Checker pentru a verifica dacă culoarea de fundal și cea a textului funcționează împreună. Instrumentul vă poate ajuta să îmbunătățiți lizibilitatea textului pe site-ul dvs. web.

Pentru a personaliza culoarea textului folosind CSS, customizer-ul temei sau SeedProd, poate doriți să consultați ghidul nostru pas cu pas despre cum să schimbați culoarea textului în WordPress.

Cum să schimbați culoarea selecției de text în WordPress

Când un vizitator selectează text pe site-ul dvs. web, acesta va afișa o culoare de fundal. Culoarea implicită este albastru.

Cu toate acestea, uneori, culoarea s-ar putea să nu se potrivească bine cu tema dvs. WordPress și s-ar putea să doriți să o schimbați.

Adăugarea codului CSS în fișierele temei dvs. poate schimba cu ușurință culoarea de selecție a textului. Cu toate acestea, rețineți că trecerea la o altă temă sau actualizarea temei curente va face ca codul CSS să dispară.

De aceea recomandăm utilizarea WPCode, care este cel mai bun plugin pentru fragmente de cod WordPress de pe piață.

Mai întâi, trebuie să instalați și să activați pluginul WPCode. Pentru mai multe instrucțiuni, vă rugăm să consultați ghidul nostru despre cum să instalați un plugin WordPress.

După activare, accesați pagina Fragmente de cod » + Adăugați fragmente din bara laterală de administrare.

Apoi, pur și simplu faceți clic pe butonul „Utilizați fragmentul” sub opțiunea „Adăugați codul dvs. personalizat (Fragment nou)”.

Odată ce sunteți pe pagina „Creare fragment personalizat”, puteți începe prin a introduce un nume pentru fragmentul dvs. de cod.

După aceea, alegeți „Fragment CSS” ca „Tip cod” din meniul derulant din dreapta.

Acum, continuați și copiați și lipiți următorul cod CSS în caseta „Previzualizare cod”:

::-moz-selection {
    background-color: #ff6200;
    color: #fff;
}
 
::selection {
    background-color: #ff6200;
    color: #fff;
}

Puteți schimba culoarea selecției textului înlocuind codul hexazecimal de lângă background-color în fragmentul CSS.

Odată ce ați adăugat codul, derulați în jos la secțiunea „Inserare”.

Aici, alegeți metoda „Inserare automată” pentru a executa codul automat la activare.

După aceea, derulați înapoi în partea de sus și comutați comutatorul „Inactiv” la „Activ”.

În cele din urmă, accesați și faceți clic pe butonul „Salvare fragment” pentru a vă stoca modificările.

Acum, puteți vizita site-ul dvs. web pentru a verifica culoarea de selecție a textului.

Puteți schimba, de asemenea, culoarea selecției textului folosind personalizatorul temei sau un plugin. Pentru mai multe detalii, consultați tutorialul nostru despre cum să schimbați culoarea implicită de selecție a textului în WordPress.

Cum să schimbați culoarea linkului în WordPress

Puteți schimba cu ușurință culoarea linkului în WordPress folosind editorul complet al site-ului sau CSS personalizat.

Dacă utilizați o temă bloc, accesați ecranul Aspect » Editor din bara laterală de administrare.

La deschiderea editorului complet al site-ului, faceți clic pe pictograma „Stiluri” din colțul din dreapta sus.

Apoi, faceți clic pe panoul „Culori” din coloana din dreapta pentru a vedea setări suplimentare.

Odată ajuns acolo, faceți clic pur și simplu pe fila „Linkuri”.

Aceasta va lansa setările pentru culoarea linkurilor și veți vedea mai multe culori implicite pentru linkuri afișate în coloana din dreapta.

Cu toate acestea, puteți utiliza și o culoare personalizată pentru link-uri, făcând clic pe instrumentul Culoare personalizată pentru a deschide Selectorul de culori.

Puteți schimba, de asemenea, culoarea linkului la trecerea mouse-ului folosind FSE. Aceasta înseamnă că culoarea linkului se va schimba atunci când cineva trece mouse-ul peste el.

Mai întâi, va trebui să comutați la fila „Hover” din partea de sus.

Odată ajuns acolo, poți alege o culoare implicită sau personalizată pentru a schimba culoarea linkului la hover.

În cele din urmă, faceți clic pe butonul „Salvare” pentru a vă stoca setările.

Pentru instrucțiuni mai detaliate, puteți consulta ghidul nostru pentru începători despre cum să schimbi culoarea linkului în WordPress.

Cum să Schimbați schema de culori a administratorului în WordPress

Puteți, de asemenea, să schimbați schema de culori a administratorului în WordPress, dacă doriți. Această metodă poate fi utilă dacă doriți ca tabloul de bord al administratorului să se potrivească cu marca site-ului dvs. web sau să utilizați culorile preferate.

Cu toate acestea, rețineți că modificarea schemei de culori a panoului de administrare WordPress nu va afecta partea vizibilă a site-ului dvs. web.

Pentru a schimba schema de culori a administratorului, vizitați pur și simplu pagina Utilizatori » Profil din tabloul de bord WordPress.

Aici veți vedea mai multe scheme de culori lângă opțiunea „Schema de culori a administratorului”.

Alegeți-l pe cel preferat și apoi faceți clic pe butonul „Actualizare profil” din partea de jos a paginii pentru a salva modificările.

Pentru instrucțiuni mai detaliate, consultați ghidul nostru pentru începători despre cum să schimbi schema de culori a administratorului în WordPress.

Sperăm că acest articol v-a ajutat să învățați cum să personalizați culorile pe site-ul dvs. WordPress. De asemenea, ați putea dori să consultați articolul nostru despre cum să alegi o schemă de culori perfectă pentru site-ul tău WordPress și ghidul nostru final despre elementele de design WordPress.

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.