Cum să schimbi culoarea de fundal în WordPress (Ghid pentru începători)

Culoarea de fundal a site-ului dvs. web stabilește întreaga atmosferă pentru vizitatorii dvs.

Poate vrei ceva curat și profesional, cald și primitor, sau îndrăzneț și creativ – indiferent de atmosfera pe care o cauți, culoarea potrivită de fundal poate face toată diferența.

Vestea bună este că schimbarea acestuia nu necesită abilități tehnice sau instrumente costisitoare. WordPress are funcții încorporate care îți permit să personalizezi culorile cu doar câteva clicuri.

După ce am ajutat mulți proprietari de site-uri să-și personalizeze site-urile, am constatat că majoritatea oamenilor sunt surprinși de cât de simplu și imediat poate fi procesul.

Vă vom ghida prin trei moduri simple de a vă actualiza culoarea de fundal în WordPress, începând cu cea mai prietenoasă opțiune pentru începători și trecând la tehnici puțin mai avansate.

De ce culoarea de fundal WordPress contează cu adevărat 🎨

Gândește-te la culoarea de fundal a site-ului tău ca la pereții casei tale digitale. În timp ce tema ta WordPress vine cu o culoare implicită, alegerea fundalului potrivit poate face o mare diferență în cât de primitor se simte site-ul tău pentru vizitatori.

Iată de ce acest element de design WordPress este atât de important:

• Fac conținutul dvs. mai ușor de citit
• Ajută informațiile importante să iasă în evidență
• Ele stabilesc starea de spirit pentru site-ul dvs. web
• Ele pot face ca site-ul tău să arate mai profesionist

Culoarea de fundal potrivită poate ajuta la evidențierea butoanelor importante și la creșterea conversiilor. De asemenea, puteți utiliza culori diferite pentru a vă organiza mai bine conținutul, cum ar fi utilizarea unor culori specifice pentru diferite categorii de bloguri sau anunțuri speciale.

Și dacă doriți să faceți site-ul dvs. și mai captivant, puteți chiar adăuga fundaluri video pentru a capta atenția vizitatorilor dvs.

Acestea fiind spuse, să vedem cum să schimbăm culoarea de fundal în WordPress. Vă vom arăta diferite modalități de a personaliza culoarea de fundal, astfel încât să puteți sări la secțiunea preferată:

• Cum să schimbați culoarea de fundal în personalizatorul temei WordPress
• Cum să schimbi culoarea de fundal în editorul complet al site-ului (metoda 2024)
• Cum să schimbi culoarea de fundal în WordPress cu CSS
• Cum să schimbi aleatoriu culorile de fundal în WordPress
• Cum să schimbi culoarea de fundal pentru postări individuale
• Bonus Tip: Use a Page Builder for More Design Control
• Întrebări frecvente: Schimbarea culorilor de fundal în WordPress

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

În funcție de tema dvs., este posibil să puteți schimba culoarea de fundal utilizând Personalizatorul de teme WordPress. Acesta vă permite să editați aspectul site-ului dvs. în timp real și fără a fi nevoie să editați codul.

Pentru a accesa personalizatorul de teme WordPress, vă puteți conecta la site-ul dvs. web și apoi accesați Aspect » Personalizare.

Aceasta va deschide personalizatorul de teme, unde veți găsi multiple opțiuni pentru a vă modifica tema. Aceasta include meniurile, culorile, pagina de pornire, widget-urile, imaginea de fundal și multe altele.

Opțiunile specifice disponibile vor depinde de tema WordPress pe care o folosește site-ul tău. Pentru acest tutorial, folosim tema implicită Twenty Twenty-One.

Pentru a schimba culoarea de fundal a site-ului dvs. web, faceți clic pe fila de setări „Culori și mod întunecat” din meniul din stânga.

Apoi, va trebui să faceți clic pe opțiunea „Culoare de fundal” și să alegeți o culoare pentru site-ul dvs. web.

Puteți utiliza instrumentul de selectare a culorilor sau puteți introduce un cod de culoare Hex pentru fundalul dvs.

