Cum să creați o frumoasă secțiune erou care colidește coloane pe scroll cu Divi

Efectele de scroll ale lui Divi aduc o mulțime de noi posibilități de design pentru site-urile pe care le creați. Interacțiunile subtile pe care alegeți să le adăugați pot ajuta cu adevărat la îmbunătățirea aspectului general al site-ului dvs. web. Totul devine și mai bun de îndată ce sincronizați efectele de derulare. În acest tutorial, ne vom ocupa în mod special de crearea unei frumoase secțiuni de erou pe coloană pe scroll. Designul secțiunii erou îmbină două coloane diferite pe scroll, ceea ce la rândul său ajută la sublinierea copiei. Veți putea descărca gratuit fișierul JSON!

Să ajungem la asta.

previzualizare

Acum, că am parcurs toți pașii, să aruncăm o privire rapidă asupra rezultatului pe diferite dimensiuni de ecran.

Desktop

Mobil

Descărcați GRATUIT Layout-ul secțiunii Column-Colliding Hero

Pentru a vă pune mâna pe aspectul gratuit al secțiunii erou care se ciocnește de coloane, 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!

Recreați aspectul secțiunii secțiunii erou

Adăugați o secțiune nouă

Culoare de fundal

Începeți prin a adăuga o nouă secțiune la pagina la care lucrați. Deschideți setările secțiunii și schimbați culoarea de fundal.

• Culoare fundal: # f4f2f7

Spațiere

Eliminați și căptușeala implicită de sus și de jos a tuturor secțiunilor.

• Căptușeală de sus: 0 px
• Căptușeală inferioară: 0 px

Adăugați un rând nou

Structura coloanei

Continuați adăugând un rând nou la secțiune utilizând următoarea structură de coloane:

Dimensionare

Fără a adăuga încă module, deschideți setările rândului și modificați setările de dimensionare în consecință:

• Utilizați lățimea personalizată a jgheabului: da
• Lățimea jgheabului: 1
• Egalizați înălțimile coloanei: Da
• Lățime: 100%
• Lățime maximă: 100%

Spațiere

Eliminați toate umpluturile implicite de sus și de jos în continuare.

• Căptușeală de sus: 0 px
• Căptușeală inferioară: 0 px

Revărsări

Și ascundeți revărsările rândului.

• Overflow orizontal: Ascuns
• Vertical Overflow: Ascuns

Setări coloana 1

Spațiere

Apoi, deschideți setările coloanei 1 și adăugați câteva valori de umplere personalizate.

• Căptușeală superioară: 15vw
• Căptușeală inferioară: 10vw
• Căptușeală stângă: 5vw
• Garnitura dreapta: 5vw

Indicele Z

Măriți și indexul z al coloanei.

• Indicele Z: 12

Setări coloana 2

Imagine de fundal

Continuați deschizând setările coloanei 2 și încărcați o imagine de fundal la alegere.

• Dimensiunea imaginii de fundal: copertă
• Poziția imaginii de fundal: Centru
• Repetarea imaginii de fundal: fără repetare
• Amestec de imagine de fundal: Normal

Adăugați modulul de text nr. 1 în coloana 1

Adăugați conținut H1

Este timpul să adăugați module, începând cu un prim modul de text din coloana 1. Adăugați conținut H1 la alegere.

Setări text H1

Treceți la fila de proiectare a modulului și modificați setările de text H1 în consecință:

• Font de titlu: Umbre în lumină
• Greutatea fontului de titlu: Bold
• Culoare text antet: # 000000
• Dimensiune text antet: 6vw (desktop), 11vw (tabletă), 13vw (telefon)
• Distanța între litere de antet: -2 px
• Înălțimea liniei de direcție: 1.2em

Spațiere

Adăugați și o marjă de sus.

• Marja superioară: 10vw

Adăugați modulul de text nr. 2 în coloana 1

Adauga continut

Introduceți un alt modul de text cu un conținut de descriere la alegere.

Setări text

Modificați setările de text ale modulului după cum urmează:

• Font text: Deschideți Sans
• Culoarea textului: # 1e1e1e
• Dimensiune text: 0.9vw (desktop), 1.9vw (tabletă), 3vw (telefon)
• Înălțimea liniei de text: 2.4em

Spațiere

Și adăugați câteva valori de marjă personalizate pe diferite dimensiuni de ecran.

• Marja superioară: 4vw (desktop), 8vw (tabletă), 12vw (telefon)
• Marja inferioară: 4vw (desktop), 8vw (tabletă), 12vw (telefon)

Adăugați modulul buton la coloana 1

Adăugați o copie

Următorul și ultimul modul de care avem nevoie în această coloană este un modul buton. Adăugați o copie la alegere.

Setări buton

Modificați setările butonului modulului după cum urmează:

