Cum se convertesc rândurile Divi în file Hover orizontale și verticale

Publicat: 2019-05-29

Filele sunt cu siguranță utile pentru a pune la dispoziție informații importante într-o zonă concisă a site-ului dvs. web. Acest lucru reduce necesitatea ca utilizatorul să parcurgă conținutul lung al paginii. Modulul de file Divi este ușor de utilizat și excelent pentru a comuta prin conținut simplu la clic.

Dar, în acest tutorial, vă voi arăta cum să convertiți rânduri Divi întregi în file cu mouse-ul. De asemenea, vă voi arăta cum să creați atât filele orizontale, cât și cele verticale. Acest lucru va debloca puterea Divi de a proiecta machete complete de rânduri cu mai multe module pentru fiecare zonă de conținut a filei. Nu este nevoie de niciun plugin!

Să începem.

Trage cu ochiul

Iată o privire rapidă asupra filelor de planare orizontală și verticală pe care le vom construi împreună în acest tutorial.

Descărcați GRATUIT aspectul filelor Divi Rows Hover

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.

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ătoarea configurare:

Tema Divi instalată și activă
O nouă pagină creată pentru a construi de la zero pe partea frontală (constructor vizual)
Trei imagini pentru a fi utilizate pentru conținut fals

După aceea, veți avea o pânză goală pentru a începe să construiți câteva file de plutire în Divi.

Crearea filelor orizontale de deplasare folosind rândurile Divi

Pentru a începe, creați o nouă secțiune obișnuită cu un rând cu două coloane.

Fundalul rândului, capitonarea și umbra cutiei

Înainte de a adăuga modulele noastre, să personalizăm mai întâi setările rândurilor. Va trebui să revenim la rând mai târziu pentru a-l poziționa pentru funcționalitatea filelor noastre.

Deschideți setările rândului și actualizați următoarele:

Culoarea din stânga a gradientului de fundal: # 284f91
Culoarea dreaptă a gradientului de fundal: # 4646c4

Căptușeală: 50 px sus, 50 px jos, 50 px stânga, 50 px dreapta
Box Shadow: vezi captura de ecran
Culoare umbră cutie: rgba (70,70,196,0,66)

Adăugarea de conținut la rând

Acum vom adăuga niște conținut fals la rândul nostru. Rețineți că puteți adăuga orice combinație de coloane și module pentru zona dvs. de conținut.

În coloana 1, adăugați o imagine cu un modul de imagine. Folosesc unul din Design Conference Layout Pack.

În coloana din dreapta, adăugați un modul de apel la acțiune și actualizați următoarele:

Adresă URL a butonului: # (doar pentru a afișa butonul deocamdată)
Folosiți culoarea de fundal: NU

Alinierea textului: stânga
Titlu Font: Lato
Dimensiune text titlu: 60 px (desktop), 50 px (telefon)

Crearea filei

Pentru a crea fila reală pe care utilizatorii o vor plasa pentru a dezvălui conținutul acestui rând, trebuie să creăm un modul text și să-l poziționăm în partea dreaptă sus cu unele CSS personalizate.

Continuați și adăugați un nou modul de text sub imaginea din coloana 1 și actualizați următoarele:

Conținut: „Tab One”

Culoare de fundal: # 284f91 (aceasta ar trebui să se potrivească cu culoarea de gradient stânga a rândului)
Alinierea textului textului: centru
Culoarea textului textului: #ffffff
Lățime: 100 px
Înălțime: 50 px
Marja: -100px sus, -50px stânga
Căptușeală: partea superioară de 14 px

Î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 rândului.

position: absolute !important;
top: 0;

Acest css plus marginile personalizate pe care le-am adăugat vor asigura că fila este poziționată exact în partea stângă sus a rândului. Este important ca filele să stea de fapt deasupra rândului, astfel încât utilizatorul să poată trece peste el mai târziu.

Secțiunea Înălțime și spațiu

