Cum să adăugați corect imagini de fundal WordPress pe site-ul dvs.?
Publicat: 2022-01-06Este ușor să adăugați imagini de fundal WordPress pe site-ul dvs.? Răspunsul este da în cea mai mare parte, cu excepția cazului în care tema dvs. nu o acceptă.
Adevărul este că multe teme WordPress în aceste zile au oferit câteva modalități fără efort de a adăuga și de a modifica imaginile de fundal existente.
De asemenea, puteți schimba imaginile de fundal WordPress folosind CSS sau un plugin, care deschide opțiuni pentru a seta imaginea de fundal pe pagini, postări și categorii.
Acest articol vă va arăta cum să faceți toate cele de mai sus pentru a face site-ul dvs. să iasă în evidență cu un aspect atrăgător.
Ce sunt imaginile de fundal WordPress ?
O imagine de fundal WordPress este o imagine aplicată în spatele conținutului principal. În loc să fie punctul central al site-ului dvs., ca o imagine de erou, acestea sunt adesea mai subtile și completează alt conținut de pe paginile dvs. web.
Pe lângă faptul că ajută la crearea de pagini web care oferă o experiență de lectură mai bună, imaginile de fundal WP oferă multe posibilități de design care diferențiază site-ul dvs. de concurenți.
A fi diferit de concurenți înseamnă creșterea gradului de cunoaștere a mărcii prin efort suplimentar în designul site-ului, ceea ce nu este întotdeauna ușor. În astfel de cazuri, puteți solicita unei agenții digitale servicii profesionale de web design.
Dar de ce vrei să schimbi fundalul? Ei bine, este posibil ca cea implicită să nu vă atragă sau să nu semene cu marca dvs. Sau, poate nu este deloc o imagine, doar o culoare solidă. Sau poate l-ai iubit pe cel existent la început, dar acum te-ai plictisit de el.
Oricare ar fi motivul, haideți să experimentăm schimbarea acestuia.
Utilizați Personalizatorul WordPress implicit pentru a adăuga o imagine de fundal WordPress
Temele WordPress oferă de obicei o modalitate fără efort de a utiliza o culoare sau o imagine în fundal. Majoritatea oamenilor aleg să schimbe culoarea de fundal care se potrivește mai bine cu marca și gustul site-ului lor.
În acest ghid, vom folosi Woostify—o temă fantastică pentru site-urile de comerț electronic. În funcție de tema dvs., metoda poate diferi ușor.
- Din tabloul de bord WordPress, accesați Aspect > Imagine de fundal sau Aspect > Personalizare > Imagine de fundal .
- Faceți clic pe butonul Selectare imagine pentru a deschide Biblioteca media.
- Alegeți imaginea dorită. Puteți să-l încărcați de pe computer sau să selectați unul existent din Biblioteca Media.
- Faceți clic pe butonul Alegeți imagine când sunteți mulțumit.
- Dacă vă place ceea ce vedeți în Previzualizare, faceți clic pe butonul Publicare . Și asta este!
În plus, WordPress oferă un instrument simplu de editare a imaginilor de fundal. Puteți experimenta cu el pentru a vedea ce dimensiune, poziție etc. este cea mai bună.
Nu vă faceți griji că rămâneți blocați cu nimic. Este ușor să reveniți la setări și să schimbați fundalul (și opțiunile aferente) oricând doriți.
Utilizați Elementor Page Builder pentru a adăuga imagini de fundal WordPress la o postare/pagină
Elementor este un generator de pagini răspândit care accelerează dramatic producția de site-uri web. Oferă un plugin gratuit pe care îl puteți folosi pentru a adăuga imagini de fundal WordPress.
- Pentru a începe, trebuie să instalați și să activați pluginul Elementor.
- Mai întâi, accesați postarea sau pagina la alegere. Odată ajuns în editorul implicit de pagini WordPress, faceți clic pe butonul Editați cu Elementor .
Editorul Elementor va fi deschis. În partea stângă, veți vedea un meniu care listează toate blocurile de tip drag-and-drop pentru construirea și editarea postării/paginii.
- Faceți clic pe pictograma mică de setări din colțul din stânga jos al generatorului de pagini.
- Apoi, alegeți fila Stil .
- După aceea, faceți clic pe pictograma pensulă pentru a adăuga o imagine de fundal WordPress .
- Apoi, faceți clic pe butonul Alegeți imaginea pentru a afișa Biblioteca media.
- Alegeți imaginea dorită. Puteți să-l încărcați de pe computer sau să selectați unul existent din Biblioteca Media.
- Apoi, faceți clic pe butonul „Insert Media” din colțul din dreapta jos.
Acum, imaginea de fundal selectată ar trebui să apară în previzualizarea din dreapta. Poate fi necesar să ajustați alt conținut pentru a vă asigura că elementele precum imaginile și textul apar corect.
- Nu uitați să apăsați butonul „UPDATE” pentru a salva toate modificările și pentru a actualiza postarea/pagina.
În plus, Elementor oferă unele ajustări pentru imaginile de fundal WordPress, cum ar fi Poziție, Atașare, Repetare etc. Simțiți-vă liber să experimentați cu ele pentru a găsi cel mai bun fundal.
Utilizați un plugin pentru a adăuga imagini de fundal WordPress
Există câteva plugin-uri gratuite, dar excelente, care pot face treaba de a adăuga imagini de fundal WordPress . De exemplu Imagine de fundal simplă pe tot ecranul, Fundaluri WordPress avansate, Manager de fundal complet etc.
Adăugați o imagine de fundal WordPress pentru întregul site
În acest ghid, vom folosi imaginea de fundal simplă pe tot ecranul, deoarece este simplă, de unde și numele.
Acest plugin oferă instalarea și configurarea simplă a unei imagini de fundal WordPress pentru site-ul dvs. Scala automat imaginea cu browserul. Deci umple mereu ecranul, indiferent de dispozitivele pe care le folosesc vizitatorii tăi.
Pentru a o pune în acțiune necesită doar câțiva pași simpli. Există o versiune plătită disponibilă care adaugă funcții suplimentare. Totuși, cel gratuit este tot ce avem nevoie.
- Instalați și activați pluginul Simplu Screen Background Image.
- Din tabloul de bord WordPress, accesați Aspect > Imagine BG pe ecran complet .
- Faceți clic pe butonul Alegeți imagine pentru a deschide Biblioteca media.
- Alegeți imaginea dorită. Puteți să-l încărcați de pe computer sau să selectați unul existent din Biblioteca Media.
- Faceți clic pe butonul Alegeți imagine când sunteți fericit.
- În cele din urmă, faceți clic pe butonul „Salvare opțiuni” și verificați site-ul dvs. Imaginea ar trebui să se afișeze acum pe site ca imagine de fundal WordPress pe ecran complet.
Rețineți că setarea pluginului pentru imaginile de fundal WordPress înlocuiește Personalizatorul WordPress implicit. Acesta nu este un lucru rău de niciun fel, doar ceva de avut în vedere.
Adăugați imagini de fundal WordPress pe o anumită pagină /postare
În acest ghid, vom folosi pluginul Advanced WordPress Backgrounds pe care l-am menționat mai sus.
Acest plugin permite adăugarea de fundaluri folosind blocuri Gutenberg. Puteți seta o culoare, o imagine sau chiar un videoclip ca fundal WordPress. Toate sunt vizibile pe dispozitivele mobile. În plus, puteți adăuga un efect de paralaxă imaginilor de fundal și videoclipurilor WordPress.
În acest caz, vom adăuga doar o imagine statică de fundal în zona de conținut, în special postări/pagini.
Deoarece aceasta funcționează cu blocurile Gutenberg, asigurați-vă că comutați din modul Editor clasic dacă este necesar.
- Instalați și activați pluginul.
- Deschideți o postare/pagină existentă sau creați una nouă.
- Faceți clic pe butonul plus din colțul din stânga sus. Apoi, derulați în jos la secțiunea Design și alegeți blocul AWB. O bară de pictograme de sus și o coloană de meniu laterală vor apărea alături de bloc.
- Faceți clic pe butonul Imagine din coloana laterală. Apoi faceți clic pe butonul Selectați imaginea de sub acesta pentru a deschide Biblioteca media.
- Alegeți imaginea dorită. Apoi, faceți clic pe butonul Selectați . După ce ați făcut asta, ar trebui să vedeți imaginea de fundal.
- În bara de pictograme de sus, faceți clic pe pictograma în formă de hamburger. Apoi, alegeți opțiunea Full Width pentru a acoperi întreaga lățime. Acest lucru este complet opțional.
În coloana laterală, puteți modifica dimensiunea imaginii de fundal WordPress, spațierea, poziția și multe altele. Simțiți-vă liber să experimentați cu el.
Acum, tot ce rămâne este să adăugați conținut în interiorul blocului. Dacă editați o postare/pagină existentă, trebuie doar să decupați și să inserați conținutul în bloc.
Nu uitați să salvați postarea/pagina când sunteți mulțumit de rezultat.
Utilizați CSS pentru a adăuga imagini de fundal WordPress
Acum, vom explora cum să schimbați imaginile de fundal WordPress folosind CSS . Acest lucru se poate face pe întregul site sau pentru anumite categorii folosind Personalizatorul WordPress.
- Din tabloul de bord WordPress, accesați Aspect > Personalizare pentru a accesa Personalizatorul WordPress.
- Derulați în jos și faceți clic pe secțiunea CSS suplimentară .
- Copiați și inserați codul corespunzător de mai jos în câmpul CSS:
Adăugați o imagine de fundal WordPress pentru întregul site
body { background-image: url('imageURL'); background-position: center center; background-size: cover; background-repeat: no-repeat; background-attachment: fixed; }
Asigurați-vă că înlocuiți textul substituent „URL imagine” cu adresa URL reală a fișierului imagine. Pentru a vedea acest lucru, selectați imaginea dorită din Biblioteca Media pentru a vedea informațiile despre imagine.
Și dacă cunoașteți CSS, nu ezitați să-l modificați după cum doriți.
Adăugați imagini de fundal WordPress pe o anumită pagină de categorie
body.category-categoryid { background-image: url('imageURL'); background-position: center center; background-size: cover; background-repeat: no-repeat; background-attachment: fixed; }
Asigurați-vă că înlocuiți textul substituent „imageURL” cu adresa URL reală a fișierului imagine și „categoryid” cu numele corect al categoriei.
Pentru a cunoaște ID-ul categoriei, urmați instrucțiunile de mai jos:
- Din tabloul de bord WordPress, accesați Postări > Categorii .
- Treceți cu mouse-ul peste textul Editați din categoria la care doriți să faceți referință. Veți vedea adresa URL în partea stângă jos a paginii, arătând ID-ul categoriei.
Cele mai bune practici pentru utilizarea imaginilor de fundal în WordPress
Setarea unei imagini de fundal personalizată pe WordPress pare o sarcină ușoară. Da! Este adevărat în majoritatea cazurilor, dar nu întotdeauna.
Prin urmare, vă recomandăm să urmați cele mai bune practici pentru imaginea de fundal WordPress pentru a elimina cât mai multe probleme posibil.
Verificați suportul pentru imagini de fundal înainte de a utiliza o temă WordPress
Din păcate, nu toate temele WordPress acceptă imagini de fundal personalizate. De obicei, pentru că fundalurile nu se potrivesc cu designul general al temei. Prin urmare, dezvoltatorii au ales să-l dezactiveze complet.
Prin urmare, ar trebui să verificați lista de funcții atunci când descărcați o temă nouă, mai ales dacă intenționați să plătiți pentru una premium. Multe site-uri web care vând teme oferă informații despre dacă o temă WordPress acceptă sau nu imagini de fundal.
Rămâi cu imagini de înaltă calitate
Rezoluția imaginilor de fundal dorite deseori face sau întrerupe prezentarea acesteia. Ai putea crede că o fotografie pe care ai făcut-o cu telefonul tău este suficient de bună pentru un fundal. Dar sunt șanse să fie de o calitate mult mai bună.
Puteți plăti pentru fotografii fără drepturi de autor de pe site-uri precum Shutterstock. Aceste site-uri au adesea imagini de calitate profesională gata pentru a fi încărcate ca imagini de fundal mari. De asemenea, puteți găsi multe dintre ele pe site-uri gratuite de imagini de stoc.
Este posibil ca imaginea de fundal să nu fie complet vizibilă pe site-ul dvs. WordPress, deoarece cea mai mare parte este acoperită de conținut. Cu toate acestea, este încă afișat pe întreg ecranul. Prin urmare, riscați să vedeți un fundal întins dacă nu utilizați o imagine de înaltă calitate.
Optimizați imaginile de fundal
Ca și în cazul tuturor fotografiilor încărcate pe site-ul dvs. WordPress, ar trebui să optimizați imaginile de fundal înainte de a le publica.
Acest lucru este deosebit de important pentru imaginile de fundal, deoarece acestea apar adesea pe mai multe pagini de pe site-ul dvs. În plus, sunt fotografii mari și ocupă mult spațiu pe ecran. În plus, imaginile mai mari pun o presiune semnificativă asupra serverului. Prin urmare, nu uitați să vă optimizați imaginile de fundal, astfel încât site-ul să se încarce rapid.
Aveți două opțiuni aici:
- Optimizați imaginile de fundal (și toate fotografiile site-ului dvs.) înainte de a le încărca pe server. Puteți finaliza acest proces manual cu ajutorul unor instrumente precum Photoshop, GIMP și Pixlr.
- Automatizați procesul de optimizare instalând un plugin WordPress care redimensionează și micșorează imaginile la încărcare.
Gânduri finale
Adăugarea imaginilor de fundal WordPress pe site-ul dvs. poate părea un lucru mic. Dar dacă este făcut bine, poate avea un impact uriaș.
În plus, vă poate ajuta să vă mențineți prezența online proaspătă. Prin urmare, vizitatorii tăi nu se plictisesc să vadă aceleași fotografii din nou și din nou.
În mod ideal, utilizați Personalizatorul WordPress pentru a adăuga o imagine de fundal ori de câte ori este posibil, deoarece este conceput special pentru a funcționa conform intenției.
Cu toate acestea, aveți și alte opțiuni pentru a adăuga și modifica imagini de fundal WordPress, așa cum am arătat mai sus.
Acum, mergeți mai departe și fiți creativ cu fundalul site-ului dvs. pentru a vă implica vizual vizitatorii.