Când ați terminat cu modificările, nu uitați să faceți clic pe butonul „Publicare”.

Acum puteți vizita site-ul dvs. WordPress pentru a vedea noua culoare de fundal în acțiune.

Tema ta s-ar putea să nu aibă această opțiune disponibilă în Personalizatorul de teme. În acest caz, poți încerca una dintre metodele de mai jos.

Cum să schimbi culoarea de fundal în editorul complet al site-ului (metoda 2024)

Editorul complet al site-ului (FSE) este o platformă de editare WordPress pentru editarea temelor de bloc. Acest editor face extrem de ușor să schimbați culoarea de fundal a site-ului dvs. Să parcurgem împreună procesul.

Începe prin a accesa Aspect » Editor în tabloul de bord WordPress.

Acum, veți vedea un buton „Stiluri” într-una dintre opțiunile meniului.

Continuați și faceți clic pe el.

Acum, faceți clic pe butonul de editare cu creionul.

Acest lucru vă va aduce la interfața de editare.

Acum, veți observa un panou util în partea dreaptă a ecranului. Acesta este centrul dvs. de control al designului, unde puteți schimba culorile, fonturile și multe altele.

Pentru a-ți schimba culoarea de fundal, pur și simplu apasă pe ‘Culori’ în panoul Stiluri.

Apoi, apasă pe ‘Fundal’.

Acum puteți alege între o culoare solidă sau puteți crea un gradient. Simțiți-vă liber să alegeți orice se potrivește stilului dvs. Când sunteți mulțumit de alegerea dvs., apăsați „Salvează” și ați terminat!

Cum să schimbi culoarea de fundal în WordPress cu CSS

Vă întrebați cum să schimbați culoarea de fundal folosind CSS?

Un alt mod în care poți schimba culoarea de fundal a site-ului tău WordPress este prin adăugarea de CSS personalizat în Personalizatorul de teme WordPress.

Pentru a începe, accesați Aspect » Personalizare și apoi mergeți la fila „CSS suplimentar”.

Apoi, puteți introduce următorul cod:

body {
 background-color: #FFFFFF;
}

Tot ce trebuie să faceți este să înlocuiți codul culorii de fundal cu codul culorii pe care doriți să o utilizați pe site-ul dvs. web. Apoi, introduceți codul în fila CSS suplimentar.

Când ați terminat, nu uitați să faceți clic pe butonul „Publicare”. Acum puteți vizita site-ul dvs. web pentru a vedea noua culoare de fundal.

Pentru mai multe detalii, vă rugăm să consultați ghidul nostru despre cum să adăugați cu ușurință CSS personalizat pe site-ul dvs. WordPress.

Cum să schimbi aleatoriu culorile de fundal în WordPress

Acum, căutați o modalitate de a schimba aleatoriu culoarea de fundal în WordPress?

Puteți adăuga un efect lin de schimbare a culorii de fundal pentru a tranziționa automat între diferite culori de fundal. Efectul trece prin mai multe culori până ajunge la culoarea finală.

Pentru a adăuga efectul, va trebui să adăugați cod pe site-ul dvs. WordPress. Vă vom ghida prin procesul de mai jos.

Primul lucru pe care va trebui să-l faci este să afli clasa CSS a zonei unde ai dori să adaugi efectul de schimbare lină a culorii de fundal.

Puteți face acest lucru utilizând instrumentul Inspect din browserul dvs. Tot ce trebuie să faceți este să duceți cursorul mouse-ului la zona pe care doriți să o schimbați culoarea și să faceți clic dreapta pentru a selecta instrumentul Inspect.

După aceea, va trebui să notați clasa CSS pe care doriți să o vizați. De exemplu, în captura de ecran de mai sus, dorim să vizăm zona cu clasa CSS „page-header”.

Apoi, trebuie să deschideți un editor de text simplu pe computerul dvs., cum ar fi Notepad, și să creați un fișier nou. Va trebui să salvați fișierul ca „wpb-background-tutorial.js” pe desktop.

