Crearea de efecte de defilare folosind Section Divider este o tehnică simplă și distractivă care vă poate adăuga viață site-ul web folosind WordPress temă Divi. Un separator de secțiuni continuă să fie un element de design versatil, util pentru a adăuga o notă de creativitate tranzițiilor tale. cuprins de pagină.
Dar cu efectele de defilare ale lui Divi, separatoarele de secțiuni devin și mai interesante! Trucul este să izolați o secțiune dedicată stilului de divizor ales. Apoi puteți adăuga tot felul de mișcări generate de defilare la secțiune pentru a crea efecte frumoase de defilare ca fundal pentru cuprins a paginii.
Să începem!
Rezultat posibil
Iată o prezentare generală a proiectelor pe care le vom putea realiza după finalizarea acestui tutorial.
Cum se creează divizoare de secțiune animată cu defilare cu Divi
Crearea celor două secțiuni de conținut
Adăugați un rând
Pentru a începe, creați un rând cu o coloană în secțiunea implicită.
Marja secțiunii (pentru teste)
În scopuri de testare, adăugați o marjă superioară la secțiune, astfel încât să putem avea loc pentru derulare. Deschideți setările secțiunii și adăugați următoarele:
- Marja de sus: 80vh
Adăugați un modul de text
În rândul unei coloane, adăugați un nou modul de text.
Conținutul modulului text
Interior de cuprins al corpului, adăugați următorul titlu H2:
<h2>Section Avec Séparateurs</h2>
Proiectarea modulului text
Sub setările de proiectare, actualizați următoarele:
- Font text: Roboto
- Alinierea textului: centru
- Articolul 2 Culoarea textului: # bae0d8
- Antetul 2 Dimensiunea textului: 80px (desktop), 50px (tabletă), 30px (telefon)
Adăugați o a doua secțiune de conținut
În secțiunea anterioară, adăugați o nouă secțiune obișnuită.
Adăugați un rând
În noua secțiune, adăugați un rând la o coloană.
Adăugați un modul de text
Apoi adăugați un nou modul text la linie.
Proiectarea modulului text
Pentru moment, putem păstra conținutul de umplere implicit în interiorul corpului. Să trecem la fila de proiectare și să actualizăm următoarele:
- Font text: Roboto
- Culoarea textului text: #dddddd
- Dimensiunea textului: 16px
- Înălțimea liniei de text: 1,5 em
- Aliniere text: stânga
- Lățimea maximă: 400 px
- Alinierea modulului: centru
Setări secțiune
Asigurați-vă că eliminați culoarea de fundal implicită a secțiunii, dar acordați-i un fundal complet transparent. Apoi, putem elimina căptușeala superioară și putem adăuga o marjă inferioară în scopul testării defilării.
Pentru a face acest lucru, deschideți setările secțiunii și actualizați următoarele:
- Culoare fundal: rgba (0,0,0,0)
- Marja de jos: 80vh
- Plăcuire: 0px
Crearea separatorului de secțiune animat
După ce două secțiuni de conținut sunt finalizate, suntem gata să adăugăm secțiunea pentru divizoarele noastre de secțiune animată.
Adăugați o secțiune nouă
Continuați și creați o nouă secțiune regulată în mijlocul celor două secțiuni de conținut.
Contextul secțiunii
Și din nou, eliminați culoarea de fundal implicită a secțiunii, dar actualizați următoarele:
- Culoare fundal: rgba (0,0,0,0)
Proiectare divizor secțiune
Nu vă faceți griji, vom crea culoarea de fundal cu separatoarele de secțiuni. Pentru a face acest lucru, faceți clic pe fila de proiectare și adăugați un separator superior și inferior în secțiune, după cum urmează:
Design superior divizorului
- Stilul divizorului superior: vezi captura de ecran
- Culoarea divizorului superior: # 524fbf
- Înălțimea divizorului superior: 20vw
- Repetarea orizontală a divizorului superior: 0,6x
- Răsturnarea divizorului superior: orizontală
Design inferior divizorului
- Stil divizor inferior: vezi captura de ecran
- Culoarea inferioară a separatorului: # 524fbf
- Înălțimea divizorului inferior: 20vw
- Repetarea orizontală a divizorului inferior: 0,5x
- Înclinarea inferioară a divizorului: orizontală și verticală
Înălțimea secțiunii și umplutură
Deoarece această secțiune este destinată exclusiv designului divizorului, putem scăpa de înălțime și de umplutură astfel încât să fie afișat doar stilul divizorului și să nu existe spațiu inutil între cele două secțiuni de conținut. Actualizați următoarele:
- Înălțime: 0px
- Garnitură: 0px înaltă, 0px mică
Secțiune Efecte de derulare a separatorului
Apoi dați secțiunea următoarele efecte de derulare:
Sub filă Mișcare orizontală ...
- Activați mișcarea orizontală: DA
Putem păstra setările implicite pentru aceasta în vizualizarea birou .
Apoi actualizați parametrii de mișcare orizontală pe Tablette :
- Start offset: 3 (la 0% din fereastră)
- Decalaj mediu: 0 (la 50% din vizualizare)
- Decalaj final: -3 (la 100% din vizualizare)
Sub filă Efect de scalare în sus și în jos , actualizați următoarele în secțiunea birou ...
- Scara de pornire: 200% (la 0% din fereastră)
- Scala medie: 150% (la 45% -65% din vizualizare)
- Scara finală: 150% (la 100% din vizualizare)
Apoi actualizați efectul Scaling Up and Down pe Tablette după cum urmează:
- Scara de pornire: 400% (la 0% din fereastră)
- Scala medie: 300% (la 45% -65% din vizualizare)
- Scara finală: 400% (la 100% din vizualizare)
Principalul motiv pentru care trebuie să ajustăm efectele de mișcare pe tabletă (și telefon) se datorează valorilor de mișcare orizontală folosind unități de lungime a pixelilor (adică 3 = 300 pixeli), absolut și nu se ajustează la lățimea browserului.
Acum să vedem rezultatul final al divizorului nostru de secțiuni animate.
Ultimele gânduri
Animarea divizoarelor de secțiuni de pe scroll este o modalitate distractivă și eficientă de a da viață unei pagini web. Sper că acest lucru vă oferă o sursă de inspirație pentru a vă declanșa designuri și mai creative.
