Separatoarele de secțiuni continuă să fie un element de design popular pe Divi. Există multe stiluri de separatoare, inclusiv câteva 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 puțin diferit. Divi vă permite să reglați înălțimea și aspectul fiecărui separator. Acest lucru ne permite să poziționăm separatoarele deasupra anumitor zone sau conținut din secțiune. Folosind opțiunea de hover pentru înălțimea separatorului, putem adăuga efecte de hover unice care dezvăluie a cuprins parțial ascuns. Acest lucru funcționează excelent pentru a atrage atenția asupra unui îndemn sau asupra unui anumit buton pe care doriți ca oamenii să facă clic. vizitatori clic.
Să începem.
Rezultatul probei
Ce ai nevoie pentru a începe
Pentru a începe, aveți nevoie de următoarele:
- Le Divi tema instalat și activ
- O nouă pagină creată de la zero pe front-end (constructor vizual)
- Câteva imagini fictive de utilizat în proiectare. Voi folosi câteva imagini cu fundal transparent din Suc de magazin pentru pachetul de sucuri .
După aceea, sunteți gata să începeți!
Implementarea designului efectului de deplasare a înălțimii separatorului de secțiuni în Divi
Crearea secțiunii și a liniei
Să începem prin crearea unei secțiuni obișnuite cu un rând de două coloane.
Înainte de a adăuga un modul, deschideți setările secțiunii și actualizați următoarele:
Gradient de fundal stânga: #73ba57
Gradient de fundal drept: #2a4c23
Lățime: 80%
Lățimea maximă: 1080px
Alinierea secțiunii: Centrul
Dar puteți alege și schema de culori care vă place în funcție de imaginea dvs. schema mea de culori este: # fff200 - # e09900 în gradient.
Adăugați titlul secțiunii
Pentru a adăuga titlul secțiunii, creați un modul text și actualizați cuprins a corpului cu următorul antet h2:
Sucul
Apoi actualizați desenul după cum urmează:
Rubrică 2 Font: Lato
Rubrică 2 Dimensiune text: 80px
Rubrica 2 Spațierea literelor: -5px
Margine: -50px în partea de sus, -40px în partea de 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.
Adauga imagine
Sub modulul text cu titlul în coloana 1, adăugați un modul imagine. Apoi încărcați o imagine cu un fundal transparent. Folosesc o imagine din pachetul de aspect Juice Shop, care este de 240 pixeli pe 300 pixeli.
Reglați alinierea imaginii la centru.
Adăugarea unui îndemn la coloana 2
În coloana 2, adăugați un apel la modulul de acțiune.
Adăugați o adresă URL a unui link de buton pentru a vă asigura că butonul este afișat.
CTA fundal și stil de titlu
Apoi actualizați următorii parametri de proiectare:
Culoarea fundalului: #ffffff
Culoare text:
titlu Font: Lato
Titlu Greutate politică: Greu
Titlu Font Style: TT
titlu Dimensiune text: 18px
Stylize butonul CTA
Actualizați designul butonului după cum urmează:
Culoarea textului butonului: #ffffff
Culoarea fundalului butonului: # e09900
Lățimea marginii butonului: 0 px
Modelarea frontierei CTA
Apoi adăugați o margine pentru a încadra modulul după cum urmează:
Lățimea marginii: 10px
Culoarea graniței: rgba (224,145,0,0.25)
A fost adăugat efectul de deplasare a înălțimii separatorului pentru a dezvălui îndemnul la acțiune
Acum, este timpul să adăugați efectul de înălțare a înălțimii diviziunii secțiunilor 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 superior
Deschideți parametrii secțiunii și separatorul superior cu următorii parametri.
Stilul divizorului superior: vezi captura de ecran Culoarea divizorului superior: # 73ba57 Înălțimea divizorului superior: 70% (implicit), 0% (plutit)
Flip top separator: orizontal
Rețineți că înălțimea separatorului începe cu o înălțime implicită de 70% și apoi se deplasează la o înălțime de 0% pe rollover.
Adăugarea divizorului inferior
Apoi adăugați un separator inferior similar cu secțiunea cu următorii parametri.
Stilul divizorului superior: vezi captura de ecran Culoarea divizorului superior: # 73ba57 Înălțimea divizorului superior: 70% (implicit), 0% (plutit)
Flip top separator: orizontal
Aspect divizor: în partea de sus a secțiunii Conținut
Acest separator de fundal începe, de asemenea, cu o înălțime de 70%, care se schimbă la 0% la deplasare. Cu toate acestea, deoarece opțiunea de dispunere a separatorului este setată în partea de sus a conținutului, separatorul de secțiuni ascunde partea inferioară a îndemnului la acțiune în coloana 1. Apoi, la cursor, restul l chemarea la acțiune este dezvăluită.
Verificați rezultatul de până acum.
S-a adăugat un efect de plutire în umbră pentru o tranziție și un design unic
Pentru o tranziție și un design unic în plan, putem adăuga un efect de trecere în umbră a cutiei care va avea loc simultan cu efectul de înălțare a înălțimii separatorului. Pentru a face acest lucru, adăugați umbra următoarei casete la secțiune.
Box Shadow: vezi captura de ecran
Box Shadow Poziție orizontală: 0px
Box Shadow Poziție verticală: 0px
Box Shadow Spread Force: 0px (implicit), 150px (trecerea)
Culoarea Shadow Box: #73ba57
Incetineste durata tranzitiei
Pentru o ultimă etapă, să încetinim durata tranziției.
Durata tranziției: 700ms
Rezultat final
Iată rezultatul final pe desktop.
Pe baza a ceea ce am făcut mai sus, veți putea personaliza afișajul de pe mobil și tabletă.
Ultimele gânduri
Sper că acest tutorial v-a oferit o sursă de inspirație pentru a crea efecte unice de împărțire a înălțimii pentru a dezvălui conținut. De fapt, reglarea înălțimii separatorului care se deplasează poate fi un element de design remarcabil. Și mostrele de proiectare ar trebui să vă ajute să începeți propria explorare și propriile modele.
Sper să aud de la dvs. în comentarii.
Sănătății tale!