Odată ce acest lucru este făcut, poți adăuga următorul cod în fișierul JS pe care tocmai l-ai creat:

jQuery(function($){
        $('.page-header').each(function(){
            var $this = $(this),
            colors = ['#ec008c', '#00bcc3', '#5fb26a', '#fc7331'];

            setInterval(function(){
                var color = colors.shift();
                colors.push(color);
                $this.animate({backgroundColor: color}, 2000);
            },4000);
        });
        });

Dacă studiezi codul, vei observa că am folosit clasa CSS 'page-header', deoarece aceasta este zona pe care dorim să o țintim pe site-ul nostru.

Vei vedea, de asemenea, că am folosit patru culori folosind codul de culoare hexazecimal. Poți adăuga oricâte culori dorești pentru fundalul tău. Tot ce trebuie să faci este să introduci codurile de culoare în fragment și să le separi folosind o virgulă și ghilimele simple, ca și celelalte culori.

Acum că fișierul dvs. JS este gata, va trebui să îl încărcați în folderul JS al temei dvs. WordPress. Cel mai simplu mod de a face acest lucru este cu un client de protocol de transfer de fișiere (FTP), care vă permite să gestionați direct fișierele de pe serverul dvs. web.

Pentru acest tutorial, vom folosi FileZilla. Este un client FTP gratuit și simplu pentru Windows, Mac și Linux. De fapt, este un instrument comun pe care l-am testat noi înșine pentru gestionarea fișierelor site-ului.

Pentru a începe, va trebui să vă conectați la serverul FTP al site-ului dvs. Puteți găsi credențialele de conectare în e-mailul de la furnizorul dvs. de găzduire sau în panoul de control cPanel al contului dvs. de găzduire.

După ce v-ați autentificat, veți vedea o listă de foldere și fișiere ale site-ului dvs. sub coloana „Site la distanță”. Continuați și navigați la folderul JS din tema site-ului dvs.

Dacă tema ta nu are un folder js, atunci poți crea unul.

Pur și simplu faceți clic dreapta pe folderul temei dvs. în clientul FTP și faceți clic pe opțiunea „Creare director”.

Apoi, va trebui să deschideți locația fișierului dvs. JS sub coloana „Site local”.

Apoi dă clic dreapta pe fișier și apasă pe opțiunea ‘Încărcare’ pentru a adăuga fișierul la tema ta.

Pentru mai multe detalii, poți urma tutorialul nostru despre cum să folosești FTP pentru a încărca fișiere pe WordPress.

Apoi, va trebui să introduceți următorul cod în fișierul funtions.php al temei dvs. Acest cod încarcă corect fișierul JavaScript și scriptul jQuery dependent de care aveți nevoie pentru ca acest cod să funcționeze:

function wpb_bg_color_scripts() {
wp_enqueue_script( 'wpb-background-tutorial',  get_stylesheet_directory_uri() . '/js/wpb-background-tutorial.js', array( 'jquery-color' ), '1.0.0', true );
 }
add_action( 'wp_enqueue_scripts', 'wpb_bg_color_scripts' );

Vă recomandăm să utilizați pluginul gratuit WPCode pentru a adăuga codul în siguranță pe site-ul dvs. Pentru mai multe detalii, consultați ghidul nostru despre cum să copiați fragmente de cod de pe web în WordPress.

Acum puteți vizita site-ul dvs. web pentru a vedea culorile care se schimbă aleatoriu în acțiune în zona pe care ați vizat-o.

Cum să schimbi culoarea de fundal pentru postări individuale

De asemenea, puteți schimba culoarea de fundal a fiecărui post individual de pe blog în WordPress, în loc să utilizați o singură culoare pe întregul site web utilizând CSS personalizat.

Vă permite să schimbați aspectul unor postări specifice și să personalizați fundalurile acestora. De exemplu, puteți personaliza stilul fiecărei postări în funcție de autori sau puteți afișa o culoare de fundal diferită pentru postarea dvs. cea mai comentată.