Acum, înainte de a continua să creăm rândurile și filele rămase, să le oferim rândurilor noastre un spațiu mic de respirare adăugând niște margini de sus și de jos la secțiune. Pentru acest design, este important să folosim margini pentru a spaționa secțiunea noastră, deoarece vom oferi și secțiunii noastre o înălțime stabilită. Trebuie să acordăm secțiunii noastre o înălțime stabilită, deoarece vrem ca rândurile noastre să se întindă pe toată înălțimea secțiunii noastre. Aceasta înseamnă că fiecare dintre rândurile noastre (conținutul filei) va avea aceeași înălțime a secțiunii noastre. Deci, cel mai bine este ca fiecare dintre rânduri să aibă o cantitate similară de conținut sau să existe spațiu negativ nedorit în unele file de rând. Acest lucru ar trebui să aibă mai mult sens mai târziu.

Deocamdată, deschideți setările secțiunii și actualizați următoarele:

Înălțime: 500 px (desktop), 900 px (tabletă), 750 px (telefon)
Marja: 100 px de sus, 100 px de jos
Căptușeală: 0 px sus, 0 px jos

Observați că înălțimea secțiunii va trebui ajustată pentru a ține cont de spațiul de conținut mai mare atunci când coloanele rândurilor se stivuiesc pe mobil. Deci, va trebui să existe unele modificări la această înălțime pentru propriile nevoi.

Acum salvați setările și să revenim la adăugarea altor rânduri.

Crearea celui de-al doilea rând de conținut al filei

Pentru a crea al doilea rând, duplicați rândul pe care l-ați creat anterior. Mutați modulul 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 pe fiecare filă.

Deschideți setările celui de-al doilea rând și comutați culorile gradientului de fundal trecând peste zona de previzualizare a fundalului și faceți clic pe pictograma mică „comutare”.

Apoi deschideți setările modulului de text utilizat pentru a crea fila din coloana 1 și dați-i o culoare care se potrivește cu noul gradient superior.

Culoare fundal: # 4646c4

Apoi, trebuie să mutăm fila spre dreapta, astfel încât atunci când acest rând se suprapune peste rândul de mai sus, puteți vedea fila direct în dreapta filei din primul rând.

Marja: 50 px stânga

Adăugarea efectului de oprire a filtrului de opacitate pentru al doilea rând

Pentru rând, putem adăuga un efect de oprire a filtrului de opacitate, astfel încât să existe o tranziție de trecere frumoasă atunci când treceți peste filă și dezvăluie conținutul rândului.

Deschideți setările rândului și adăugați următorul filtru:

Opacitate: 70% (implicit), 100% (pluteste)

Apoi adăugați o durată de tranziție și o curbă de viteză pentru efectul de trecere a filtrului de opacitate.

Durata tranziției: 500 ms
Curba vitezei de tranziție: liniară

Crearea celui de-al treilea rând de conținut al filei

Acum putem adăuga ultimul nostru rând de conținut al filei. Pentru a face acest lucru, copiați al doilea rând pe care tocmai l-ați creat. Apoi mutați modulul text în coloana 1 și imaginea în coloana 2. Și actualizați modulul imagine cu o imagine nouă.

Actualizați setările Row cu un nou gradient de fundal.

Culoarea din stânga a gradientului de fundal: # 333333
Culoarea dreaptă a gradientului de fundal: # 4646c4

Apoi deschideți setarea modulului de text utilizat pentru a crea fila din coloana 1 și actualizați culoarea și marginea.

Culoare fundal: # 333333
Marja: 150 px stânga

Așa ar trebui să arate pagina dvs. înainte de a ne poziționa rândurile pentru a se suprapune.

Suprapunerea rândurilor cu poziționare absolută

Pentru a suprapune rândurile noastre, trebuie să folosim poziționarea absolută. Apoi vom folosi opțiunea index Z pentru a aduce fiecare rând în prim plan atunci când treceți peste file. Dar, deoarece oferim rândurilor noastre o poziție absolută (iar părintele / secțiunea are o înălțime stabilită), putem adăuga 100% înălțime la fiecare dintre rânduri, astfel încât să se întindă pe întreaga înălțime a secțiunii.

Iată cum să o faci.

În primul rând, implementați modul wireframe. Apoi utilizați multiselect pentru a selecta toate cele trei rânduri și deschideți setările unuia dintre ele pentru a implementa setările modale ale elementului. Apoi actualizați înălțimea la 100%.

