voi păstra acest intro foarte scurt.
Iată ce vom discuta în acest articol:
- care sunt imaginile de fundal
- care este lucrul cu fundalurile de paralaxă?
- cum să adăugați imagini de fundal pe site-ul dvs. WordPress
- cum să abordați dimensiunea imaginii în WordPress
gata, constant? Să mergem!
ce sunt imaginile de fundal?
imaginile de fundal sunt imagini care sunt aplicate pe fundalul unui element de pe un site web, într-un e-mail etc. În timp ce imaginea eroului este principalul punct focal al unui site web sau al unui e-mail, imaginile de fundal sunt mai subtile. Acestea susțin alte elemente ale site-ului web, ca un al doilea strat: apeluri la acțiune, alte imagini, diverse secțiuni ale site-ului etc.
să aruncăm o privire la câteva exemple de astfel de imagini de fundal:
IKEA
pe pagina de pornire a site-ului IKEA, imaginile de fundal sunt folosite pentru a-și prezenta poveștile inspiratoare. Titlul și categoria poveștii sunt plasate deasupra imaginii. Există o suprapunere de gradient utilizată astfel încât să scadă opacitatea imaginii reale. Această abordare ajută la creșterea vizibilității textului, dar creează și consistență în design, astfel încât nici o culoare nu iese în evidență mai mult decât alta.
Loving Vincent
unul dintre filmele mele preferate, acesta.
imaginile de fundal se află în spatele unui carusel care prezintă povești din spatele lui Vincent van Gogh și al filmului. Imaginile de fundal par să împuternicească povestea și să ofere emoții puternice.
Lush
îmi place atât de mult cum arată site-ul Lush: colorat și vibrant ca produsele în sine.
acum, imaginile de fundal pot folosi modele sau forme, ca în acest exemplu de pagină de înscriere la buletinul informativ. Aceste modele reușesc să transforme ceva potențial plictisitor, în ceva vesel.
imagini de fundal paralaxă
dacă vă uitați la site-ul British Museum, veți observa că există imagini pe paginile lor, care se află în fundal de ce conținutul din prim-plan se derulează în jos. Acestea sunt imagini de fundal paralaxă.
parallax scrolling este una dintre acele tendințe de design web care reușește să adauge un efect strălucit unui site web dacă este integrat corect.
de asemenea, puteți obține un astfel de efect în WordPress, vă voi arăta cum un pic mai târziu.
cum să adăugați imagini de fundal pe site-ul dvs. WordPress
există trei modalități principale de a adăuga imagini de fundal pe site-ul dvs. Să le verificăm, bine?
-
adăugarea de imagini de fundal prin WordPress Tema Customizer
cele mai populare teme WordPress au această opțiune disponibilă. Voi folosi tema Colibri în scopul acestui exemplu. Alte teme se comportă similar cu tema Colibri.
Dacă tema aleasă nu acceptă caracteristica, treceți la metodele 2 și 3.
acum, să începem prin a ne îndrepta spre aspect -> personalizați din tabloul de bord WordPress. În stânga veți vedea opțiunile de editare a personalizatorului temei, în timp ce în dreapta, există o previzualizare live a site-ului dvs. web.
tema vă permite să plasați imagini de fundal pentru:
- rânduri
- coloane
- blocuri (secțiuni întregi ale site-ului web, cum ar fi: despre mine, portofoliu, echipă, contact etc.)
- componente (rubrici, carusele, tabele de stabilire a prețurilor, carusele etc.)
modul în care puteți face acest lucru este același indiferent unde aveți nevoie de imaginea de fundal.
să presupunem că doriți să adăugați o imagine de fundal la blocul site-ului dvs. de servicii. Începeți prin selectarea secțiunii. În stânga veți vedea opțiunile de editare într-un meniu structurat ca mai jos:
- aspect
- stil
- avansat
du-te la stil – > tip de fundal.
Selectați „Imagine”. Acum veți vedea o imagine pe care o puteți înlocui cu a dvs. 
când faceți clic pe imagine, vi se va solicita un ecran unde puteți selecta o imagine din Galeria Media WordPress sau puteți încărca o altă imagine.
după cum probabil ați observat deja, puteți adăuga chiar și un videoclip ca fundal.
și, există, de asemenea, o opțiune de comutare pentru efectul de paralaxă!
acum, există o altă comandă rapidă pentru a face această modificare a imaginii de fundal. Când selectați un bloc din dreapta, veți vedea pictograma Setări. Faceți clic pe acesta și veți vedea câteva opțiuni de editare.
dacă selectați „Schimbare fundal”, veți fi direcționat în interiorul „stil” pentru a continua așa cum este descris mai sus.
acest lucru a fost toate oameni buni. Destul de ușor, nu?
acum, dacă tema dvs. nu are opțiunea de imagine de fundal, există o modalitate de a face acest lucru în editorul implicit WordPress.
-
adăugarea unei imagini de fundal folosind blocuri WordPress
din tabloul de bord WordPress, accesați „pagini”. Acum, selectați „Editați” de sub pagina dorită. Veți vedea o interfață așa cum se arată mai jos.
editorul WordPress implicit este bazat pe blocuri, ceea ce înseamnă că fiecare secțiune a site-ului web este formată din blocuri. Aceste blocuri pot fi accesate din orice semn ” + ” pe care îl veți vedea în interfață. Să facem clic pe cel din stânga sus.
Acum, selectați blocul „Cover”. Veți vedea că apare imediat pe pagina dvs.
puteți încărca o imagine stocată local pe computer sau puteți alege dintre cele existente în biblioteca Media.
am selectat o imagine din biblioteca Media. Acum pot adăuga un text la ea. Opțiunile de editare sunt destul de limitate aici.
dacă selectați coperta, veți vedea un meniu care apare mai sus, unde vă puteți alinia imaginea sau puteți duplica întregul bloc. Puteți chiar să vă salvați blocul ca unul reutilizabil, pentru a fi utilizat din nou în alte modele.
acum, în partea dreaptă a ecranului, aveți câteva opțiuni suplimentare de editare.
în setările media, dacă activați opțiunea fundal fix, veți activa efectul de paralaxă.
când comutatorul este oprit, puteți regla punctul focal.
această ajustare a punctului focal se poate face și în procente, ținând cont de lățime și înălțime.
apoi, puteți adăuga o suprapunere. Puteți alege culoarea și opacitatea.
și, ați terminat.
-
adăugarea de imagini de fundal prin plugin-uri WordPress
iată câteva pluginuri WordPress etichetate ca pluginuri de imagine de fundal. Voi juca un pic cu pluginul simplu de imagine de fundal pe ecran complet, deoarece are cele mai multe instalări și cele mai bune recenzii de până acum.
acum, iată un tutorial despre cum să instalați un plugin WordPress.
cu acest plugin, imaginile vor fi scalate automat cu browserul, deci indiferent de dimensiunea browserului, imaginea va umple întotdeauna ecranul.
tot ce trebuie să faceți este să mergeți la aspect -> imagine BG pe tot ecranul. De aici selectați imaginea.
când apăsați „Salvați opțiunile”, veți vedea că toate secțiunile de pe site-ul dvs., fără fundal, vor primi această imagine ca fundal.
acum, aceasta este ceea ce se întâmplă în versiunea gratuită. Este destul de simplu și deloc flexibil. Planul plătit vine cu opțiuni suplimentare, cum ar fi:
- imagini de fundal nelimitate
- Post / imagini de fundal specifice paginii
- imagini Multiple cu tranziții de estompare pe pagini
și, am terminat, tocmai ați aflat cele 3 metode pe care le puteți utiliza pentru a adăuga imagini de fundal pe site-ul dvs.
mai e un lucru pe care vreau să-l știi înainte de a putea numi o zi.
dimensiuni imagine
înainte de a încărca orice imagine pe site-ul dvs., să acorde o atenție la dimensiunea sa. Știu că toți ne uităm la megapixeli, dar, pe web, există o captură. Imaginile de înaltă rezoluție pot afecta site-ul dvs. afectând timpul de încărcare. Pe termen lung, orice secundă suplimentară de încărcare vă poate pierde vizitatorii site-ului și conversiile. De asemenea, vă veți reduce semnificativ șansele de a vă clasifica în motoarele de căutare, deoarece viteza de vârstă este un factor important de clasare.
pe de altă parte, utilizarea imaginilor prea mici vă poate afecta și experiența utilizatorului. Deci, avem nevoie pentru a face capete întâlni.
o modalitate de a face acest lucru este utilizarea aplicațiilor externe care vă pot ajuta să redimensionați imaginile, asigurând în același timp o claritate adecvată.
dar în WordPress, puteți face acest lucru cu ușurință folosind un…plugin, așa cum probabil ați ghicit deja.
aici, la Colibri, suntem fani Smush. Smush poate și va comprima imaginile fără o scădere vizibilă a calității.
în versiunea pro, se va converti, de asemenea, imagini la WebP, un format de imagine next-gen, care poate comprima dimensiuni de fișiere imagine de până la 35%, cu nici o pierdere de calitate evidentă.
și asta e o folie, oameni buni!
dacă ți-a plăcut acest articol și vrei să afli mai multe despre cum să proiectezi un site web WordPress, asigură-te că te abonezi la canalul YouTube Colibri și urmărește-ne pe Twitter și Facebook!