Cum se creează un efect de defilare a straturilor extinse pentru interacțiunile cu ilustrațiile aplicațiilor în Divi

Prezentarea oricărei aplicații sau produse pe site-ul dvs. web nu trebuie să se limiteze la imagini statice sau grafică. Cu efectele de scroll ale lui Divi, puteți da viață ilustrațiilor aplicațiilor prin adăugarea de animații subtile și eficiente care să atragă vizitatorii. În acest tutorial, vom descoperi o modalitate simplă de a crea un efect de derulare a straturilor expandabile în Divi. Este nevoie doar de trei imagini (sau capturi de ecran) cu aceleași dimensiuni și toată magia încorporată a constructorului Divi.

Să sărim direct și să începem.

Trage cu ochiul

Descărcați aspectul GRATUIT

Pentru a pune mâna pe desenele din acest tutorial, va trebui mai întâi să îl descărcați folosind butonul de mai jos. Pentru a avea acces la descărcare, va trebui să vă abonați la lista noastră de e-mail Divi Daily folosind formularul de mai jos. Ca nou abonat, veți primi și mai multe bunătăți Divi și un pachet Divi Layout gratuit în fiecare luni! Dacă sunteți deja pe listă, pur și simplu introduceți adresa de e-mail mai jos și faceți clic pe descărcare. Nu veți fi „resubscris” și nu veți primi e-mailuri suplimentare.

Descărcați fișierele

Descarcă gratis

Înscrieți-vă la buletinul informativ Divi și vă vom trimite prin e-mail o copie a pachetului final de planificare a paginii de destinație Divi, plus o mulțime de alte resurse, sfaturi și trucuri uimitoare și gratuite Divi. Urmăriți-vă și veți fi un maestru Divi în cel mai scurt timp. Dacă sunteți deja abonat, pur și simplu introduceți adresa de e-mail de mai jos și faceți clic pe descărcare pentru a accesa pachetul de aspect.

DESCARCA

V-ați abonat cu succes. Vă rugăm să verificați adresa de e-mail pentru a vă confirma abonamentul și pentru a obține acces la pachetele de layout Divi săptămânale gratuite!

Pentru a importa aspectul în pagina dvs., pur și simplu extrageți fișierul zip și trageți fișierul JSON în Divi Builder.

Să trecem la tutorial, nu-i așa?

Ce trebuie să începeți

Pentru a începe, va trebui să faceți următoarele:

1. Dacă nu ați făcut-o încă, instalați și activați tema Divi.
2. Creați o pagină nouă în WordPress și utilizați Divi Builder pentru a edita pagina din partea frontală (builder vizual).
3. Alegeți opțiunea „Build From Scratch”.

După aceea, veți avea o pânză goală pentru a începe să proiectați în Divi.

Crearea efectului de derulare a straturilor extinse pentru o ilustrație de aplicație captivantă în Divi

Adăugați rând

Să începem prin adăugarea unui rând cu 2 coloane (jumătate jumătate).

Adăugați o marjă temporară la secțiune

Pentru a putea previzualiza mai târziu efectele de derulare, adăugați câteva margini de sus și de jos la secțiune, după cum urmează:

• margine: 80vh sus, 80vh jos

Adăugați 3 imagini ca straturi

Vom crea trei imagini care vor servi ca trei straturi ale ilustrației aplicației. Ideea este de a utiliza trei imagini (sau capturi de ecran) ale funcțiilor aplicației care au aceeași dimensiune / dimensiuni, astfel încât imaginile să se potrivească perfect una peste alta. Apoi vom muta cele trei straturi folosind efecte de derulare Divi.

Să începem cu prima imagine.

Creați imaginea 1

Adăugați un modul de imagine în coloana din stânga.

Apoi încărcați prima imagine în modul. Nu uitați să vă asigurați că toate cele trei imagini vor avea aceleași dimensiuni. Acesta are 500 px cu 1050 px.

Setări imagine 1

Deschideți setările modulului de imagine și actualizați următoarele:

Lățime și marjă

• Lățime: 300 px (desktop și tabletă), 150 px (telefon)
• Alinierea modulului: stânga
• Marja: 0 px de jos

Frontieră

• Colțuri rotunjite: 40 px
• Lățimea chenarului: 15 px
• Culoare margine: #ffffff

Box Shadow

• Box Shadow: Vedeți Captura de ecran
• Box Shadow Vertical Position: 0px
• Puterea neclarității umbrei cutiei: 48 px
• Culoare umbră: rgba (0,0,0,0,2)

Creați imaginea 2

Pentru a crea imaginea 2, copiați imaginea 1.

Apoi actualizați modulul de imagine duplicat cu o imagine nouă care are aceleași dimensiuni (500 px cu 1050 px).

Setări imagine 2

Apoi scoateți frontiera actualizând următoarele:

Frontieră

• Lățimea chenarului: 0 px

Nu avem nevoie de o margine pentru această imagine, dar trebuie să înlocuim spațiul dintre margini cu umplutură pentru a ne asigura că imaginile se stivuiesc perfect.

