Doriți să vă prezentați funcționalitățile sau produsele sub forma unei file Divi cu efect de hover?
Căutați noi modalități creative de a prezenta caracteristici și/sau produse pe paginile dvs. web?
Dacă da, continuați să citiți, deoarece în acest articol, vă vom arăta cum să afișați funcțiile în file pe hover folosind doar opțiunile încorporate ale Divi. Posibilitățile pe care le ai cu această abordare sunt nesfârșite și cu siguranță îți vor permite să înțelegi Divi la un nivel mai profund.
Efectul de trecere a filei va apărea numai pe desktop. Pe ecrane de dimensiuni mai mici, acestea vor apărea pe formele lor normale.
Să mergem!
studiu
Înainte de a ne scufunda în acest tutorial, să aruncăm o privire asupra rezultatului pe care vrem să-l obținem.
Să începem procesul de creație cu Divi
Adăugați o secțiune nouă
Fundal gradient
Adăugați o pagină nouă sau deschideți o pagină existentă și adăugați o nouă secțiune. Deschideți setările secțiunii și adăugați un fundal gradient la secțiune.
- Culoare stânga: #f2f2f2
- Culoare dreapta: #ffffff
- Direcție gradient: 87 de grade
- Poziția din stânga: 20%
- Poziția corectă: 80%
spaţierea
Apoi, modificați următoarele setări de spațiere:
- Umplutură (sus și jos): 0px
Adăugați o linie nouă
Structura coloanei
Continuați adăugând un nou rând la secțiune folosind următoarea structură de coloane:
Culoare de fundal
Fără a adăuga încă module, deschideți setările rândului și schimbați culoarea de fundal.
- Culoare de fundal: #ffffff
Dimensiunea și alinierea
În filă Amenajări, trageți în jos opțiunea dimensionarea și modificați următoarele setări:
- Utilizați lățimea jgheab personalizată: DA
- Lățimea jgheabului: 1
- Latime: 400px
- Alinierea rândurilor: stânga
Hover Dimensiune
Schimbați opțiunea Lăţime în setările de dimensionare hover. Acest lucru va permite liniei să se extindă atunci când plutește.
- Lățime (Hover): 2 pixeli
spaţierea
Apoi accesați setările de spațiere din opțiune spațiere
- Umplutură (sus și jos): 0px
Chenar (desktop)
Adăugați „20px” în colțul din dreapta sus al liniei și adăugați, de asemenea, un chenar din stânga liniei.
- Colțuri rotunjite (desktop): 20px (colțul din dreapta sus)
- Lățimea chenarului din stânga: 20px
- Culoarea marginii din stânga: #6d44ff
Graniță la hover
Eliminați colțul rotunjit din dreapta sus al lui „20px” la trecerea cursorului, adăugând în schimb „0px”.
Box Shadow (Desktop)
În cele din urmă, adăugați o umbră subtilă.
- Intensitatea estomparii umbrei casetei: 80px
- Intensitatea răspândirii umbrei casetei: -10px
- Culoare umbră: rgba(0,0,0,0.11)
Hover Shadow
Și schimbați culoarea umbrei într-o culoare complet transparentă la hover.
- Box Shadow: rgba(255,255,255,0)
Adăugați modul Blurb la rând
Adăugați conținut
Acum că am terminat de schimbat toate setările rândurilor, putem continua și adăuga un modul Blurb la coloană. Simțiți-vă liber să utilizați orice alt modul la alegere.
După ce ați adăugat modulul, adăugați câteva cuprins de votre choix.
Selectați pictograma
Apoi selectați o pictogramă la alegere.
Setări pictograme
Și schimbați aspectul pictogramei în setările pictogramei. Accesați fila Amenajări
- Culoare pictogramă: #5323ff
- Plasarea imaginii/pictogramei: Sus
- Lățimea imaginii/pictogramei: 50px
Setări pentru titlul textului (desktop)
Apoi modificați setările titlului.
- Font de titlu: Poppins
- Alinierea textului: centrat
- Culoare text titlu: #5323ff
- Dimensiunea textului titlului: 25px
- Spațiere între litere: -1px
- Înălțimea liniei: 1 em
Setări pentru titlul textului
Și modificați înălțimea rândului de titlu la trecerea cursorului.
- Înălțimea liniei de titlu: 1,5 em
Setări pentru textul corpului (desktop)
Apoi, accesați setările pentru textul corpului și faceți câteva modificări. Aceasta include schimbarea dimensiunii textului la „0px”. Acest lucru ne va ajuta să facem ca textul să apară numai la trecerea cursorului.
- Font pentru corp: Poppins
- Greutatea fontului corpului: ușoară
- Alinierea textului: centrat
- Culoarea textului corpului: #000000
- Dimensiunea textului corpului: 0px (desktop), 15px (tabletă și telefon)
- Înălțimea liniei: 2,2 em
Setări pentru textul corpului la trecerea cursorului
Pentru a vă asigura că textul corpului apare la trecerea cu mouse-ul, modificați dimensiunea textului.
- Dimensiunea textului corpului: 15 px
Spațiere (desktop)
Pentru a oferi modulului puțin spațiu, modificăm următorii parametri de spațiere:
- Umplutură (sus și jos): 80px
Spațierea cursorului
Vom schimba setările de spațiere între hover.
- Umplutură (sus și jos): 80px
- Captuseala (stânga și dreapta): 20vw
Clonează rândul de 3 ori
După ce ați terminat de editat primul rând și modulul Blurb, puteți continua și clona rândul de câte ori doriți.
Editați linia și modulul Blurb #2
Schimbați culoarea marginii liniei
Să începem prin a schimba culoarea marginii din stânga a liniei.
- Culoarea marginii din stânga: #00ffcc
Editați conținutul și pictograma Blurb
Apoi, deschideți setările modulului Blurb și schimbați pictograma.
Schimbați culoarea pictogramei modulului Blurb
Cu culoarea pictogramei.
- Culoare pictogramă: #00eda6
Schimbați culoarea titlului
Și culoarea textului titlului.
- Culoare text titlu: #00eda6
Editați linia și modulul Burb #3
Culoarea marginii liniei
Să schimbăm culoarea marginii liniei din stânga.
- Culoarea marginii din stânga: #afebff
Editați conținutul și pictograma Blurb
Să schimbăm și pictograma și cuprins a textului de prezentare.
Schimbați culoarea pictogramei modulului Blurb
Schimbați și culoarea pictogramei.
- Culoare pictogramă: #68d9ff
Schimbați culoarea textului titlului
Și culoarea textului titlului.
- Culoare text titlu: #68d9ff
Editați linia și modulul Blurb #4
Schimbați culoarea marginii liniei
În următorul și ultimul modul, schimbați și culoarea marginii din stânga a liniei.
- Culoarea marginii din stânga: #dd87cf
Editați conținutul și pictograma Blurb
Deschideți modulul Blurb din rând și schimbați pictograma și cuprins a modulului.
Schimbați culoarea pictogramei modulului Blurb
Cu culoarea pictogramei.
- Culoare pictogramă: #dd6aca
Schimbați culoarea textului titlului
Și culoarea textului titlului.
- Culoare text titlu: #dd6aca
studiu
Acum că am parcurs tutorialul, să aruncăm o ultimă privire asupra rezultatului.
Descărcați DIVI acum!!!
Concluzie
În acest articol, v-am arătat cum să utilizați opțiunile încorporate ale Divi numai pentru a crea file disponibile la trecerea cu mouse-ul.
Această abordare vă va ajuta să împărtășiți conținut despre funcții sau produse în mod interactiv.
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.
...
