Cum să creați o pagină de echipă cu hover vibrant pentru următorul dvs. proiect Divi

Paginile echipei sunt adesea subestimate. Înainte de a achiziționa un produs sau de a angaja un serviciu, mulți utilizatori navighează către echipă sau despre pagini pentru a-și face o idee mai bună despre companie și despre oamenii din spatele acesteia. Dacă pagina echipei dvs. lasă o primă impresie pozitivă, aceasta ar putea duce la rate mai mari de conversie. Acum, există multe modalități de a crea pagini de echipă frumoase cu Divi, dar dacă căutați o sursă de inspirație pentru următorul dvs. proiect, vă va plăcea această postare. Vom recrea o pagină vibrantă a echipei de hover care declanșează biosul membrilor la hover.

Să ajungem la asta!

previzualizare

Înainte de a ne arunca cu capul în tutorial, să aruncăm o privire rapidă asupra rezultatului pe diferite dimensiuni de ecran.

Desktop

Mobil

Abonați-vă la canalul nostru Youtube

1. Începeți cu o secțiune obișnuită + rândul cu o coloană pentru titlu

Deschideți o pagină nouă și setați atributele paginii la „pagină goală”. După ce ați făcut acest lucru, intrați în Divi Builder și adăugați o secțiune cu un rând cu o coloană.

Adăugați un modul de divizare și text.

2. Adăugați conținut la modulul de text și stilizați-l

Adăugați conținut H1 la modulul text.

Treceți la fila de proiectare și stilizați setările textului H1 în consecință:

• Font de titlu: Poppins
• Greutatea fontului de titlu: ușoară
• Alinierea textului de antet: centru
• Culoare text antet: Negru # 000000
• Dimensiune text antet:
  • Desktop = 6vw
  • Tabletă = 9vw
  • Telefon = 11vw
• Distanța între litere: -0,4vw

3. Stilează divizorul

Treceți la modulul următor, care este modulul divizor. Schimbați culoarea divizorului în negru și modificați setările de dimensionare.

• Culoare divizor: Negru #oooooo
• Greutatea divizorului: 12 px
• Lățime: 14%
• Alinierea modulului: centru

4. Creați biografii pentru echipă folosind o secțiune regulată + rândul din trei coloane

Acum, după ce am finalizat secțiunea de titlu, suntem gata să începem să construim biografiile echipei. Începeți prin adăugarea unei noi secțiuni obișnuite cu un rând cu trei coloane.

5. Reglați setările pentru dimensionarea rândurilor

Permiteți rândului să ocupe întreaga lățime a containerului secțiunii modificând setările de dimensionare.

• Utilizați lățimea personalizată a jgheabului: da
• Lățimea jgheabului: 1
• Lățime: 100%
• Lățime maximă: 100%

6. Reglați setările de spațiu rând

Adăugați și o umplutură personalizată, de sus și de jos.

• Căptușeală superioară: 2vw
• Căptușeală inferioară: 2vw

7. Adăugați un modul Image & Blurb în coloana One

Cele două module principale pe care le vom folosi pentru a crea efectul final sunt o imagine și un modul blurb. Mai întâi, adăugați modulul de imagine și apoi blurb-ul.

8. Încărcați o imagine și stilizați-o

Pagina echipei dvs. de hover se referă la prezentarea membrilor echipei. Deschideți modulul de imagine și adăugați o fotografie a unuia dintre ele. Vom folosi una dintre imaginile noastre Divi. Asigurați-vă că dimensiunile imaginii dvs. sunt de 612 px X 612 px.

Aliniere

Treceți la fila de proiectare și schimbați alinierea imaginii.

• Aliniere imagine: centru

Dimensionare

Modificați și setările de dimensionare.

• Lățime: 30%
• Alinierea modulului: centru

Spațiere

Și adăugați o marjă superioară negativă.

• Marja:
  • Desktop = -3vw
  • Tabletă și telefon = -13vw

Frontieră

Pentru a transforma imaginea într-un cerc, vom schimba setările de margine.