Căptușeală

• Căptușeală: 15 px sus, 15 px jos, 15 px stânga, 15 px dreapta

Poziţie

Apoi actualizați poziția pentru imaginea 2 la Absolut. Acest lucru va face ca imaginea 1 să se suprapună perfect.

• Poziție: Absolută

Pentru mai multe informații, consultați postarea noastră completă despre cum să utilizați poziția absolută în Divi.

Efecte derulare

Acum este timpul să adăugăm efectul de derulare care mișcă stratul nostru (imaginea 2) atunci când derulați pagina în jos.

Actualizați efectele de derulare după cum urmează:

Sub fila Mișcare verticală ...

• Activați mișcarea verticală: DA
• Offset de pornire: 0 (la 0% vizualizare)
• Decalaj mediu: 0 (la 0% vizualizare)
• Offset final: -1 (la 100% vizualizare)

Sub fila Mișcare orizontală ...

• Activați mișcarea orizontală: DA
• Offset de pornire: 0 (la 0% vizualizare)
• Decalaj mediu: 1 (la 50% vizualizare)
• Offset final: -1,5 (la 100% vizualizare)

Sub fila Fading In and Out ...

• Activați Fading In and Out: DA
• Opacitate de pornire: 0% (la 0% vizualizare)
• Opacitate medie: 100% (la 10% -15% vizualizare)
• Opacitate finală: 70% (la 30% vizualizare)

Creați imaginea 3

Odată ce toate efectele de derulare au fost adăugate la imaginea 2, suntem gata să creăm imaginea 3.

Deschideți meniul de setări din partea de jos a constructorului și selectați butonul Straturi pentru a implementa fereastra pop-up de straturi. Apoi, copiați modulul 2 de imagine în coloana 1 pentru a crea imaginea 3. Utilizarea caracteristicii straturilor este utilă, deoarece este dificil să selectați modulele suprapuse.

Acum deschideți setările pentru imaginea duplicată (imaginea 3) și încărcați o imagine nouă. Asigurați-vă că păstrați aceleași dimensiuni (500 px cu 1050 px).

Imagine 3 Efecte derulare

Sub fila Avansat, actualizați opțiunile efectelor de derulare pentru imaginea 3.

Sub fila Mișcare verticală , actualizați decalajul mișcării verticale după cum urmează:

• Offset final: -2 (la 100% vizualizare)

Sub fila Mișcare orizontală , actualizați mișcarea orizontală după cum urmează:

• Decalaj mediu: 2 (la 50% vizualizare)
• Offset final: 3 (la 100% vizualizare)

Sub fila Fading In and Out , actualizați setările Fading In și Out, după cum urmează:

• Opacitate de pornire: 5% (la 0% vizualizare)
• Opacitate medie: 100% (la 30% -40% vizualizare)
• Opacitate finală: 100% (la 50% vizualizare)

Rezultat

Verificați rezultatul de până acum.

Adăugați Transform Skew în coloana 1

Acesta este un efect excelent așa cum este, dar vom distorsiona coloana pentru a crea mai mult un efect 3D.

Deschideți setările pentru coloana 1 și adăugați o distorsiune de transformare după cum urmează:

Transformarea înclinării (axele X și Y): 8 grade

Acest lucru va crea un efect 3D frumos asupra straturilor în expansiune.

Asta e!

Opțional: adăugați CTA în coloana 2

Acum putem adăuga orice titlu și buton (sau orice CTA) în coloana din dreapta cu câteva efecte de defilare gratuite. Consultați descărcarea gratuită a acestui aspect de mai sus pentru a obține același CTA în această ilustrație.

Rezultat final

Iată rezultatul final.

Iată cum se stochează pe tabletă și telefon.

Utilizarea imaginilor dintr-un pachet de layout Divi

Imaginile folosite din acest tutorial sunt imagini simulate de la Shutterstock și sunt, de asemenea, prezentate pe pagina noastră demonstrativă a efectelor de derulare.

Pentru a schimba designul pentru a se potrivi propriilor nevoi, puteți utiliza imagini din pachetele noastre de layout gratuite sau puteți crea propriile capturi de ecran. Iată un exemplu de proiectare care utilizează imaginile din pachetul de aspect pentru aplicații mobile. Am adăugat, de asemenea, un fundal de gradient pentru a completa imaginile luminoase utilizate pentru straturile în expansiune.

În câteva minute, avem un design complet diferit!

Gânduri finale

Efectul de defilare a straturilor în expansiune este o soluție elegantă pentru prezentarea aplicațiilor sau produselor fără a fi nevoie să recurgeți la tehnici CSS mai complicate sau editare foto. Și puteți utiliza aceeași tehnică pentru a ilustra aproape orice. Îmi place cât de ușor este să schimbați propriile imagini și să înclinați întreaga colecție de imagini / straturi cu o singură opțiune simplă în Divi. Sperăm că acest lucru vă oferă o inspirație care vă va împuternici să creați modele uimitoare Divi.

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

Noroc!