Cum să parcurgeți progresiv pașii către un proces cu efectele de defilare ale lui Divi

Companiile își educă adesea vizitatorii despre serviciile lor oferind o ilustrare utilă a etapelor procesului lor. De exemplu, o agenție de web design poate arăta procesul de dezvoltare web sau o brutărie poate prezenta pașii lor pentru a crea cupcake-ul perfect.

Cu Divi, putem face „pașii către un proces” la un nivel complet diferit folosind efectele de defilare încorporate. În acest tutorial, vă vom arăta o modalitate simplă de a parcurge progresiv pașii către un proces pe măsură ce utilizatorul derulează pagina. Acest lucru va oferi designului un impuls interactiv frumos, care subliniază în mod creativ mesajul dorit.

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.

Cum să parcurgeți progresiv pașii către un proces cu efectele de defilare ale lui Divi

Pentru a crea aspectul nostru pentru a interveni pașii către un proces pe scroll, trebuie să începem cu adăugarea unui rând nou.

Crearea rândului cu patru coloane

Pentru început, adăugați un rând cu patru coloane la secțiune.

Înainte de a începe să adăugăm module / conținut în coloane, deschideți setările pentru rând și actualizați următoarele:

• Lățimea jgheabului: 2
• Lățime maximă: 80%

Destul de simplu până acum. Acum să începem să adăugăm un conținut.

Adăugarea de conținut (pași) la fiecare coloană

Întrucât acest design prezintă un efect de derulare care blochează pașii către un proces, fiecare dintre coloanele noastre va conține unul dintre pași. Coloana 1 va conține conținut pentru a ilustra pasul 1. Coloana 2 va conține conținut pentru pasul 2. Și așa mai departe.

Adăugați un modul de text în coloana 1

Adăugați un nou modul de text în coloana 1.

Conținutul și designul modulului text

Apoi actualizați conținutul textului după cum urmează:

Deschideți fila de proiectare și actualizați următoarele setări:

• Font text: Lato
• Greutatea fontului textului: Bold
• Culoarea textului textului: # fc6d71
• Fontul titlului 2: Oswald
• Rubrica 2 Greutatea fontului: ușoară
• Rubrica 2 Dimensiune text: 32 px
• Rubrica 2 Spațierea literelor: 1 px
• Titlul 2 Înălțimea liniei: 1.3em
• Marja: 0 px de jos
• Căptușeală: 10% sus, 10% jos
• Lățimea chenarului: 1 px
• Culoare margine: rgba (166,166,166,0,16)

Adăugați modulul de imagine în coloana 1

Odată ce modulul de text este la locul său, adăugați un modul de imagine sub modulul de text din coloana 1.

Apoi actualizați marginea imaginii după cum urmează:

Copiați și lipiți conținutul coloanei 1

Pentru a accelera procesul de proiectare, putem utiliza selecția multiplă pentru a selecta cele două module din coloana 1 și apoi le lipiți în fiecare dintre cele patru coloane rămase.

Actualizați conținutul pentru modulele duplicat

Odată ce modulele duplicate sunt la locul lor, reveniți și actualizați conținutul textului și imaginile pentru a reflecta fiecare dintre cei patru pași ai procesului.

După ce ați terminat, designul dvs. ar trebui să arate cam așa.

Adăugarea de efecte de derulare la fiecare coloană

Acum suntem gata să adăugăm efectele de derulare pentru a clipi fiecare pas al procesului în timp ce utilizatorul derulează pagina în jos. În loc să adăugăm efecte de scroll la fiecare dintre module, vom adăuga efectul de scroll la fiecare coloană, astfel încât efectul să fie aplicat tuturor modulelor din conținut.

Pentru a crea efectul de defilare intermitent, vom folosi efectul de defilare Fading In și Out pentru fiecare coloană. Ideea este să începeți efectul începând cu 0% opacitate, să continuați până la 100% opacitate și apoi să reveniți la 0%.

Coloana 1 Efecte derulare

În setările de rând, deschideți setările pentru coloana 1 și adăugați următorul efect de derulare:

Sub fila opțiuni Fading In și Out:

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

Coloana 2 Efecte derulare

Deschideți setările pentru coloana 2 și adăugați următorul efect de derulare:

Sub fila opțiuni Fading In și Out:

• Activați Fading In and Out: DA
• Opacitate de pornire: 0% (la 35% vizualizare)
• Opacitate medie: 100% (la 40% -60% vizualizare)
• Opacitate finală: 0% (la 65% vizualizare)

Coloana 3 Efecte derulare

Coloana 4 Efecte derulare

Adăugarea unui antet

Ca ultimă atingere, putem adăuga un titlu la aspectul nostru. Pentru a face acest lucru, adăugați un nou rând cu o coloană sub rândul curent.

Apoi adăugați un modul text la rând cu următorul conținut:

Sub fila Proiectare, actualizați următoarele:

• Alinierea textului: Lato
• Rubrica 2 Greutatea fontului: ușoară
• Rubrica 2 Stil font: TT
• Rubrica 2 Culoarea textului: # fc6d71
• Titlul 2 Dimensiune text: 70 px (desktop), 40 px (tabletă), 24 px (telefon)
• Rubrica 2 Spațierea literelor: 0,5em

Rezultat final

Pentru a vedea rezultatul pe o pagină live, va trebui să adăugați spațiu suplimentar deasupra și dedesubtul secțiunii pentru a vedea efectul de derulare de la început până la sfârșit. O modalitate ușoară de a face acest lucru este să adăugați marja de sus și de jos la secțiune.

Iată rezultatul.

Gânduri finale

Ilustrarea pașilor unui proces nu trebuie să se limiteze la o imagine statică sau grafică. Cu efectul de defilare al lui Divi, puteți da viață ilustrației prin intermitentul progresiv al fiecărui pas în timp ce utilizatorul derulează pagina. Și, deoarece efectul de derulare este adăugat la fiecare coloană, puteți schimba cu ușurință modulele / conținutul din fiecare coloană fără a perturba funcționalitatea. Sperăm că aceasta va fi o tehnică utilă de adăugat în setul de instrumente de proiectare.

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

Noroc!