• Colțuri rotunjite: 20vw Toate cele patru colțuri
• Stiluri de frontieră: toate cele patru laturi
• Lățimea chenarului: 12 px
• Culoare margine: alb #ffffff
• Stilul chenarului: dublu

Box Shadow

De asemenea, adăugăm o anumită adâncime imaginii prin aplicarea unei umbre de casetă subtile.

• Box Shadow: Prima opțiune
• Puterea neclarității umbrei cutiei: 50 px

Indicele Z

Într-unul dintre pașii anteriori, am adăugat o marjă superioară negativă. Pentru a ne asigura că imaginea rămâne deasupra coloanei, chiar și atunci când o depășește, vom crește indexul z în setările de vizibilitate.

• Indicele Z: 3

9. Adăugați conținut la Blurb & Style It

Adăugați CSS personalizat la Setările paginii

Înainte de a face orice altceva, vom adăuga câteva CSS personalizate pentru a scăpa de marginea de jos implicită a pictogramei din interiorul blurbului. Adăugați următoarele linii de cod CSS la setările paginii:

.blurb-icon .et_pb_main_blurb_image
{
margin-bottom: 0px;
}

Acordați lui Blurb o clasă CSS

Deschideți modulul Blurb în continuare și adăugați clasa CSS potrivită.

• Clasa CSS: pictogramă blurb

Adauga continut

Vom folosi textul substituent, dar puteți insera numele și descrierea reală a unui membru al echipei.

Alege pictograma

Alegeți o pictogramă plus în continuare.

• Utilizați pictograma: Da
• Pictogramă: Semn Plus în interiorul unui cerc

Fundalul stilului

Treceți la setările de fundal, adăugați o culoare de fundal implicită albă și un fundal de gradient la cursor.

• Fundal: alb #ffffff
• Plasați cursorul pe fundal: gradient
• Gradient Color One: # 00ffa1
• Gradient Color Two: # 29c4a9
• Tipul gradientului: liniar
• Direcția gradientului: 154 grade
• Poziția inițială: 0
• Poziție finală: 46%

Pictogramă stil

Aplicați următoarele setări de pictograme în continuare:

• Culoare pictogramă:
  • Implicit: # 29c4a9
  • Plasați cursorul: Rgba transparent (255,255,255,0)
• Utilizați pictograma Dimensiune font: Da
• Pictogramă Dimensiune font:
  • Desktop = 2vw
  • Tabletă = 4vw
  • Telefon = 6vw

Aliniere

Treceți la setările de text și modificați alinierea textului.

• Aliniere text: centru

Textul antetului stilului

Apoi, deschideți setările pentru textul antetului și efectuați câteva modificări în diferite dimensiuni ale ecranului.

• Antetitlu: H4
• Titlu Font: Poppins
• Font de titlu: Bold
• Culoare text titlu: alb #ffffff
• Dimensiune text titlu:
  • Desktop: 1,5vw
  • Tabletă: 2,5vw
  • Telefon: 3.5vw

Textul corpului stilului

Faceți același lucru pentru setările pentru textul corpului.

• Culoarea textului corpului: alb #ffffff
• Dimensiunea textului corpului:
  • Desktop = 0,8vw
  • Tabletă = 1,9vw
  • Telefon = 2.6vw
• Înălțimea liniei corpului:
  • Desktop = 2vw
  • Tabletă + Telefon = 3vw

Dimensionare

În continuare, vom schimba setările de dimensionare ale modulului nostru de blurb.

• Lățimea conținutului: 100%
• Lățime: 81%
• Alinierea modulului: centru

Spațiere

Vom aplica niște valori de marjă și umplere personalizate și pe diferite dimensiuni ale ecranului.

• Marja superioară:
  • Desktop = -4vw
  • Tabletă + Telefon = -9vw
• Marja inferioară:
  • Desktop = 3,5vw
  • Tabletă + Telefon = 10vw
• Căptușeala superioară și inferioară:
  • Desktop = 7.1vw
  • Tabletă = 30vw
  • Telefon = 28vw
