Nu este un secret pentru nimeni că paginile „Despre noi” sunt foarte bune în a genera clicuri către dvs site-ul web. De asemenea, acest tip de pagină se va concentra pe partea umană a companiei din spatele site-ul web. Știind acest lucru, ne dăm seama că este important să acordăm atenție modului în care structurem paginile, tipului de informații pe care le împărtășim și modului în care creăm interacțiuni.

Un lucru pe care îl puteți face pentru a îmbunătăți experiența paginii este să oferiți o secțiune pentru membrii echipei care să vă evidențieze angajații. În plus, puteți adăuga un efect de hover organic la fotografiile membrilor echipei folosind doar opțiunile încorporate ale Divi.

Acest lucru va economisi spațiu pe pagina la care lucrați și va crea interacțiune cu hover între dvs. și dvs vizitatori.

În acest tutorial, vă vom arăta, pas cu pas, cum să ajungeți acolo. Odată ce înțelegi, vei putea personaliza stilul de design pentru a se potrivi nevoilor tale.

Să mergem!

studiu

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

Birou

Mobil

Să începem să recreăm

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 de umplere personalizate:

• Cea mai bună umplutură: 100px
• Garnitura de jos: 100px

Adăugați rândul 1

Structura coloanei

După ce ați terminat de adăugat umplutura personalizată la secțiunea dvs., puteți închide setările secțiunii și puteți adăuga un nou rând folosind o singură coloană.

Adăugați un modul de text

Adăugați conținut H2

Adăugați un titlu de modul text la coloana cu dimensiunea H2 la alegere.

Setări text H2

Apoi accesați setările de text H2 și faceți câteva modificări la aspectul copiei.

• Secțiunea 2 Font: Cinzel
• Titlul 2 Stilul fontului: majuscule mici
• Titlul 2 Alinierea textului: centru
• Titlu 2 Dimensiune text: 70px

Adăugați un modul de divizare

vizibilitate

Continuați prin adăugarea unui nou modul de separare chiar sub titlul Modulului de text.

• Afișează separatorul: Da

Culoarea separatorului

Accesați fila Design, deschideți setările de culoare și schimbați culoarea separatorului în consecință:

• Culoare separator: #333333

dimensionarea

Apoi vom reduce dimensiunea divizorului și o vom centra.

• Lățime: 26%
• Alinierea modulului: 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 mai multe module, deschideți parametrii liniei și efectuați unele modificări la parametrii de dimensionare.

• Utilizați lățime personalizată: Da
• Unitate: PX
• Lățime personalizată: 2000px
• Utilizați o lățime personalizată de jgheab: Da
• Lățimea jgheabului: 1
• Egalizați înălțimile coloanei: Da

spaţierea

Apoi accesați setările de spațiere și adăugați valori de marjă și umplere personalizate.

• Marja superioară: 50px
• Marja de jos: 50px
• Top placă: 10px
• Garnitura de jos: 10px
• Căptușeală din stânga: 5px
• Tapiterie dreapta: 5px
• Coloana 1, 2 și 3 Umplutură stânga: 5px
• Coloana 1, 2 și 3 Umplutură 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:

• Box Shadow Blur Force: 80px
• Forța de propagare a umbrei cutiei: -14px
• Culoare umbră: rgba (0,0,0,0,3)

Adăugați un modul de imagine în coloana 1

Încărcați o imagine într-un modul de imagine

Este timpul să începeți să adăugați module! Pentru a obține efectul de hover biologic, vom avea nevoie de două module în total. un modul imagine și un modul blurb. Modulul Imagine va conține imaginea membrului echipei pe care doriți să îl prezentați.

Modulul Blurb, 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 de imagine la prima coloană folosind o imagine de dimensiune pătrată.

filtre

Designul pe care îl creăm este în întregime î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 Blurb la coloana 1

Adăugați conținut

Continuați prin adăugarea unui nou modul Blurb chiar sub modulul de imagine din coloana 1. Adăugați numele membrului echipei în câmpul de titlu și introduceți informații suplimentare despre membrul echipei în casetă. cuprins.

Alege o 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 fotografie.

Culoare de fundal implicită

În continuare, vom alege o culoare de fundal complet transparentă.

• Culoare fundal: rgba (255,255,255,0)

Culoarea de fundal la trecerea cursorului

Și vom schimba această culoare să hover.

• Culoare 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 astfel de pictogramă.

• Culoare pictogramă: #ffffff
• Pictograma cerc: da
• Culoarea cercului: # 000000
• Locația pictogramei: stânga
• Utilizați dimensiunea fontului pictogramei: Da
• Pictogramă Dimensiune font: 50 px

Setarea pictogramei treceți cu mouse-ul

Cu toate acestea, nu dorim ca pictograma să apară la trecerea cursorului. Acesta este motivul pentru care folosim în schimb o culoare complet transparentă.

• Culoare pictogramă: rgba (255,255,255,0)
• Culoare cerc: rgba (255,255,255,0)

Setări implicite ale titlului

Apoi, accesați setările textului titlului și faceți câteva modificări.

• Font titlu: Cinzel
• Poliția Titlu: Bold
• Stilul fontului titlului: majuscule mici
• Denumirea textului color: # 000000
• Dimensiune text text: 0px

Treceți cursorul peste setările textului din titlu

Schimbați mărimea textului cu ajutorul mouse-ului.

• Dimensiune text text: 30px

Setări implicite pentru textul corpului

Modificați de asemenea setările textului corpului.

• Corpul de poliție: Open Sans
• Culoarea caroseriei textului: # 000000
• Dimensiunea textului corpului: 0px
• Înălțimea corpului: 1.8em

Parametrul corpului la hover

Și, din nou, modificați dimensiunea textului corpului pentru a trece cu mouse-ul.

• Dimensiunea textului corpului: 14px

Spațiu implicit

Nu în ultimul rând, va trebui să creăm o suprapunere între modulul Blurb și modulul de imagine folosind o margine superioară negativă.

• Marja superioară: -3.7 vw (desktop), -9 vw (tabletă și telefon)
• Marja inferioară: 1.5 vw (tabletă), 2 vw (telefon)

Distanțe staționare

Modificați marja personalizată și valorile de umplutură la trecerea cursorului.

• Marja superioară: -11,38vw
• Top placă: 20px
• Garnitura de jos: 20px
• Tapiterie dreapta: 50px

Clonează ambele module de două ori și plasează duplicatele în coloanele rămase.

Am terminat de creat primul nostru efect organic de hover. Pentru a economisi timp, putem pur și simplu să clonăm cele două module din coloana 1 de două ori și să plasăm duplicatele în celelalte două coloane.

Schimbați imaginea și conținutul modulului Blurb

Nu uitați să schimbați imaginea în modulul Imagine și să o copiați în modulul Blurb pentru a completa secțiunea de membri ai echipei!

studiu

Acum că am parcurs toți pașii, haideți să aruncăm o privire finală asupra modului în care arată pe diferite dimensiuni de ecran.

Birou

Mobil

Ultimele gânduri

În acest articol, v-am arătat cum să creați un efect organic de hover pentru fotografiile membrilor echipei folosind numai opțiunile încorporate ale Divi. Am subliniat cât de important este să creați pagini bune, deoarece acestea sunt unul dintre cele mai vizitate site-uri web.

Folosirea efectelor biohover pentru fotografiile membrilor echipei nu numai că va îmbunătăți calitatea paginii dvs., dar va crea și interacțiunea cu vizitatorii dvs. Dacă aveți întrebări sau sugestii, asigurați-vă că lăsați un comentariu în secțiunea de comentarii de mai jos!