Imaginile de fundal pot transforma complet aspectul și senzația site-ului dvs. WordPress. Dar imaginile întinse, alinierea incorectă sau problemele legate de dimensiunea fișierului pot apărea în cale. Mai ales dacă nu sunteți sigur ce metodă să folosiți.
Din experiența noastră în gestionarea a zeci de site-uri WordPress, am învățat că majoritatea oamenilor fac acest proces mult mai greu decât este necesar.
Vestea bună este că WordPress oferă mai multe opțiuni încorporate pentru adăugarea de imagini de fundal, plus că există pluginuri excelente care fac acest lucru și mai ușor. Odată ce cunoașteți metodele corecte, puteți adăuga fundaluri frumoase întregului site, paginilor individuale sau secțiunilor specifice în doar câteva clicuri.
În acest ghid, vă vom arăta 5 moduri fiabile de a adăuga imagini de fundal în WordPress care funcționează pentru orice nivel de experiență. 🎨
De ce să adăugați o imagine de fundal în WordPress?
Adăugarea unei imagini pe site-ul tău WordPress îl poate face mai atractiv pentru vizitatori. Poți capta rapid atenția utilizatorilor și îi poți implica cu conținutul tău.
De asemenea, vă permite să personalizați designul site-ului dvs. web în funcție de marca dvs. De exemplu, puteți încărca fotografii subtile ale produselor dvs. sau ale mascotei mărcii în fundal.
În plus, puteți adăuga un videoclip YouTube ca fundal pe tot ecranul sau o prezentare de imagini care va da viață conținutului dvs.
Cu toate acestea, vă sugerăm să selectați imagini de fundal care nu distrag atenția și nu îngreunează citirea conținutului de pe blogul dvs. WordPress. Un fundal ar trebui să îmbunătățească experiența utilizatorului și să ajute la transmiterea mesajului dvs. vizitatorilor.
În plus, este important să alegeți o imagine de fundal care este prietenoasă cu dispozitivele mobile și nu va afecta viteza site-ului dvs. web. Altfel, va afecta SEO WordPress.
În acest articol, vom împărtăși diferite modalități prin care puteți adăuga o imagine de fundal WordPress.
Vom acoperi mai multe metode, inclusiv personalizatorul temei WordPress, editorul complet al site-ului, plugin, constructor de teme și multe altele. Pur și simplu faceți clic pe linkul de mai jos pentru a sări la secțiunea dvs. preferată:
- Metoda 1. Adăugați o imagine de fundal folosind personalizatorul temei WordPress
- Metoda 2. Adăugați o imagine de fundal personalizată folosind Editorul complet al site-ului
- Metoda 3. Adăugați o imagine de fundal folosind WordPress Theme Builder
- Metoda 4. Adăugați o imagine de fundal folosind CSS Hero
- Metoda 5. Adăugați imagini de fundal personalizate oriunde în WordPress folosind cod CSS
- Resurse bonus: Ghiduri pentru fișiere imagine și media pentru a îmbunătăți experiența utilizatorului pe site-ul WordPress
Gata? Să începem.
Metoda 1. Adăugați o imagine de fundal folosind personalizatorul temei WordPress
Cele mai populare teme WordPress vin cu suport personalizat pentru fundal. Această funcție vă permite să setați cu ușurință o imagine de fundal. Vă recomandăm această metodă dacă tema dvs. o suportă.
Cu toate acestea, dacă opțiunea de meniu a personalizatorului dvs. lipsește, atunci tema dvs. ar putea avea activată editarea completă a site-ului. În secțiunea următoare, vom acoperi cum să utilizați editorul complet al site-ului pentru a schimba imaginea de fundal.
Între timp, pentru a utiliza „Customizer”, trebuie să vizitați pagina Aspect » Personalizare din administrarea WordPress.
Aceasta va lansa personalizatorul de teme WordPress, care îți permite să modifici diferite setări ale temei în timp ce vizualizezi o previzualizare live a site-ului tău.
Rețineți că opțiunile pe care le vedeți vor varia în funcție de tema WordPress pe care o utilizați. În acest tutorial, folosim tema Sydney.
Dacă utilizați o temă diferită, poate fi necesar să consultați documentația acelei teme. Dacă nu găsiți o imagine de fundal în personalizator, puteți contacta, de asemenea, dezvoltatorul temei pentru a afla cum să adăugați una.
În opțiunile de personalizare ale temei Sydney, trebuie să faceți clic pe „General” în panoul din stânga.
Odată ce ați făcut acest lucru, veți vedea diferite opțiuni „Generale” pentru a vă personaliza tema Sydney.
În acest moment, va trebui să faceți clic pe secțiunea „Imagine de fundal”.
Pe ecranul următor, veți vedea opțiunea de a adăuga imaginea de fundal.
Continuați și faceți clic pe butonul „Selectați imaginea”.
Aceasta va deschide biblioteca media WordPress.
Aici puteți încărca o imagine de pe computerul dvs. sau puteți selecta una pe care ați încărcat-o anterior.
După ce ați ales imaginea pentru fundal, va trebui să faceți clic pe butonul „Selectare”.
Aceasta va închide fereastra pop-up media și veți vedea o previzualizare a imaginii de fundal selectate în personalizatorul de temă.
În panoul din stânga, puteți ajusta poziția imaginii (sus, centru, jos, stânga, dreapta) pentru a controla cum apare în fundal. De asemenea, o puteți redimensiona folosind meniul derulant „Dimensiunea imaginii” meniu derulant pentru a se potrivi, umple sau acoperi zona.
Dacă doriți ca imaginea să se repete pe fundal, bifați căsuța pe care scrie „Repetă imaginea de fundal”. Puteți, de asemenea, să faceți imaginea să deruleze odată cu conținutul paginii atunci când bifați căsuța „Derulează cu pagina”.
Odată ce sunteți mulțumit de cum arată, faceți clic pe butonul „Publicare” din partea de sus pentru a salva setările.
Acesta este tot. Ați adăugat cu succes o imagine de fundal pe site-ul dvs. WordPress. Continuați și vizitați site-ul dvs. web pentru a o vedea în acțiune.
Metoda 2. Adăugați o imagine de fundal personalizată folosind Editorul complet al site-ului
Dacă folosiți o temă WordPress bazată pe blocuri, atunci puteți adăuga o imagine de fundal personalizată folosind editorul complet al site-ului (FSE).
Editorul complet al site-ului vă permite să editați designul site-ului dvs. folosind blocuri. Este la fel ca editarea unei postări de blog sau a unei pagini folosind editorul de blocuri WordPress.
Pentru acest tutorial, vom folosi tema implicită „Twenty Twenty-Two”. Pentru a lansa editorul complet al site-ului, accesați pur și simplu Aspect » Editor din zona de administrare WordPress.
Odată ce sunteți în editorul complet al site-ului, va trebui să adăugați un bloc „Copertă” la șablonul dvs. pentru a încărca o imagine de fundal.
Pur și simplu faceți clic pe semnul „+” din partea de sus și adăugați un bloc „Copertă”.
Pentru a adăuga o imagine de fundal la blocul „Copertă”, faceți clic pe butonul „Încărcare” sau „Bibliotecă media”.
Aceasta va deschide fereastra pop-up pentru încărcarea media WordPress.
Următorul pas este să alegeți o imagine pe care ați dori să o folosiți ca fundal al site-ului web.
Când ați ales imaginea, pur și simplu faceți clic pe butonul „Selectare”.
Odată ce imaginea este adăugată în blocul „Copertă”, va trebui să o setați ca fundal al paginii.
Pentru a face acest lucru, pur și simplu faceți clic pe pictograma „Vizualizare listă” din partea de sus (pictograma cu 3 linii). Aceasta va deschide o vizualizare schiță a elementelor temei, cum ar fi antetul site-ului și subsolul.
După aceea, pur și simplu trageți și plasați toate elementele șablonului sub blocul „Copertă” din vizualizarea listă.
Odată ce toate sunt sub ea, imaginea blocului „Copertă” va apărea ca fundal al site-ului.
După aceea, puteți ajusta imaginea de fundal făcând clic pe blocul „Copertă” și selectând pictograma cu rotița dințată din colțul din dreapta sus al ecranului. Aceasta va deschide panoul de setări „Bloc”.
Aici veți găsi opțiuni pentru a face imaginea un fundal fix, a ajusta stratul de suprapunere, a edita culoarea și multe altele.
Când ați terminat, nu uitați să faceți clic pe butonul „Salvează”.
Și gata! Ați adăugat cu succes o imagine de fundal folosind editorul complet al site-ului.
Metoda 3. Adăugați o imagine de fundal folosind WordPress Theme Builder
Un alt mod în care puteți adăuga imagini de fundal personalizate pe site-ul dvs. web este prin utilizarea unui constructor de teme WordPress precum SeedProd. Este cel mai bun plugin pentru pagini de destinație WordPress cu funcționalitate drag-and-drop care vă permite să personalizați cu ușurință designul site-ului dvs. web fără a atinge o singură linie de cod.
De asemenea, folosim SeedProd pe unele dintre site-urile noastre de marcă și a funcționat foarte bine. Pentru mai multe detalii despre experiența noastră, puteți consulta recenzia noastră extinsă despre SeedProd.
Pentru acest tutorial, vom folosi versiunea SeedProd Pro deoarece include constructorul de teme. Există și o versiune SeedProd Lite pe care o puteți încerca gratuit.
Mai întâi, va trebui să instalați și să activați pluginul SeedProd. Dacă aveți nevoie de ajutor, vă rugăm să consultați ghidul nostru despre cum să instalezi un plugin WordPress.
La activare, veți vedea ecranul de bun venit SeedProd în tabloul de bord WordPress.
Apoi, va trebui să introduceți cheia de licență și să faceți clic pe butonul „Verifică cheia” pentru a activa versiunea pro a pluginului. Puteți găsi cheia de licență în zona contului dvs. SeedProd.
Odată ce totul este setat, va trebui să accesați SeedProd » Theme Builder în panoul de administrare WordPress.
Apăsați butonul „Teme” din partea de sus.
SeedProd va oferi acum mai multe șabloane de teme din care puteți alege.
Puteți trece cu mouse-ul peste și faceți clic pe orice șablon doriți să utilizați. Pentru acest tutorial, vom folosi șablonul temei „Starter”.
De aici, SeedProd va genera diferite șabloane, cum ar fi pagina principală, postarea unică, pagina unică, bara laterală, antetul și multe altele.
Pentru a adăuga o imagine de fundal care apare pe întregul site web și pe toate șabloanele temei, continuați și faceți clic pe opțiunea „Editați designul” sub CSS global.
Pe ecranul următor, veți vedea setări CSS globale pe care le puteți modifica.
Pur și simplu faceți clic pe opțiunea „Fundal” pentru a începe personalizarea.
După aceea, veți vedea opțiunile „Imagine de fundal”.
Continuați și faceți clic pe „Utilizați propria imagine” pentru a încărca imaginea dvs. Alternativ, puteți face clic pe butonul „Utilizați o imagine de stoc” pentru a căuta o imagine de stoc pe care să o utilizați ca fundal al site-ului dvs. web.
După ce ați adăugat o imagine de fundal, constructorul SeedProd va afișa o previzualizare live.
Puteți ajusta poziția fundalului dacă este necesar. De asemenea, puteți alege dacă să utilizați acoperirea pe tot ecranul sau să o repetați, printre alte opțiuni.
În plus, puteți edita nivelul de întunecare al imaginii de fundal prin glisarea cursorului „Dim Background”. Cu cât scorul este mai mare, cu atât imaginea va fi mai întunecată.
Odată ce ați terminat editarea imaginii de fundal, pur și simplu faceți clic pe butonul „Salvează” din partea de sus și închideți setările CSS globale.
Dacă doriți să adăugați o imagine de fundal personalizată pentru diferite părți ale site-ului dvs., puteți edita acele șabloane de temă individuale în SeedProd. Pentru mai multe detalii, nu ezitați să consultați ghidul nostru despre cum să creezi ușor o temă WordPress personalizată.
Metoda 4. Adăugați o imagine de fundal folosind CSS Hero
CSS Hero este un plugin WordPress care vă permite să faceți orice modificări temei dvs. fără codare.
Puteți adăuga imagini de fundal rapid în câțiva pași simpli. Dar mai întâi, va trebui să instalați și să activați CSS Hero. Pentru mai multe detalii, vă rugăm să consultați ghidul nostru despre cum să instalați un plugin WordPress.
Odată ce ați făcut acest lucru, puteți începe să vă personalizați site-ul web.
Primul lucru pe care trebuie să-l faceți este să deschideți pagina de pornire în browser. Acolo, veți vedea linkul „Personalizați cu CSS Hero” în bara de administrare.
Pur și simplu faceți clic pe link și veți vedea opțiunile CSS Hero deschise.
Odată intrat, va trebui să plasați cursorul mouse-ului peste zona în care doriți să adăugați o imagine. Apoi, faceți clic pe zonă pentru a accesa opțiunea „Fundal” din bara laterală stângă.
Continuați și faceți clic pe „Fundal” pentru a vedea setările pentru adăugarea unei imagini.
De acolo, faceți clic pur și simplu pe „Imagine”.
Apoi, puteți alege o imagine de pe Unsplash sau puteți încărca propria imagine pentru a crea fundalul.
Când faceți clic pe imaginea dorită, veți vedea butonul „Aplicare imagine”.
Apoi, s-ar putea să doriți să alegeți ce dimensiune doriți să aibă imaginea. Vă recomandăm să alegeți versiunea mare, astfel încât să se întindă pe toată pagina.
În cele din urmă, puteți apăsa pe „Salvează și publică” în partea de jos pentru a salva imaginea de fundal pentru site-ul dvs.
Metoda 5. Adăugați imagini de fundal personalizate oriunde în WordPress folosind cod CSS
În mod implicit, WordPress adaugă mai multe clase CSS la diferite elemente HTML pe întregul site WordPress. Astfel, puteți adăuga cu ușurință imagini de fundal personalizate la postări individuale, categorii, autori și alte pagini folosind aceste clase CSS generate de WordPress.
De exemplu, dacă aveți o categorie pe site-ul dvs. numită TV, atunci WordPress va adăuga automat aceste clase CSS la tag-ul body atunci când cineva vizualizează pagina categoriei TV.
<body class="archive category category-tv category-4">
Puteți folosi instrumentul de inspectare pentru a vedea ce clase CSS adaugă WordPress tag-ului body. Iată un exemplu:
Puteți folosi fie clasa CSS category-tv, fie category-4 pentru a stiliza diferit doar această pagină de categorie.
De exemplu, să adăugăm o imagine de fundal personalizată la pagina arhivei de categorii.
Deși este o practică obișnuită să modificați fișierul functions.php al unei teme pentru a adăuga cod CSS, este nesigur și nu foarte prietenos pentru începători. O mică greșeală și riscați să vă stricați site-ul web.
Acesta este motivul pentru care recomandăm întotdeauna să folosiți WPCode în schimb. Este cel mai bun plugin pentru adăugarea de fragmente de cod personalizate fără prea multe bătăi de cap.
Folosim WPCode pentru a adăuga și gestiona fragmente de cod pe toate mărcile noastre. A fost o modalitate simplă și eficientă de a rămâne organizat și de a menține lucrurile să funcționeze fără probleme. Dacă doriți să aflați mai multe, consultați recenzia noastră detaliată despre WPCode.
Pentru a face acest lucru, să instalăm și să activăm pluginul WPCode. Dacă aveți nevoie de ajutor, puteți consulta ghidul nostru despre cum să instalezi un plugin WordPress.
📝 Notă: Poți folosi versiunea gratuită WPCode pentru a adăuga fragmente de cod CSS personalizate. Cu toate acestea, actualizarea la WPCode Pro îți permite să accesezi istoricul complet al revizuirilor pentru toate fragmentele tale, să adaugi pixeli de urmărire a rețelelor sociale, să programezi codul și multe altele!
După activare, navigați pur și simplu la Fragmentare cod » + Adăugare nou din zona de administrare WordPress.
Pe ecranul următor, veți dori să treceți cu mouse-ul peste opțiunea „Adăugați codul dvs. personalizat (Fragment nou)” și să faceți clic pe butonul „Utilizați fragmentul” atunci când apare.
Pe ecranul următor, puteți începe prin a adăuga un titlu pentru fragmentul dvs. CSS personalizat. Ați putea dori să alegeți ceva simplu și relevant, deoarece acest lucru vă va ajuta să recunoașteți codul mai târziu.
După aceea, poți tasta sau lipi următorul CSS personalizat în caseta „Previzualizare cod”.
body.category-tv {
background-image: url("http://example.com/wp-content/uploads/2017/03/your-background-image.jpg");
background-position: center center;
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
}
Nu uitați să înlocuiți URL-ul imaginii de fundal și clasa categoriei cu cele de pe propriul site.
Iată cum ar putea arăta în editorul WPCode:
Apoi va trebui să setați „Tipul codului” selectând „Fragment CSS” din meniul derulant.
Odată ce totul arată bine, puteți comuta comutatorul pentru a activa fragmentul de cod și faceți clic pe „Salvare fragment”.
În plus, puteți adăuga fundaluri personalizate la postări și pagini individuale.
WordPress are o clasă CSS cu ID-ul postării sau paginii în tag-ul body. Puteți folosi același cod CSS și doar înlocuiți .category-tv cu clasa CSS specifică postării.
Pentru mai multe detalii, consultați tutorialul nostru despre cum să adăugați CSS personalizat în WordPress.
Resurse bonus: Ghiduri pentru fișiere imagine și media pentru a îmbunătăți experiența utilizatorului pe site-ul WordPress
Sperăm că acest articol v-a ajutat să învățați cum să adăugați o imagine de fundal în WordPress. S-ar putea să doriți să consultați și ghidul nostru despre:
- Cum să adăugați imagini corect în WordPress
- Cum să creați o galerie de imagini în WordPress
- Cum să creați un slider video și imagine în WordPress
- Cum să adăugați miniaturi la linkurile postărilor anterioare și următoare în WordPress
- Cum să încorporați Spotify în WordPress
- Cum să încorporați podcasturi Apple în WordPress
- Cel mai bun software de design web
- Cum să optimizați imaginile pentru performanța web fără a pierde calitatea
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.
Dayo Olobayo
Mulțumesc pentru prezentarea metodelor de adăugare a imaginilor de fundal în WordPress, dar ce se poate face în legătură cu impactul negativ asupra vitezei de încărcare? Există sfaturi pentru a accelera timpul de încărcare atunci când folosiți o imagine de fundal?
Suport WPBeginner
Atâta timp cât optimizați imaginea pentru web, aceasta nu ar trebui să aibă un efect major asupra vitezei site-ului dvs. comparativ cu alte imagini.
Admin
Dayo Olobayo
Ok. Am citit un articol aici pe WPBeginner despre tehnici de optimizare a imaginilor. Cu siguranță le voi pune în practică.
Mrteesurez
Întrebare excelentă! M-am confruntat cu provocări similare legate de imaginile de fundal care afectează timpul de încărcare al site-ului meu. Ceea ce am făcut a fost să optimizez imaginile înainte de a le încărca, acest lucru poate reduce dimensiunea fișierelor fără a sacrifica calitatea. În plus, utilizarea lazy loading pentru imaginile de fundal poate ajuta și luați în considerare utilizarea unei rețele de livrare de conținut (CDN) pentru a accelera livrarea imaginilor dvs. Acești pași au făcut o diferență notabilă în performanța site-ului meu. Mulțumesc că ați adus în discuție acest subiect important!
Mrteesurez
Recomand ca cineva să folosească o imagine de fundal care să nu distragă atenția sau să aibă aceeași culoare cu textul sau titlurile conținutului. De asemenea, ca blog, cineva ar trebui să ia în considerare persoanele cu deficiențe de vedere atunci când alege tipul și culoarea imaginii de utilizat. Mulțumesc
Suport WPBeginner
Those are definitely important to keep in mind
Admin
Jiří Vaněk
Există o modalitate undeva de a manipula nu numai fundalul, ci și transparența dintr-o imagine? Cu alte cuvinte, este posibil să setați un procent de transparență?
Suport WPBeginner
Majoritatea acestora nu ar avea acest lucru implicit, ar trebui să includeți CSS pentru a seta opacitatea între 1 și 0, deci ca exemplu:
opacity: 0.5;
Admin
Jiří Vaněk
Mulțumesc pentru sfat. M-am întors să încerc efectul de transparență și, folosind CSS, am reușit în cele din urmă să funcționeze. Deci, mulțumesc pentru pont și pentru că ați oferit o soluție funcțională. Probabil nu aș fi descoperit singur.
J-P Zacaropoulos
Bună. Caut o temă gratuită unde pot schimba antetul plus să am 5 sau 6 elemente de meniu în partea de sus. La toate cele pe care le-am căutat, nu se poate schimba tema. Sunt începător și încerc să-mi configurez site-ul pentru noua mea afacere de copywriting. Mulțumesc anticipat
Jean-Pierre
Suport WPBeginner
Dacă nu puteți găsi un design specific al temei, atunci ați putea arunca o privire la pluginurile de creare de pagini, cum ar fi cele din articolul nostru de aici: https://www.wpbeginner.com/beginners-guide/best-drag-and-drop-page-builders-for-wordpress/
Admin
Jon
Am încercat să folosesc codul CSS suplimentar cu URL-ul meu propriu .jpg. De fapt, am încercat mai multe de pe internet și din fișierele mele încărcate. URL-ul este întotdeauna cu text roșu și nu există niciodată o previzualizare. Am verificat codul literă cu literă, cu simboluri de comandă și tot restul are o culoare normală. Singurul cod pe care l-am făcut înainte a fost în Excel și Matlab, cu o scurtă experiență de tip „Hello World”.
Ce îmi scapă?
Suport WPBeginner
Acest lucru ar însemna, în mod normal, că există o eroare în modul în care URL-ul a fost adăugat la CSS. URL-ul este între ghilimele duble?
Admin
Christine
Am ales o temă (calm business) care are un fundal personalizat. Dar când merg la personalizare, nu am opțiunea pentru o imagine de fundal. Ce îmi lipsește. Site-ul meu are 3 ani și acum îl actualizez. Există ceva altceva care ar putea necesita o actualizare?
Suport WPBeginner
Dacă nu oferă o opțiune pentru a edita fundalul, probabil că doriți să contactați suportul temei pentru a vă asigura că nu există o altă locație unde ar fi setată imaginea de fundal.
Admin
RANI ANDLEEB
cum adaug imagine/culoare în body pe server local WAMP.
Suport WPBeginner
Ar fi la fel ca un site live, dacă nu aveți opțiunea de a edita fundalul, atunci s-ar putea să nu fie o opțiune pe tema specifică pe care o utilizați
Admin
ricardo
ce se întâmplă dacă lucrez pe un server local precum xampp ce cale de fișier ar trebui să pun folosind css pentru antetul pe care îl folosesc tema hestia?
Rio Bermano
Mulțumesc wpbeginner