• Căptușeala stângă și dreapta
  • Desktop = 2vw
  • Tabletă + Telefon = 8vw

Frontieră

Transformați modulul blurb într-un cerc adăugând o rază de margine.

• Colțuri rotunjite: 50vw Toate cele patru colțuri

Box Shadow

Și finalizați designul modulului blurb adăugând o umbră de casetă care apare pe hover.

• Box Shadow: Fifth Style
• Poziție orizontală a umbrei cutiei: 0vw
• Poziție verticală a umbrelor cutiei:
  • Desktop + Hover = -14vw
  • Tabletă = -44vw
  • Telefon = -46vw
• Puterea răspândirii umbrei cutiei:
  • Desktop + Hover = -6vw
  • Tabletă + Telefon = -19vw
• Culoare umbră cutie:
  • Hover = rgba (0,0,0,0,05)

10. Stil Coloana Unu

Acum, după ce am adăugat toate modulele, trebuie să coloanăm unul, este timpul să stilăm coloana.

fundal

Deschideți setările de fundal pentru coloana 1 și aplicați următorul fundal de gradient:

• Stil de fundal: Gradient
• Gradient Color One: # 00ffa1
• Gradient Color Two: # 29c4a9
• Tip de gradient: Căptușeală
• Direcția gradientului: 282 grade

Frontieră

Treceți la fila de proiectare și transformați coloana într-un cerc adăugând o rază de margine.

• Colțuri rotunjite: 50vw

Revărsare

Pentru a ne asigura că imaginea apare deasupra coloanei, vom schimba deversările orizontale și verticale din setările de vizibilitate.

• Depășire orizontală și verticală: vizibilă

11. Ștergeți coloanele goale și copiați prima coloană de două ori

Am completat prima coloană și toate modulele din ea. Pentru a ne economisi ceva timp, vom elimina coloanele goale și vom clona prima coloană de două ori.

Ștergeți coloanele Doi și Trei

Reveniți la setările rândului principal și faceți clic pe pictograma coș de gunoi pentru coloanele două și trei.

Duplicați coloana de două ori

După ce ați șters coloanele două și trei, coloana una va părea ciudată pentru o secundă, dar toate acestea se modifică imediat ce clonați coloana de două ori.

12. Schimbați conținutul și culorile coloanei doi

Acum este timpul să creați stilul noilor coloane pentru ceilalți doi membri ai echipei.

Coloana Doi

Deschideți setările celei de-a doua coloane și modificați fundalul de gradient

• Culoarea de gradient de fundal una: # 00eeff
• Gradientul de fundal Color Two: # 309ce5

Încărcați și o altă imagine.

Continuați deschizând modulul blurb și schimbând fundalul de gradient.

• Plasați cursorul pe culoarea de fundal One: # 00eeff
• Plasați cursorul pe culoarea de fundal doi: # 309ce5

Schimbați și culoarea pictogramei.

• Culoare implicită a pictogramei: # 309ce5

Coloana a treia

Deschideți setările celei de-a treia coloane și modificați fundalul de gradient.

• Culoarea de gradient de fundal una: # ff91ec
• Gradientul de fundal Culoare două: # a500ff

Schimbați apoi fundalul gradientului de blurb.

• Plasați cursorul pe fundalul One Color: # ff91ec
• Plasați cursorul pe culoarea de fundal doi: # a500ff

Împreună cu culoarea pictogramei.

• Culoare implicită a pictogramei: # a500ff

previzualizare

Acum, că am parcurs diferiții pași, să aruncăm o privire finală asupra rezultatului pe diferite dimensiuni de ecran.

Desktop

Mobil

Este o folie!

În această postare, v-am arătat cum să creați o pagină vibrantă a echipei de hover cu opțiuni de hover colorate. Simțiți-vă liber să utilizați acest design în următorul dvs. proiect Divi. Încercați pentru o pagină a echipei sau un director de colaboratori. Spuneți-ne dacă aveți gânduri în comentarii.