Doriți să creați file cu efect de hover din rândurile cu Divi ?
Filele sunt cu siguranță utile pentru a face disponibile informații importante într-o zonă concisă a dvs site-ul web. Acest lucru reduce nevoia utilizatorului de a derula prin cuprins de o pagină lungă. Modulul tab Divi este ușor de utilizat și ideal pentru navigare a cuprins simplu cu un singur clic.
Dar în acest tutorial vă vom arăta cum să convertiți rândurile Divi filate și apar la hover.
De asemenea, vă vom arăta cum să creați file orizontale și verticale. Acest lucru va debloca puterea Divi de a crea machete complete cu mai multe module pentru fiecare zonă cuprins fila.
Nu sunt necesare pluginuri!
Să începem.
studiu
Iată o prezentare generală a filelor pe care le vom crea împreună în acest tutorial.
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.
Crearea filelor Hover orizontale folosind „Rândurile Divi”
În secțiunea implicită prezentă, adăugați un rând cu două coloane.
Linie de fundal, umplere casetă și umbră
Înainte de a adăuga modulele noastre, să personalizăm mai întâi puțin setările rândurilor. Deschideți Setări de linie și actualizați următoarele:
- Culoare gradient stânga: #284f91
- Culoare gradient dreapta: #4646c4
- Umplutură: 50px (sus și jos), 50px (stânga și dreapta)
- Box Shadow: vezi captura de ecran
- Culoarea umbrei casetei: rgba(70,70,196,0.66)
Adăugați conținut la rând
Acum vom adăuga conținut substituent la rândul nostru. În coloana 1, adăugați o imagine la alegere cu un modul Image. Aici am folosit o imagine din pachetul de layout « Pachet de proiectare a conferinței« .
În coloana din dreapta, adăugați un modul Apelul la acțiune și actualizați următoarele:
- Adresa URL a linkului butonului: # (doar pentru a afișa butonul pentru moment)
- Utilizați culoarea de fundal: NU
- Alinierea textului: stânga
- Font titlu: Lato
- Dimensiunea textului titlului: 60px (desktop), 50px (telefon)
Crearea filei
Pentru a crea fila reală pe care utilizatorii vor trece cu mouse-ul pentru a dezvălui conținutul acelui rând, trebuie să creăm un modul Text și să-l poziționăm în dreapta sus cu un CSS personalizat.
Continuați și adăugați un nou modul de text sub imaginea din coloana 1 și actualizați următoarele:
- Corp: „Fila 1”
- Fundal: #284f91 (acest lucru ar trebui să se potrivească cu culoarea gradientului din stânga a liniei)
- Alinierea textului: centrat
- Culoare text: #ffffff
- Latime: 100px
- Înălțime: 50px
- Marja: -100px (sus), -50px (stânga)
- Umplutură: 14 px (sus)
În cele din urmă, adăugați următorul CSS personalizat la elementul principal pentru a-i oferi o poziție absolută în partea de sus a liniei.
position: absolute !important;
top: 0;
Înălțimea și distanța secțiunii
Pentru moment, deschideți setările secțiunii și actualizați următoarele:
- Înălțime minimă: 500 px (desktop), 900 px (tabletă), 750 px (telefon)
- Marja: 100 pixeli (sus și jos)
- Umplutură: 0px (sus și jos)
Crearea celei de-a doua linii
Pentru a crea al doilea rând, duplicați rândul pe care l-ați creat mai devreme. Mutați modulul de text în coloana 1 și imaginea în coloana 2. Apoi actualizați imaginea cu una nouă. Acest lucru vă va ajuta să vă faceți o idee despre cum arată conținutul diferit în fiecare filă.
Apoi deschideți setările modulului Textul folosit pentru a crea fila în coloana 1 și mutați fila la dreapta, astfel încât, acolo unde acest rând se suprapune cu rândul de mai sus, puteți vedea fila direct în dreapta filei din prima linie.
- Marja: 50 px (stânga)
Efect de hover adăugat
Deschideți setările rândului și adăugați următorul filtru:
- Opacitate: 70% (implicit), 100% (hover)
Apoi adăugați o durată de tranziție și o curbă de viteză pentru efectul de hover al filtrului de opacitate.
- Timp de tranziție: 500 ms
- Curba vitezei de tranziție: liniară
Crearea celei de-a treia file
Acum putem adăuga ultima noastră filă. Pentru a face acest lucru, duplicați a doua linie pe care tocmai ați creat-o. Apoi mutați modulul de text în coloana 1 și imaginea în coloana 2. Și actualizați modulul de imagine cu o nouă imagine.
Actualizați setările liniei cu un nou gradient de fundal.
- Culoare gradient de fundal stânga: #333333
- Culoare gradient de fundal dreapta: #4646c4
Apoi deschideți setarea modulului Text folosită pentru a crea fila din coloana 1 și actualizați culoarea și marginea.
- Fundal: #333333
- Marja: 150 px (stânga)
Iată cum ar trebui să arate pagina dvs. înainte de a ne poziționa liniile pentru a se suprapune.
Linii suprapuse cu poziționare absolută
Pentru a ne suprapune liniile, trebuie să folosim poziționarea absolută. Mai întâi, actualizați înălțimea tuturor celor trei rânduri la 100%.
- Înălțime: 100%
Apoi adăugați următorul CSS personalizat la elementul principal al tuturor celor trei linii:
position: absolute !important;
left: 0;
right: 0;
margin: auto;
Așa arată filele noastre în acest moment.
Modificarea ordinii rândurilor la trecerea cursorului cu indexul Z
În acest moment, este posibil să fi observat că al treilea rând/filă este în prim plan. Așadar, trebuie să rearanjam rândurile folosind Z Index, astfel încât prima filă să se afișeze mai întâi până când treceți cu mouse-ul peste o altă filă.
Citiți și: Cum se creează suprapuneri de imagini personalizate în Divi
Pentru a face acest lucru, deschideți setările primului rând și actualizați indexul z după cum urmează:
Indicele Z: 10
Apoi puneți indicele Z al celorlalte două linii pe hover.
Z-Index: 11 (Hover)
E gata ! Să vedem rezultatul final.
Rezultat final
Descărcați DIVI acum!!!
Crearea de file verticale
Dacă doriți să adăugați file verticale la rânduri, iată ce trebuie să faceți.
Continuați și duplicați secțiunea care conține file-urile pe care tocmai le-am creat, astfel încât să aveți un design nou cu care să lucrați.
Apoi deschideți setările secțiunii și actualizați următoarele:
- Umplutură: 10% (stânga și dreapta)
Actualizați următoarele setări pentru toate cele trei linii ale secțiunii duplicate cu următoarele:
- Lățime: 70% (desktop), 70% (tabletă), 80% (telefon)
- Lățimea maximă: 980 px
Apoi, actualizați direcția gradientului la 90 de grade pentru toate cele trei linii.
- Direcție gradient: 90 de grade
Acum este timpul să poziționăm filele modulului Text în stânga rândurilor noastre pentru a obține filele verticale pe care le dorim.
Vezi și: Cum se creează un meniu cu roată învârtită în Hover în Divi
Deschideți setarea filei modulului de text în prima linie și actualizați următoarele:
- Marja (desktop): -50px (sus), -150px (stânga)
Apoi, deschideți setările filei Secțiunea 2 Text linie și actualizați următoarele:
- Marja (desktop): 0px (sus), -150px (stânga)
Și pentru ultima filă din al treilea rând, actualizați următoarele:
- Marja (desktop): 50px de sus, -150px la stânga
Rezultat final
Acum să vedem rezultatul final.
Descărcați DIVI acum!!!
Concluzie
Cu puțină creativitate și puterea Divi, puteți crea câteva file personalizate destul de grozave folosind liniile Divi. Există câteva limitări la ceea ce puteți afișa.
De exemplu, cu această configurație, toate rândurile trebuie să aibă aceeași înălțime ca și secțiunea. Dar, pentru a nu fi nevoie să utilizați un plugin, aceasta este o soluție excelentă.
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.
...
