Doriți să creați o biografie cu DIVI a membrilor echipei dvs. cu efect de hover?
Nu este un secret că paginile despre sunt ideale pentru a crea interacțiuni pe dvs site-ul web. De asemenea, acest tip de pagină va sublinia partea umană a companiei din spatele site-ul web.
Unul dintre lucrurile pe care le poți face pentru a te îmbunătăți experienţă a paginii À propos este de a oferi o secțiune pentru membrii echipei care să-ți pună angajații în centrul atenției.
Citiți și: Divi: Cum să creați un antet global transparent și lipicios
În acest tutorial, vă vom arăta pas cu pas cum să o faceți. Odată ce înțelegeți abordarea, o puteți personaliza pentru a se potrivi nevoilor dvs.
Să mergem!
studiu
Înainte de a ne arunca cu capul în tutorial, să aruncăm o privire asupra rezultatului pe diferite dimensiuni de ecran.
Calculator desktop
Mobil
Adăugați o secțiune nouă
spaţierea
Creați o pagină nouă sau deschideți una existentă și adăugați o nouă secțiune folosind următoarele valori personalizate de completare:
- Marja internă (sus și jos): 100px
Adăugați linia #1
Structura coloanei
Odată ce ați terminat de adăugat umpluturile personalizate la secțiunea dvs., puteți închide setările secțiunii și puteți adăuga o nouă linie folosind o singură coloană.
Adăugați un modul Text
Adăugați un modul Text la coloana cu un titlu de dimensiune H2 la alegere.
Setări text H2
Apoi, accesați setările de text H2 și faceți câteva modificări.
- Font antet: Cinzel
- Stil de copiere antet: Tt (vezi Captură)
- Alinierea textului: centrat
- Dimensiunea textului antetului: 70 px
Adăugați un modul Separator
vizibilitate
Continuați prin adăugarea unui nou modul Separator chiar sub Modulul Text.
- Show Divider: Da
Culoarea separatorului
Accesați fila Stil, deschideți setările de culoare și schimbați culoarea separatorului în consecință:
- Culoare etichetă: #333333
dimensionarea
Apoi vom reduce dimensiunea divizorului și o vom centra.
- Lățime maximă: 26%
- Alinierea textului: Centru
Adăugați linia 2
Structura coloanei
Chiar sub linia anterioară adăugată, continuați și adăugați un nou rând folosind trei coloane de dimensiuni egale.
dimensionarea
Fără a adăuga module, deschideți setările liniei și faceți câteva modificări la setările de dimensionare.
- Utilizați lățimea jgheab personalizată: da
- Distanța între coloane: 1
- Lățimea maximă: 2 pixeli
- armonizați înălțimile coloanei: Da
spaţierea
Apoi, accesați setările de spațiere și adăugați valori personalizate ale marjelor.
- Marja (sus și jos): 50 px
- Marja internă: (sus și jos: 10 px), (stânga și dreapta: 5 px)
Introduceți parametrii fiecărei coloane și modificați, de asemenea, valorile marginilor interne după cum urmează:
- Marja internă (stânga și dreapta): 5px
Cutie de umbră
De asemenea, dăm liniei noastre o oarecare profunzime adăugând o umbră de casetă cu următoarele setări:
- Intensitatea estomparii umbrei casetei: 80px
- Intensitatea răspândirii umbrei casetei: -14px
- Culoare font subtitrare: rgba(0,0,0,0.3)
Adăugați un modul Imagine la coloana 1
Încărcați o imagine în modulul Imagine
Este timpul să începeți să adăugați module!
Pentru a obține efectul bio hover, vom avea nevoie de două module în total; un modul Imagine și un modul Rezumat.
Vezi și: Divi: Cum să creați o grilă de imagine receptivă cu link-uri și efecte de trecere
Modulul Imagine va conține imaginea membrului echipei pe care doriți să îl prezentați. Modulul Rezumat, pe de altă parte, va fi folosit pentru a adăuga pictograma din colțul din stânga jos și biografia la hover.
Adăugați un modul Imagine la prima coloană folosind o imagine de dimensiune pătrată.
Filtre
Designul pe care îl creăm este complet în tonuri de gri. Pentru a adăuga această nuanță de gri imaginii noastre, accesați setările filtrelor și eliminați toată saturația.
- Saturație: 0%
Adăugați modulul Rezumat la coloana 1
Continuați prin adăugarea unui nou modul Rezumat chiar sub modulul Imagine din coloana 1. Adăugați numele membrului echipei în câmpul de titlu și introduceți câteva informații suplimentare despre membrul echipei în casetă. cuprins.
Alege pictograma
Următorul lucru pe care îl vom face este să alegem o pictogramă de alegere care se va afișa vizitatori că există mai mult decât o imagine.
Culoarea de fundal implicită
În continuare, vom alege o culoare de fundal complet transparentă.
- Fundal: rgba (255,255,255,0)
Culoarea de fundal la trecerea cursorului
Și o să schimbăm culoarea la hover.
- Culoare de fundal: rgba (255,255,255,0.88)
Setări implicite ale pictogramei
Vrem o pictogramă vizibilă care ne va ajuta vizitatori să înțeleagă că pot zbura peste el. Schimbați setările pictogramei pentru a obține o pictogramă ca aceasta.
- Culoarea pictogramei: #ffffff
- Culoare de fundal imagine/pictogramă: #000000
- Plasarea imaginii/pictogramei: stânga
- Lățimea imaginii/pictogramei: 50px
- Imagine/pictogramă dreptunghi rotunjit: 100 px
Setările pictogramei treceți cu mouse-ul
Cu toate acestea, nu dorim ca pictograma să apară la trecerea cursorului. De aceea, vom folosi în schimb o culoare complet transparentă.
- Culoare pictogramă: rgba (255,255,255,0)
- Culoare de fundal imagine/pictogramă: rgba(255,255,255,0)
Setări implicite pentru textul titlului
Apoi, accesați setările textului titlului și faceți câteva modificări.
- Titlul fontului: Cinzel
- Text ușor ușor: text aldine
- Titlu Stil de copiere: Tt
- Culoarea textului titlului: #000000
- Dimensiunea textului titlului: 0px
Treceți cursorul pe setările titlului
Schimbați dimensiunea textului la trecerea cursorului.
- Dimensiunea textului titlului: 30px
Valori implicite ale textului de prezentare
Schimbați și setările pentru blurb.
- Corpul fontului: Open Sans
- Culoarea textului corpului: #000000
- Dimensiunea textului corpului: 0px
Setări pentru trecerea cu mouse-ul pentru textul corpului
Și, din nou, modificați dimensiunea textului corpului la trecerea cursorului.
- Dimensiunea textului corpului: 14 px
Spațiu implicit
În cele din urmă, va trebui să creăm o suprapunere între modulul Rezumat și modulul Imagine folosind o marjă superioară negativă.
- Marja superioară: -3,7 vw (desktop), -9 vw (tabletă și telefon)
- Marja inferioară: 1,5 vw (tabletă), 2 vw (telefon)
Spațiere atunci când plutiți
Modificați valorile marjelor la trecerea cu mouse-ul.
- Marja (sus): -11,38 vw
- Marja internă: (sus și jos: 20 px), (dreapta: 50 px)
Clonează coloana 1 de două ori
Am terminat de creat primul nostru efect bio hover. Pentru a economisi timp, putem doar clona coloana 1 de două ori din parametrii rândului. Ștergeți mai întâi celelalte două coloane, apoi faceți dublu clic pentru a clona coloana 1
Schimbați imaginea și conținutul modulului Rezumat în coloanele clonate
Nu uitați să schimbați imaginea din modulul Imagine și descrierea din modulul Rezumat pentru a termina!
studiu
Acum, că am parcurs toți pașii, să aruncăm o privire finală asupra modului în care arată pe diferite dimensiuni de ecran.
Calculator desktop
Mobil
Descărcați DIVI acum!!!
Concluzie
În acest articol, v-am arătat cum să creați un efect de hover pe fotografiile membrilor echipei folosind doar opțiunile încorporate ale Divi. Am menționat cât de important este să creezi pagini bune „Despre”, deoarece este una dintre cele mai vizitate pagini web.
Folosirea efectelor de trecere cu mouse-ul pentru fotografiile membrilor echipei nu numai că va duce pagina dvs. despre la următorul nivel, ci va crea și interacțiune cu dvs. vizitatori. Dacă aveți nelămuriri sau sugestii, să ne găsim în secțiunea de comentarii pentru a discuta despre asta.
Cu toate acestea, puteți consulta și 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.
...
