Cum să creați o tranziție de imagine separată cu efectele de defilare ale lui Divi

Efectele de defilare ale lui Divi ne permit să creăm animații excepționale de tranziție care pot surprinde vizitatorii cu un design atrăgător. Imaginile, în special, pot prezenta puterea acestor efecte de derulare în moduri surprinzătoare. În acest tutorial, vom explica pas cu pas cum să creăm o tranziție de imagine separată cu efectele de scroll ale lui Divi. Acest efect a fost prezentat inițial pe pagina demonstrativă. Efectul implică felierea în prealabil a imaginilor folosind un editor foto precum Photoshop (este destul de ușor de făcut). După ce imaginile sunt tăiate, tot ce trebuie să facem este să le adăugăm la Divi și să folosim efectele de defilare încorporate pentru ca magia să se întâmple.

Să începem.

Trage cu ochiul

Iată o privire asupra designului de astăzi.

Puteți vedea, de asemenea, demo-ul live original al designului pe pagina demo, sub titlul „Exercițiul nu trebuie să fie plictisitor”.

Descărcați GRATUIT aspectul Divi de tranziție a imaginii de rupere

Pentru a pune mâna pe aspect 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.

În afară de configurarea Divi de mai sus, veți avea nevoie de:

• Două imagini (cel puțin 1080px 540px)
• Un software de editare a fotografiilor precum Photoshop pentru a tăia imaginile înainte de a le adăuga la Divi.

Partea 1: Felierea imaginilor în Photoshop

Înainte de a începe să ne creăm designul în Divi, trebuie să ne tăiem cele două imagini care vor fi folosite pentru efectul de derulare a tranziției. Ambele imagini vor trebui decupate astfel încât să fie exact 1080px cu 540px. După aceea, trebuie să fie tăiate în 8 părți egale (4 în lat, 2 în jos). Odată gata le putem salva pe computerul nostru și încărca feliile de imagine pe site-ul nostru. Să începem cu prima imagine.

Imaginea # 1

Decuparea imaginii

Primul lucru pe care trebuie să-l facem este să decupăm imaginea astfel încât să aibă dimensiunile exacte de 1080px cu 540px. Puteți utiliza orice software de editare a imaginilor pentru a face acest lucru. În Photoshop, puteți utiliza instrumentul de decupare.

Felierea imaginii

Apoi, faceți clic pentru a utiliza instrumentul pentru felii și selectați întreaga imagine. Faceți clic dreapta pe felie / imagine și selectați opțiunea Divizare felie.

În caseta de opțiuni Divide Slice, actualizați următoarele:

Împărțiți orizontal în:

• 2 felii în jos, distanțate uniform
• 270 pixeli pe felie

Împărțiți vertical în:

• 4 felii, distanțate uniform
• 270 pixeli pe felie

Apoi faceți clic pe OK.

Salvarea feliilor de imagine

Acum avem o imagine tăiată în 8 blocuri egale, fiecare dintre ele 270px pe 270px.

Pentru a salva feliile de imagine, navigați la Fișier> Export> Salvare pentru web.

Apoi alegeți formatul de fișier și faceți clic pe Salvare.

În caseta pop-up, asigurați-vă că actualizați următoarele:

• Salvați ca: [introduceți numele pentru imagini]
• Format: Numai imagini
• Setări: Setări implicite
• Felii: Toate feliile

Apoi faceți clic pe Salvare.

Acum toate feliile dvs. de imagine vor fi salvate pe computer, gata pentru a fi încărcate pe Divi.

Imaginea # 2

Pentru a crea a doua imagine necesară pentru acest efect de derulare a tranziției imaginii separat, ar trebui să urmăm același proces (decupare, feliere și salvare) pe care l-am folosit pentru a crea prima imagine.

Rotiți felii de imagine

Cu toate acestea, din cauza modului în care funcționează efectul de rotire rotativ, fiecare dintre feliile de imagine care alcătuiesc a doua imagine va trebui rotită cu 90 de grade, fie la stânga, fie la dreapta.