Poți chiar să schimbi culoarea de fundal pentru postările dintr-o anumită categorie. De exemplu, postările de știri pot avea culori de fundal diferite față de tutoriale.

Primul lucru pe care va trebui să îl faceți este să găsiți clasa ID-ului postării în CSS-ul temei dvs. Puteți face acest lucru vizualizând orice postare de blog și apoi dând clic dreapta pentru a utiliza instrumentul Inspect în browserul dvs.

Iată un exemplu cum ar arăta:

<article id="post-104" class="post-104 post type-post status-publish format-standard hentry category-uncategorized">

Odată ce aveți ID-ul postării, puteți schimba culoarea de fundal a unei postări individuale utilizând următorul CSS personalizat. Pur și simplu înlocuiți ID-ul postării pentru a se potrivi cu al dvs. și codul de culoare de fundal pe care îl doriți.

.post-104 {
background-color: #D7DEB5;
color:#FFFFFF;
}

Pentru a adăuga CSS personalizat, poți folosi Personalizatorul de teme WordPress. Mai întâi, asigură-te că ești conectat la site-ul tău WordPress. Apoi, vizitează postarea de pe blog și dă clic pe opțiunea „Personalizare” din partea de sus.

După aceea, accesați fila CSS suplimentar din meniul din stânga.

Apoi, introduceți CSS-ul personalizat.

Odată ce acest lucru este gata, faceți clic pe butonul „Publică”.

Acum poți vizita postarea de pe blog pentru a vedea noua culoare de fundal.

Dacă vrei să schimbi culoarea de fundal în funcție de autor, comentarii sau categorie, atunci consultă tutorialul nostru detaliat despre cum să stilizezi fiecare postare WordPress diferit.

Sfat bonus: Utilizați un Page Builder pentru un control mai mare asupra designului

Schimbarea culorilor de fundal este doar începutul. Dacă doriți să preluați controlul complet asupra designului site-ului dvs. web, un constructor de pagini poate deschide mult mai multe posibilități.

La WPBeginner, recomandăm SeedProd deoarece este cel mai popular și ușor de utilizat constructor de pagini pentru WordPress. Brandurile noastre partenere l-au folosit, de asemenea, pentru a-și proiecta site-urile web, inclusiv WPForms, Duplicator și Charitable.

Vă oferă control complet asupra designului și vă permite să:

• Proiectați orice pagină fără codare
• Personalizați culorile, aspectele și spațierea
• Creați pagini cu aspect profesional în câteva minute
• Faceți ca paginile dvs. să arate grozav pe toate dispozitivele

Am testat amănunțit instrumentul în mediul nostru de demonstrație și am constatat că este extrem de intuitiv și ușor de utilizat. Pentru a afla mai multe despre experiența noastră, puteți consulta recenzia noastră despre SeedProd.

Începutul este ușor – instalați și activați SeedProd folosind ghidul nostru simplu de instalare a pluginurilor WordPress.

Notă: Puteți începe cu versiunea gratuită, dar SeedProd Pro vă oferă acces la mai multe șabloane și opțiuni de design dacă aveți nevoie de ele.

Odată ce pluginul este activ, vi se va cere să introduceți cheia de licență. Puteți găsi cheia în zona contului dvs. SeedProd. După introducerea cheii, faceți clic pe butonul „Verifică cheia”.

Apoi, poți accesa SeedProd » Pagini.

De aici, faceți clic pe butonul „Adaugă o nouă pagină de destinație”.

După aceea, va trebui să selectați o temă pentru pagina dvs. de destinație. SeedProd oferă multe șabloane frumoase pentru pagini de destinație pentru a începe.

Poți folosi, de asemenea, un șablon gol pentru a începe de la zero. Cu toate acestea, sugerăm utilizarea unui șablon, deoarece este o modalitate mai ușoară și mai rapidă de a crea o pagină de destinație.

Când selectați un șablon, vi se va cere să introduceți un Nume de pagină și să alegeți un URL.