• Utilizați stiluri personalizate pentru buton: Da
• Dimensiune text buton: 1vw (desktop), 2vw (tabletă), 3vw (telefon)
• Culoarea textului butonului: #ffffff
• Culoarea fundalului butonului: # 000000
• Lățimea chenarului butonului: 0 px
• Raza chenarului butonului: 100 px

• Buton Font: Deschideți Sans

Spațiere

Și completați setările butonului adăugând câteva valori de umplere personalizate pe diferite dimensiuni de ecran.

• Căptușeală superioară: 1vw (desktop), 2vw (tabletă), 3vw (telefon)
• Căptușeală inferioară: 1vw (desktop), 2vw (tabletă), 3vw (telefon)
• Căptușeală stângă: 3vw (desktop), 5vw (tabletă), 7vw (telefon)
• Căptușeală dreaptă: 3vw (desktop), 5vw (tabletă), 7vw (telefon)

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

Adauga continut

În a doua coloană, singurul modul de care avem nevoie este un modul de text. Introduceți un conținut la alegere.

Setări text

Treceți la fila de proiectare a modulului și modificați setările de text în consecință:

• Font text: Umbre în lumină
• Culoarea textului: rgba (0,0,0,0.25)
• Dimensiune text: 9vw (desktop), 14vw (tabletă și telefon)
• Spațiere scrisoare text: -3px
• Înălțimea liniei de text: 1em
• Aliniere text: centru (desktop), stânga (tabletă și telefon)

Spațiere

Adăugați și câteva valori de umplere personalizate.

• Căptușeală superioară: 5vw (desktop),
• Căptușeală inferioară: 60vw (tabletă și telefon)
• Căptușeală stângă: 5vw (tabletă și telefon)

Aplicați animații de derulare

Secțiune

Scalare în sus și în jos

Odată ce toate modulele dvs. sunt la locul lor, este timpul să aplicați efectele de derulare! Deschideți mai întâi setările secțiunii și utilizați următorul efect de scalare în sus și în jos:

• Activați Sclaing în sus și în jos
• Scara de start: 100% (la 49%)
• Scară medie:
  • Desktop: 70% (la 100%)
  • Tabletă și telefon: 100% (la 100%)
• Scara de încheiere:
  • Desktop: 70%
  • Tabletă și telefon: 100%

Coloana 1

Mișcare orizontală

Continuați deschizând setările coloanei 1 și utilizați următorul efect de mișcare orizontală:

• Activați mișcarea orizontală: Da
• Offset de pornire: 0
• Decalaj mediu:
  • Desktop: 0 (la 65%)
  • Tabletă și telefon: 0 (la 93%)
• Offset final:
  • Desktop: 6
  • Tabletă și telefon: 0

Scalare în sus și în jos

Aplicați un efect de redimensionare în sus și în jos și la coloană.

• Activați scalarea în sus și în jos: da
• Scara de pornire:
  • Desktop: 10%
  • Tabletă și telefon: 100%
• Scară medie:
  • Desktop: 90%
  • Tabletă și telefon: 100%
• Scara de încheiere: 100%

Coloana 2

Mișcare orizontală

Apoi, deschideți setările coloanei 2 și utilizați următoarele setări de mișcare orizontală:

• Activați mișcarea orizontală: Da
• Offset de pornire: 0
• Decalaj mediu:
  • Desktop: 0 (la 53%)
  • Tabletă și telefon: 0 (la 56%)
• Offset final:
  • Desktop: -6 (la 53%)
  • Tabletă și telefon: 0 (la 100%)

Fading In and Out

Completați setările coloanei prin adăugarea unui efect de decolorare și ieșire.

• Activați Fading In and Out: Da
• Opacitate de pornire: 100% (la 47%)
• Opacitate medie:
  • Desktop: 0% (la 47%)
  • Tabletă și telefon: 100% (la 47%)
• Opacitatea finală:
  • Desktop: 0%
  • Tabletă și telefon: 100%

previzualizare

Acum că am parcurs toți pașii, să aruncăm o privire finală asupra rezultatului pe diferite dimensiuni de ecran.

Desktop

Mobil

Gânduri finale

În această postare, v-am arătat cum să utilizați în mod creativ efectele de derulare ale lui Divi pentru a crea o secțiune erou care se ciocnește de coloane. De îndată ce vizitatorii parcurg, cele două coloane diferite și elementele lor vor începe să se îmbine. La rândul său, acest lucru vă va permite să subliniați și mai mult copia. Ați putut descărca gratuit fișierul JSON! Dacă aveți întrebări sau sugestii, nu ezitați să lăsați un comentariu în secțiunea de comentarii de mai jos.

Dacă sunteți dornici să aflați mai multe despre Divi și să obțineți mai multe cadouri Divi, asigurați-vă că vă abonați la newsletter-ul nostru de e-mail și la canalul YouTube, astfel încât să fiți întotdeauna unul dintre primii oameni care să cunoască și să obțină beneficii din acest conținut gratuit.