Crearea unui aspect pe ecran complet cu tranziții ale imaginilor de fundal Parallax în Divi

Crearea unei pagini web cu secțiuni pe ecran complet este o modalitate excelentă de a îmbunătăți experiența utilizatorului cu tranziții fluide și aspecte de secțiuni curate care se întind pe întreaga lățime și înălțime a browserului. De obicei, acest lucru funcționează bine pentru prezentarea produselor sau serviciilor câte o secțiune la rând, permițând utilizatorului să se concentreze cu ușurință pe fiecare în timp ce derulează pagina în jos. Acest tip de design funcționează foarte bine și cu imaginile de fundal care vorbesc despre conținut și oferă un accent de design frumos. Și dacă doriți să obțineți un pic de creativitate, puteți adăuga unele funcții de paralaxă imaginilor dvs. de fundal pentru a crea unele tranziții destul de unice atunci când derulați dintr-o secțiune fullscreen în alta.

În acest tutorial, vă voi arăta cum să adăugați câteva tranziții ale imaginii de fundal de paralaxă la un aspect al paginii cu ecran complet în Divi. Procesul este simplu și cu acesta puteți crea câteva rezultate puternice.

Trage cu ochiul

Aruncați o privire la unele dintre proiectele pe care le vom construi împreună.

Noțiuni de bază

Abonați-vă la canalul nostru Youtube

Pentru acest tutorial, tot ce aveți nevoie este Divi și o colecție de imagini pe care să le utilizați pentru diferite imagini de produs și imagini de fundal. Folosesc imaginile din imaginile din pachetul de machetare Juice Shop. Puteți descărca fișierul zip cu aceste imagini în partea de jos a postării de pe blog cu acest pachet de aspect. Trebuie doar să faceți clic pe butonul „Descărcați resursele complete ale imaginii”.

Pregătirea noii dvs. pagini

Odată ce ai gata imaginile. Creați o pagină nouă și dați-i paginii un titlu. Apoi implementați Divi Builder și selectați „Build from Scratch”. Apoi faceți clic pe buton pentru a construi pe partea frontală.

Acum sunteți gata să rulați!

Ideea de bază

Ideea de bază din spatele acestui concept implică stivuirea mai multor secțiuni cu lățime completă, fiecare cu un modul de antet cu lățime completă. Fiecare modul antet primește o lățime personalizată care poate fi aliniată la stânga, la centru sau la dreapta în timp ce expuneți fundalul secțiunii. Apoi, fiecare secțiune oferă o imagine de fundal cu o anumită metodă de paralaxă. Acest lucru creează diferite efecte de tranziție a imaginii de fundal pe măsură ce derulați pagina în jos.

Iată cum să o facă.

Crearea secțiunii antet Fullwidth

Mai întâi, va trebui să creați o nouă secțiune de lățime completă și apoi să adăugați un modul antet de lățime completă la secțiune.

Actualizați setările antetului de lățime completă cu un anumit conținut cu următoarele:

Titlu: „Suc de roșii”
Butonul nr. 1 Text de legătură: „Vedeți rețeta”
Conținut: „Conținutul dvs. merge aici. Editați sau eliminați acest text în linie sau în modul Setări de conținut. ”
Imagine siglă: [vezi captura de ecran] (Imaginea este de 240 px cu 300 px)

Acum continuați să actualizați designul antetului după cum urmează:

Culoare fundal: rgba (255.255.255,0.92)

Faceți ecran complet: DA

Afișați butonul de derulare în jos: DA
Pictogramă: vezi captura de ecran
Culoare pictogramă derulantă în jos: # 222222

Culoarea textului: Întunecat

Titlu Nivel antet: H2
Titlu Font: Raleway
Dimensiune text titlu: 50 px

Font corp: Lato
Dimensiunea textului corpului: 16 px
Spațierea literelor corporale: 1 px

Buton One Dimensiune text: 16 px
Buton pentru o culoare de text: #ffffff
Culoare fundal buton 1: # 222222
Buton One Border Radius: 50 px
Spațiere pentru o literă: 2 px
Butonul One Stil Font: TT

Lățime: 45% (desktop), 60% (tabletă), 100% (smartphone)

Salvează setările.

Principalele elemente cheie de proiectare aici sunt opțiunea „Efectuați ecran complet” și „Lățimea: 45%”. Acest lucru va permite secțiunii să se întindă pe toată lățimea și înălțimea ferestrei browserului în orice moment. Și lățimea personalizată micșorează modulul antet pentru a expune fundalul secțiunii pe care îl vom adăuga în continuare.

Adăugarea fundalului secțiunii