După aceea, pur și simplu faceți clic pe butonul „Salvați și începeți editarea paginii”.

Pe ecranul următor, veți vedea editorul de pagini SeedProd. Aici puteți folosi editorul drag-and-drop pentru a adăuga blocuri din meniul din stânga. Puteți adăuga un titlu, un videoclip, o imagine, un buton etc.

Când derulezi în jos, există mai multe blocuri sub secțiunea Avansat. De exemplu, poți adăuga un cronometru de numărătoare inversă pentru a crea urgență, afișa profiluri sociale pentru a crește numărul de urmăritori, adăuga un formular de opțiuni pentru a colecta lead-uri și multe altele.

Folosind constructorul drag-and-drop, este ușor să schimbați poziția fiecărui bloc de pe pagina dvs. de destinație. Puteți chiar schimba aspectul, dimensiunea, culoarea și fontul textului.

Pentru a schimba culoarea de fundal a paginii tale de destinație, selectează pur și simplu orice secțiune a paginii. Vei vedea acum opțiuni în meniul din stânga ta pentru a edita stilul de fundal, culoarea și a adăuga o imagine.

După ce ai terminat de editat pagina ta de destinație, nu uita să apeși butonul ‘Salvează’ din partea de sus.

În continuare, puteți accesa fila „Conectare” și puteți integra pagina cu diferite servicii de email marketing. De exemplu, vă puteți conecta la Constant Contact, Brevo (fostul Sendinblue) și altele.

După aceea, continuați și faceți clic pe fila „Setări pagină”.

Aici, puteți schimba Starea paginii din Ciornă în Publicare pentru a face pagina dvs. live.

În afară de asta, puteți modifica și setările SEO ale paginii, vizualiza analizele, adăuga cod personalizat la Secțiuni și introduce un domeniu personalizat.

După ce ați terminat, puteți ieși din constructorul de pagini SeedProd și puteți vizita pagina dvs. de destinație personalizată.

Tutorial video

Întrebări frecvente: Schimbarea culorilor de fundal în WordPress

Iată câteva întrebări frecvente adresate de cititorii noștri despre schimbarea culorilor de fundal în WordPress:

Pot folosi o imagine pentru fundal în loc de o culoare?

Da, absolut. Majoritatea temelor WordPress care vă permit să schimbați culoarea de fundal au și o opțiune de a încărca o imagine de fundal.

De obicei, puteți găsi această setare în Personalizatorul temei (Aspect » Personalizare) sub o filă precum „Imagine de fundal”. De acolo, puteți încărca un fișier de pe computerul dvs.

Va afecta viteza site-ului meu schimbarea culorii de fundal?

O culoare de fundal solidă are practic un impact minim asupra vitezei site-ului tău, făcând-o o victorie sigură și ușoară pentru performanță.

Cu toate acestea, utilizarea unei imagini de fundal mari, neoptimizate, poate încetini semnificativ timpii de încărcare a paginii. Dacă utilizați o imagine, recomandăm întotdeauna să o comprimați mai întâi.

Pentru mai multe sfaturi, te rugăm să consulți ghidul nostru despre cum să optimizezi imaginile pentru web fără a pierde calitatea.

Cum găsesc codul hexazecimal corect pentru culoarea brandului meu?

Un cod hexazecimal este un cod format din șase cifre care reprezintă o culoare specifică (de exemplu, #FFFFFF pentru alb pur). Cel mai bun loc pentru a găsi codul hexazecimal al mărcii dvs. este în ghidul oficial de stil al companiei dvs.

Dacă nu aveți unul, puteți folosi un instrument online gratuit precum HTML Color Codes. Selectorul lor de culori vă permite să găsiți codul hexazecimal exact pentru orice nuanță doriți.

Sperăm că acest articol v-a ajutat să învățați cum să schimbați culoarea de fundal în WordPress. De asemenea, ați putea dori să consultați ghidul nostru despre cum să convertiți Figma în WordPress și comparația noastră despre cel mai bun software de design web.

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.