Pentru a roti o imagine, puteți utiliza Photoshop sau software-ul încorporat de editare a imaginilor din sistemul dvs. de operare (puteți chiar utiliza galeria media WordPress pentru a edita și roti imaginile după ce le-ați încărcat pe site-ul dvs.).

Iată un ghid pentru modul în care imaginile ar trebui să fie rotite în poziția lor originală atunci când tăiați imaginea.

Iată imaginea originală.

Iată cum ar trebui rotite feliile de imagine înainte de a le încărca pe site-ul dvs.

Acest lucru este necesar pentru a putea obține în cele din urmă următorul efect de derulare.

Acum că ambele imagini sunt decupate, tăiate, salvate și rotite, sunteți gata să le adăugați pe site-ul dvs. Divi. Ar trebui să aveți un total de 16 imagini (8 din imaginea unu și 8 din imaginea 2).

Partea 2: Crearea efectului de derulare a tranziției imaginii separat în Divi

Odată ce felurile de imagine sunt gata, putem începe procesul de proiectare în Divi. Iată cum să o faci.

Adăugați rândul # 1

Pentru a începe, creați un rând cu patru coloane.

Setări rând

Deschideți setările rândului și actualizați următoarele:

• Lățimea jgheabului: 1
• Lățime maximă: 1080px (desktop), 540px (tabletă și telefon)
• Căptușeală: 0 px sus, 0 px jos
• Overflow orizontal: vizibil
• Vertical Overflow: vizibil

Actualizați capitonarea secțiunii

Deoarece vom poziționa al doilea rând absolut deasupra primului rând, trebuie să scoatem căptușeala superioară (și inferioară) a secțiunii, astfel încât să nu arunce poziția celui de-al doilea rând. Deschideți setările secțiunii și actualizați următoarele:

• Căptușeală: 0 px în partea de sus, 0 px în stânga

Adăugarea imaginilor

În primul rând, vom adăuga fiecare dintre cele 8 imagini / felii care alcătuiesc prima imagine. Imaginile ar trebui să fie poziționate în coloane exact cum au fost tăiate în Photoshop (4 în lat și 2 în jos).

Iată o ilustrare a fiecărei imagini etichetate cu un număr. Așa ar trebui să arate după ce toate imaginile au fost adăugate la rând.

Imaginea # 1

Adăugați primul modul de imagine în coloana 1.

Apoi încărcați prima felie de imagine în modul.

Efecte derulare

Sub fila avansată, adăugați următoarele efecte de derulare la imagine.

• Activați Fading In and Out: DA
• Opacitate de pornire: 100% (la 20% vizualizare)
• Opacitate medie: 100% (la 20% vizualizare)
• Opacitate finală: 0% (la 50% vizualizare)

Faceți clic pe fila Scară și actualizați următoarele:

• Activați scalarea în sus și în jos: DA
• Scară de început: 100% (la 20% vizualizare)
• Scară medie: 70% (la 32% - 48% vizualizare)
• Scara de încheiere: 100% (la 60% vizualizare)

Faceți clic pe fila Rotire și actualizați următoarele:

• Activați rotirea: DA
• Rotație de pornire: 0 grade (la 0% vizualizare)
• Rotație mijlocie: 0 grade (la 20% vizualizare)
• Rotație finală: -90 grade (la 60% vizualizare)

Efectul de derulare va arăta astfel când derulați pagina în jos.

Imaginea # 2

Pentru a crea imaginea nr. 2, copiați imaginea nr. 1 și plasați duplicatul în coloana 2.

Actualizați modulul de imagine duplicat cu imaginea # 2.

Actualizați efectul de derulare

Vom păstra cele mai multe dintre aceleași efecte de derulare preluate de la imaginea # 1. Singurul lucru pe care trebuie să-l schimbăm este rotația. Accesați fila avansată și schimbați rotația finală la 90 de grade (în loc de -90 de grade), astfel încât să se rotească în sens opus.

• Rotație finală: 90 grade

Imaginea # 3

Pentru a crea imaginea # 3, copiați și lipiți imaginea # 1 în coloana 3 și apoi schimbați imaginea la imaginea # 3.

Imaginea # 4

Pentru a crea imaginea # 4, copiați și lipiți imaginea # 2 în coloana 4 și actualizați imaginea la imaginea # 4.