Acum că avem proiectat modulul de antet, putem adăuga imaginea de fundal a secțiunii. Accesați setările secțiunii de lățime completă și adăugați o imagine de fundal. Asigurați-vă că este suficient de mare pentru a acoperi întreaga lățime și înălțime a ferestrei browserului. Apoi selectați pentru a utiliza metoda CSS Parallax.

Duplicarea secțiunilor

Deoarece fiecare secțiune va afișa conținut nou, trebuie să dublăm secțiunea de lățime completă de trei ori, astfel încât să aveți un total de patru secțiuni pe pagina dvs. fiecare cu un modul antet.

Crearea unei imagini de fundal statice utilizând aceeași secțiune Imagine de fundal cu CSS Parallax

Acum, că avem patru secțiuni identice, putem actualiza conținutul antetului cu lățime completă cu noi imagini logo și titluri, pentru a obține o mai bună înțelegere a designului. Cu toate acestea, dacă păstrăm aceeași imagine de fundal utilizând paralela CSS pentru toate cele patru secțiuni, rezultatul este o imagine de fundal statică care rămâne pe loc în timp ce derulați la diferitele secțiuni cu ecran complet. Și din moment ce utilizăm un buton de derulare în jos pe fiecare antet, utilizatorii au opțiunea de a da clic pe săgeată pentru a derula în mod curat la fiecare nouă secțiune.

Verificați rezultatul.

Utilizarea diferitelor imagini de fundal cu tranziții CSS Parallax

Folosirea unei imagini de fundal diferite (cu paralela CSS) pentru fiecare secțiune va schimba aspectul designului în timp ce derulați. Deoarece avem deja activată paralela CSS pentru imaginile de fundal din cele patru secțiuni, tot ce trebuie să facem este să schimbăm fiecare dintre imagini în ceva diferit. În acest caz, adaug pur și simplu o versiune mare a produsului ca imagine de fundal pentru fiecare secțiune.

După ce aveți o imagine de fundal diferită (cu CSS Parallax) pentru fiecare dintre cele patru secțiuni, verificați rezultatul.

Utilizarea diferitelor imagini de fundal cu tranziții cu paralaxă adevărată

Dacă doriți să modificați efectul de tranziție a imaginii de fundal, puteți schimba metoda de paralaxă de la CSS la Paralaxă adevărată pentru toate cele patru secțiuni de imagine de fundal.

Deschideți una dintre setările secțiunii și schimbați metoda CSS la „True Parallax”.

Apoi, va trebui să faceți același lucru pentru celelalte trei secțiuni. Sau puteți pur și simplu să faceți clic dreapta pe opțiunea Parallax Method și să selectați „Extend Parallax Method” la toate modulele de antet cu lățime completă din întreaga pagină.

După ce ați terminat, verificați efectul de tranziție a imaginii de fundal.

Explorarea diferitelor alinieri ale modulelor

Schimbarea alinierii modulului dvs. Header cu lățime completă este o briză. Deoarece modulul nostru de antet cu lățime completă are o lățime personalizată de 45%, puteți regla cu ușurință alinierea modulului la stânga, centru sau dreapta pentru a obține un aspect diferit. Îmi place în special alinierea centrată cu un fundal static.

Pentru a centra modulul, deschideți setările antetului de lățime completă și actualizați Alinierea modulului la Centrat .

Pentru a alinia modulul la dreapta paginii, pur și simplu actualizați alinierea modulului la aliniat la dreapta.

Odată ce v-ați stabilit pe o aliniere, puteți extinde pur și simplu stilul „alinierea modulului” la restul modulelor de antet de-a lungul paginii.

Iată un exemplu de aliniere centrată cu un fundal static (aceeași imagine de fundal pentru fiecare cu paralaxă CSS).

Iată un exemplu de aliniere centrată cu diferite imagini de fundal folosind metoda CSS Parallax.

Iată un exemplu de aliniere centrată cu diferite imagini de fundal folosind metoda True Parallax.

Iată un exemplu de aliniere dreaptă cu diferite imagini de fundal folosind o combinație de css și paralaxă adevărată.

Gânduri finale

Aceste tranziții ale imaginilor de fundal chiar arată excelent atunci când sunt utilizate în combinație cu secțiuni pe ecran complet și module de antet personalizate. Funcționalitatea este curată, iar designul este subtil și unic. Dacă este ceva, este o modalitate rapidă și ușoară de a crea fundaluri statice pentru conținutul dvs. Simțiți-vă liber să explorați modele mai avansate folosind gradiente de fundal, fonturi și imagini!

Aștept cu nerăbdare să aud de la dvs. în comentarii.

Noroc!