Înălțime: 100%

Aceasta va seta înălțimea pentru toate cele trei rânduri la 100%.

Apoi adăugați următorul CSS personalizat la elementul principal:

position: absolute !important;
left: 0;
right: 0;
margin: auto;

Acum implementați modul de vizualizare desktop pentru a vedea cum rândurile se suprapun frumos pentru a crea filele noastre.

Modificarea ordinii rândurilor pe Hover cu indexul Z

Chiar acum este posibil să fi observat că al treilea rând / filă este în frunte. Așadar, trebuie să reordonăm rândurile folosind Z Index, astfel încât prima filă să apară mai întâi până când treceți peste o altă filă.

Pentru a face acest lucru, reveniți la modul de vizualizare wireframe și deschideți setările pentru primul rând pe care l-ați creat (cu fila unu). Apoi actualizați indexul z după cum urmează:

Indicele Z: 10

Apoi utilizați multiselect pentru a selecta al doilea și al treilea rând. Apoi, deschideți setările modale ale elementului și adăugați următorul index z în cursă la ambele rânduri.

Index Z: 11 (plasați cursorul)

Asta e. Să verificăm rezultatul final.

Rezultat final

Motivul pentru care funcționează este că din punct de vedere tehnic fiecare filă (modul text) este o parte a fiecărui rând, chiar dacă sunt poziționate deasupra și în afara rândului. De aceea, plasând cursorul peste o filă se va afișa rândul în care este conținut.

Iată cum arată pe mobil.

Crearea filelor de deplasare verticală

Dacă doriți să adăugați file verticale la rânduri, tot ce trebuie să faceți este să repoziționați modulele de text utilizate pentru a crea fiecare filă. De asemenea, va trebui să modificăm dimensiunea rândurilor și spațiului dintre secțiuni pentru a face loc filelor.

Iată ce să faci.

Continuați și copiați secțiunea care conține filele de hover pe care tocmai le-am construit, 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:

Căptușeală: 10% la stânga, 10% la dreapta

Apoi utilizați multiselect pentru a selecta toate cele trei rânduri și actualizați setările elementului cu următoarele:

Lățime: 70% (desktop), 70% (tabletă), 80% (telefon)
Lățime maximă: 980 px

Apoi actualizați direcția de gradient la 90 de grade pentru toate cele trei blurbs, astfel încât atunci când poziționăm filele din stânga, culoarea de gradient din stânga să se amestece cu culoarea de fundal a filelor.

Direcția gradientului: 90 grade

Acum este timpul să poziționăm filele modulului nostru de text în stânga rândurilor noastre pentru a obține filele verticale pe care le dorim.

Deschideți setarea filei modulului text în primul rând și actualizați următoarele:

Marja (desktop): -50px sus, -150px stânga
Marja (telefon): -100px sus, -50px stânga

Setarea de marjă pentru telefon este să readucă fila înapoi deasupra rândului pentru afișarea unei file orizontale.

Apoi, deschideți setările pentru fila modulului text în rândul secțiunii și actualizați următoarele:

Marja (desktop): 0 px sus, -150 px stânga
Marja (telefon): -100px sus, 50px stânga

Și pentru fila finală din al treilea rând, actualizați următoarele:

Marja (desktop): 50 px în partea de sus, -150 px în stânga
Marja (telefon): -100px sus, 150px stânga

Rezultat final

Acum, să verificăm rezultatul final.

Și aici este o tabletă și un telefon.

Gânduri finale

Cu un pic de gândire creativă și puterea lui Divi, puteți crea câteva file personalizate destul de cool folosind rândurile Divi. Există câteva limitări la ceea ce puteți afișa. De exemplu, cu această configurare, toate rândurile trebuie să aibă aceeași înălțime ca secțiunea. Dar, pentru că nu este nevoie să folosiți un plugin, cred că aceasta este o soluție excelentă. Și nu uitați, deoarece puteți utiliza rândurile Divi pentru conținutul dvs., există o mulțime de moduri în care puteți utiliza aceste file de trecere în cursul următorului dvs. proiect.

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

Noroc!