Cum să creezi un fundal cu gradient în WordPress

Cum să creezi un fundal cu gradient în WordPress

Codul CSS în designul web include opțiunea de gradient, astfel poți adăuga fundaluri gradient cu doar CSS, fără imagini slice‑s. În WordPress nu poți aplica gradient direct la tagul body așa cum faci cu fundaluri solide, însă poți folosi un container div care să înconjoare întregul site. Multe teme bazate pe framework-uri CSS vin deja cu un astfel de div, dar dacă tema ta nu are unul, îl poți adăuga.

Pasul 1

Accesează directorul wp-admin al site-ului și autentifică-te în panoul WordPress. Navighează la Aspect și apasă pe Editor. Din secțiunea Templă selectează header.php pentru a încărca fișierul HTML care conține tagul body al site-ului.

Pasul 2

Caută un div cu ID-ul container imediat sub tagul body în fișierul header.php. Dacă nu îl găsești, creează-l. Ar trebui să arate așa:
<div id='container'> ...
Salvează modificările apăsând butonul albastru Actualizează fișierul. Dacă ai adăugat un div, deschide footer.php în editor și inserează </div> imediat înainte de tagul de închidere </body>.

Pasul 3

Deschide style.css în editor. Adaugă următorul cod la sfârșitul fișierului:

#container {
  background-color: #038394;
  background-image: linear-gradient(to bottom, #038394, #00CCCC);
  background-image: -webkit-linear-gradient(top, #038394, #00CCCC);
  background-image: -moz-linear-gradient(top, #038394, #00CCCC);
}

Acest cod stabilește un fallback pentru browserele care nu suportă gradientul. Setarea background-image cu linear-gradient creează efectul de fundal gradient. Trebuie să specifici direcția (de ex. to bottom) și două culori care se estompează una în cealaltă. Pentru a asigura compatibilitatea, adaugă liniile cu prefixele -webkit- și -moz- pentru Chrome, Safari și Firefox.

Apasă butonul albastru Actualizează fișierul pentru a salva style.css. Fundalul gradient ar trebui să fie acum vizibil pe fiecare pagină a site-ului tău WordPress.

Îndrumare suplimentară

• Setează marginile la zero pentru div-ul container dacă vezi spațiu alb în jurul gradientului.