Cum se utilizează Efecte de deplasare pe înălțime a secțiunii pentru a dezvălui conținut în Divi

Divizoarele de secțiuni continuă să fie un element popular de design Divi. Există multe stiluri de divizare din care puteți alege, cu opțiuni utile care facilitează adăugarea de tranziții și fundaluri unice pe pagina dvs.

În acest tutorial, vom folosi separatoarele de secțiuni un pic diferit. Divi vă permite să reglați înălțimea și dispunerea fiecărui separator. Acest lucru ne permite să poziționăm separatoarele deasupra anumitor zone sau conținut din secțiune. Utilizând opțiunea de deplasare pentru înălțimea separatorului, putem adăuga efecte de deplasare unice care dezvăluie conținut parțial ascuns. Acest lucru funcționează excelent pentru a atrage atenția asupra unui anumit apel la acțiune sau a unui buton pe care doriți ca vizitatorii să facă clic.

Să începem.

Trage cu ochiul

Descărcați secțiunea Divider Height Hover Effects 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?

Abonați-vă la canalul nostru Youtube

Ce trebuie să începeți

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

1. Tema Divi instalată și activă
2. O nouă pagină creată pentru a construi de la zero pe partea frontală (constructor vizual)
3. Câteva imagini simulate de utilizat în design. Voi folosi câteva imagini cu fundaluri transparente din pachetul de machetare Juice Shop.

După aceea, sunteți gata să începeți!

Implementarea secțiunii Divider Height Hover Effect Design în Divi

Crearea secțiunii și rândului

În primul rând, să creăm o secțiune obișnuită cu un rând cu două coloane.

Înainte de a adăuga un modul, deschideți setările secțiunii și actualizați următoarele:

Culoarea din stânga a gradientului de fundal: # 73ba57
Culoarea dreaptă a gradientului de fundal: # 2a4c23
Lățime: 80%
Lățime maximă: 1080px
Alinierea secțiunii: centru

Adăugarea titlului secțiunii

Pentru a adăuga titlul secțiunii, creați un modul text și actualizați conținutul corpului cu următorul antet h2:

<h2>The Juice</h2>

Apoi actualizați designul după cum urmează:

Rubrica 2 Font: Lato
Rubrica 2 Dimensiune text: 80 px
Rubrica 2 Spațierea literelor: -5 px
Marja: -50 px sus, -40 px jos
Z-Index: -1

Marja personalizată și indexul z vor permite textului să stea în spatele imaginii pe care o vom adăuga în pasul următor.

Adăugarea imaginii

Sub modulul text cu titlul în coloana 1, adăugați un modul imagine. Apoi încărcați o imagine care are un fundal transparent. Folosesc o imagine din pachetul de aspect pentru magazinul de sucuri, care este de 240 px cu 300 px.

Reglați alinierea imaginii la centru.

Adăugarea unui îndemn la coloana 2

În coloana 2, adăugați un modul de apelare la acțiune.

Adăugați o adresă URL de link de buton pentru a vă asigura că butonul apare.

Stilizarea fundalului CTA și a textului titlului

Apoi actualizați următoarele setări de proiectare:

Culoare fundal: #ffffff
Culoarea textului: închis
Titlu Font: Lato
Titlu Greutate font: greu
Titlu Stil Font: TT
titlu Dimensiune text: 18 px

Stilizarea butonului CTA

Actualizați designul butoanelor după cum urmează:

Culoarea textului butonului: #ffffff
Culoarea fundalului butonului: # 73ba57
Lățimea chenarului butonului: 0 px

Stilizarea frontierei CTA

Apoi adăugați o margine pentru a încadra modulul după cum urmează:

Lățimea chenarului: 10 px
Culoare margine: rgba (115.186,87,0.15)

Adăugarea efectului de înălțire a înălțimii pentru a dezvălui îndemnul la acțiune

Acum este timpul să adăugați efectul de deplasare pe înălțime a separatorului de secțiune pentru a dezvălui îndemnul la acțiune. Pentru a face acest lucru, trebuie mai întâi să creăm separatoarele noastre de secțiuni.

Adăugarea separatorului de sus

Deschideți setările secțiunii și divizorul superior cu următoarele setări.

Stilul divizorului superior: vezi captura de ecran
Culoarea separatorului superior: # 73ba57
Înălțimea împărțitorului superior: 70% (implicit), 0% (pluteste)
Flip divizor superior: orizontal

Observați că Înălțimea divizorului începe cu o înălțime implicită de 70% și apoi se schimbă la o înălțime de 0% la plimbare.

Adăugarea divizorului inferior

Apoi adăugați un divizor inferior similar secțiunii cu următoarele setări.

Stilul divizorului superior: vezi captura de ecran
Culoarea separatorului superior: # 73ba57
Înălțimea împărțitorului superior: 70% (implicit), 0% (pluteste)
Flip divizor superior: orizontal
Aranjament divizor: Conținutul din partea de sus a secțiunii

Acest divizor inferior începe, de asemenea, cu o înălțime de 70%, care se schimbă la 0% la plimbare. Cu toate acestea, deoarece opțiunea de aranjare a divizorului este setată deasupra conținutului, divizorul de secțiune ascunde porțiunea inferioară a îndemnului în coloana 1. Apoi, în timpul deplasării, este dezvăluit restul îndemnului la acțiune.

Verificați rezultatul de până acum.

Adăugarea unui efect Shadow Hover pentru o tranziție și un design unic

Pentru o tranziție și un design unic la trecere, putem adăuga un efect de trecere la umbră a cutiei care va avea loc simultan cu efectul de deplasare la înălțimea separatorului. Pentru a face acest lucru, adăugați următoarea umbră a secțiunii.

Box Shadow: vezi captura de ecran
Poziție orizontală a umbrei cutiei: 0 px
Box Shadow Vertical Position: 0px
Puterea răspândirii umbrei cutiei: 0 px (implicit), 150 px (plutitor)
Culoare umbră cutie: # 73ba57

Încetinirea duratei tranziției

Pentru un ultim pas, să încetinim puțin durata tranziției.

Durata tranziției: 700 ms

Rezultat final

Iată rezultatul final pe desktop.

Dacă nu doriți ca conținutul să fie ascuns pe afișajul tabletei și al telefonului, puteți schimba cu ușurință aranjamentul divizorului în „sub conținutul secțiunii” pentru aceste dispozitive.

Iată designul final pe tabletă și telefon.

Experimentarea cu alte stiluri de divizare a secțiunilor pentru modele complet unice în secunde

Cu această configurație în loc, puteți experimenta cu ușurință diferite stiluri și combinații de separatoare!

Iată câteva altele pe care le-am inclus în descărcarea gratuită.

Gânduri finale

Sperăm că această postare v-a oferit puțină inspirație pentru a crea câteva efecte unice de deplasare a înălțimii separatorului de secțiune pentru a dezvălui conținut. De fapt, reglarea înălțimii separatorului pe hover poate fi un element de design excelent de la sine. Și, exemplele de design ar trebui să vă ajute să începeți propriile explorări și modele.

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

Noroc!