Imaginea # 5

Pentru a crea imaginea nr. 5, copiați imaginea nr. 1, astfel încât duplicatul să fie direct dedesubt în coloana 1.

Actualizați imaginea la imaginea nr. 5. Apoi actualizați efectul de defilare Fading In and Out după cum urmează:

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

Apoi actualizați efectul de derulare Scaling Up and Down după cum urmează:

• Scară de început: 100% (la 0% vizualizare)
• Scară medie: 70% (la 12% - 28% vizualizare)
• Scală finală: 100% (la 40% vizualizare)

Și, în cele din urmă, actualizați efectul de derulare rotativă după cum urmează:

• Rotație de pornire: 0 grade (la 0% vizualizare)
• Rotație medie: 0 grade (la 0% vizualizare)
• Rotatie finală: 90 grade (la 40% vizualizare)

Imaginea # 6

Pentru a crea imaginea nr. 6, copiați imaginea nr. 5 și mutați-o în coloana 2 (sub imaginea nr. 2).

Actualizați modulul de imagine cu imaginea # 5. Apoi reglați efectul de derulare rotativă în direcția opusă (-90 grade) după cum urmează:

• Rotație finală: -90 grade

Imaginea # 7

Pentru a crea imaginea # 7, copiați imaginea # 5 și mutați-o sub imaginea # 3 din coloana 3. Apoi actualizați modulul de imagine duplicat cu imaginea # 7.

Imaginea # 8

Pentru a crea imaginea # 8, copiați imaginea # 6 și mutați-o sub imaginea # 4 din coloana 4. Apoi actualizați modulul de imagine duplicat cu imaginea # 8.

Acum, toate feliile de imagine au fost adăugate la rândul # 1 cu efectul de defilare separat.

Iată cum arată rezultatul până acum.

Adăugați rândul # 2

Al doilea rând de imagini nu va dura mult timp pentru a fi proiectat. Tot ce trebuie să facem este să dublăm rândul # 1, să actualizăm toate imaginile cu cele corecte și apoi să îi oferim o poziție absolută.

Continuați și duplicați rândul # 1.

Actualizați imaginea rândului 2

Amintiți-vă imaginile rotite pe care le-am creat pentru imaginea nr. 2. Acum, tot ce trebuie să facem este să le încărcăm pe fiecare în locația corectă a modulului de imagine din rândul # 2.

Actualizați efectele de derulare a imaginii

Odată ce noile imagini rotite sunt la locul lor, trebuie să scoatem efectul de derulare Fading In și Out din toate imaginile din rândul # 2.

Faceți acest lucru, implementați modul de vizualizare wireframe și utilizați selecția multiplă pentru a selecta toate cele 8 imagini din rândul # 2. Apoi deschideți setările pentru una dintre imaginile selectate pentru a implementa setările Element. Sub opțiunea Fading In and Out efect de derulare, actualizați următoarele:

• Activați Fading In and Out: NU

Poziția rândul # 2

Ultimul nostru pas este să poziționăm rândul # 2 direct în spatele rândului # 1. O modalitate ușoară de a face acest lucru este de a da rândul și poziția absolută. Deschideți setările pentru rândul 2 și actualizați următoarele:

• Poziție: Absolută
• Locație: Centrul de sus

Rezultat final

Pentru a vedea rezultatul, poate fi necesar să acordați secțiunii dvs. o cantitate semnificativă de marjă superioară și inferioară sau să creați alte secțiuni deasupra și dedesubtul designului. Acest lucru vă va oferi camera de care aveți nevoie pentru a vedea efectul de derulare corect.

Să verificăm rezultatul final.

Și iată-l pe mobil.

Gânduri finale

Această tranziție de imagine separată este un design impresionant în sine, dar îl puteți folosi cu ușurință pentru a transmite vizitatorilor un mesaj de tip transformare (cum ar fi înainte și după). Și nici nu trebuie să vă mulțumiți cu acest design. Simțiți-vă liber să experimentați diferite efecte de derulare pentru a crea tranziții de imagine și mai uimitoare. Ai idei?

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

Noroc!