Ați dori să știți cum să dezvăluiți cuprins când treci peste separatorul de secțiuni în Divi ?
Separatoarele de secțiuni continuă să fie un element de design Divi popular. Există multe stiluri de separatoare din care să alegeți, cu opțiuni utile care facilitează adăugarea de tranziții și fundaluri unice la 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 cuprins a secţiunii.
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 anumit îndemn sau asupra unui buton pe care doriți ca oamenii să facă clic. vizitatori clic.
studiu
Descărcați DIVI acum!!!
Creați o pagină nouă cu Divi Builder
Din tabloul de bord WordPress, accesați Pagini> Adăugare nouă pentru a crea o pagină nouă.
Dați-i un titlu care să aibă sens pentru dvs. și faceți clic Utilizați Divi Builder
Apoi faceți clic pe Începeți să construiți (Construiește de la zero)
După aceea, veți avea o pânză goală pentru a începe proiectarea în Divi.
Proiectarea efectului Hover Section Divider în Divi
Crearea secțiunii și a liniei
Creați 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:
Gradient de fundal (stânga): #73ba57
Gradient de fundal (dreapta): #2a4c23
Latime: 80%
Lățimea maximă: 1 px
Alinierea secțiunii: Centru
Adăugați titlul secțiunii
Pentru a adăuga titlul secțiunii, creați un modul Text și introduceți următorul text:
<h2>The Juice</h2>
Apoi, actualizați designul după cum urmează:
Font: Lato
Dimensiunea textului: 80px
Spațiere între litere: -5px
Marja: -50px (sus), -40px (jos)
Index Z: -1
Marja personalizată și indexul z vor permite textului să rămână î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. Folosim o imagine din pachetul de layout Magazin de sucuri 240 pixeli pe 300 pixeli.
Ajustarea alinierii imaginii în centru.
Adăugați un modul „Îndemn” în coloana 2
În coloana 2, adăugați un modul Call To Action.
Adăugați o adresă URL a linkului unui buton pentru a vă asigura că butonul este afișat.
Stilul de fundal pentru CTA și textul titlului
Apoi, actualizați următoarele setări de design:
Fundal: #ffffff
Culoare text: închis
Font titlu: Lato
Greutatea fontului de titlu: Greu
Stil font: TT
Dimensiunea textului titlului: 18px
Personalizați butonul CTA
Actualizați designul butonului după cum urmează:
- Utilizați stiluri personalizate pentru buton: DA
- Culoarea textului butonului: #ffffff
- Culoare de fundal pentru buton: #73ba57
- Lățimea chenarului: 0px
Personalizați chenarul modulului CTA
Apoi adăugați un chenar pentru a încadra modulul după cum urmează:
Lățimea chenarului: 10px
Culoare chenar: rgba(115,186,87,0.15)
S-a adăugat efectul de hover la splitter pentru a dezvălui modulul „Apel la acțiune”.
Acum este timpul să adăugați efectul de hover la separatorul de secțiuni pentru a dezvălui modulul „Apel la acțiune”. Pentru a face acest lucru, trebuie mai întâi să ne creăm separatoarele de secțiuni.
Citiți și: Divi: Cum să dezvălui conținut când treci cu mouse-ul peste file
Adăugarea separatorului superior
Deschideți parametrii secțiunii și separatorul superior cu următorii parametri.
Stil Top Divider: vezi captura de ecran
Culoare divizor superior: #73ba57
Înălțimea divizorului: 70% (implicit), 0% (hover)
Top Divider Flip: orizontal
Rețineți că înălțimea separatorului începe cu o înălțime implicită de 70%, apoi se schimbă la o înălțime de 0% la trecerea cu mouse-ul.
S-a adăugat separator inferior
Apoi adăugați un separator inferior similar cu secțiunea cu următorii parametri.
- Stilul divizor inferior: vezi captura de ecran
- Culoare separator inferior: #73ba57
- Înălțime divizor: 70% (implicit), 0% (hover)
- Divizor Flip: orizontal
- Aranjament: În partea de sus a conținutului secțiunii
Acest separator inferior începe, de asemenea, cu o înălțime de 70%, care scade la 0% la hover. Cu toate acestea, deoarece opțiunea de aranjare a splitterului este setată deasupra conținutului, separatorul de secțiuni ascunde partea de jos a modulului „Call To Action” din coloana 1. Apoi, la trecerea cu mouse-ul, restul modulului este dezvăluit.
Verificați rezultatul de până acum.
Descărcați DIVI acum!!!
S-a adăugat efectul de umbră a casetei pentru tranziție și design unic
Pentru o tranziție și un design unic la hover, putem adăuga un efect de hover cu umbră de casetă care va avea loc simultan cu efectul de hover splitter. Pentru a face acest lucru, adăugați următoarea umbră casetă la secțiune.
- Box Shadow: vezi captura de ecran
- Poziție orizontală: 0px
- Poziție verticală: 0px
- Intensitatea difuzării umbrei casetei: 0px (implicit), 150px (pasare cu mouse-ul)
- Culoare umbră: #73ba57
Incetineste durata tranzitiei
Pentru o ultimă etapă, să încetinim durata tranziției.
Durata tranziției: 700 ms
Rezultat final
Acum că am parcurs toți pașii, să vedem rezultatul final.
Descărcați DIVI acum!!!
Concluzie
Sperăm că acest articol v-a inspirat pentru a crea efecte unice de divizare de secțiune pentru a dezvălui conținut.
De fapt, reglarea hover splitter poate fi un element de design grozav în sine. În plus, modelele de modele ar trebui să vă ajute să vă începeți propria explorare și design.
Sperăm că acest tutorial vă va inspira pentru următoarele proiecte Divi. Dacă aveți nelămuriri sau sugestii, găsiți-ne în secțiunea de comentarii pentru a discuta despre asta.
De asemenea, puteți consulta resursele noastre, dacă aveți nevoie de mai multe elemente pentru a vă derula proiectele de creare a site-urilor de internet, consultați ghidul nostru cu privire la Creare blog WordPress sau cea de pe Divi: cea mai bună temă WordPress din toate timpurile.
Dar între timp, împărtășește acest articol pe diferitele rețele de socializare.
...
