Cum să adăugați un efect Hover la membrii echipei Bios din Divi

Nu este un secret că despre pagini sunt minunate pentru a crea clicuri pe site-ul dvs. web. Este, de asemenea, acel tip de pagină care va sublinia partea umană a companiei din spatele site-ului web. Știind acest lucru ne face să fim conștienți de faptul că este important să fim atenți la modul în care structurăm paginile, ce fel de informații împărtășim și cum creăm interacțiuni. Unul dintre lucrurile pe care le puteți face pentru a îmbunătăți experiența despre pagină este furnizarea unei secțiuni a membrilor echipei care vă pune angajații în centrul atenției. Mai mult decât atât, puteți adăuga un efect de hover bio la fotografiile membrilor echipei folosind doar opțiunile încorporate ale Divi. Acest lucru vă va permite să economisiți spațiu pe pagina la care lucrați și să creați o interacțiune între dvs. și vizitatorii dvs.

În acest tutorial, vă vom arăta pas cu pas cum să ajungeți acolo. Odată ce veți obține abordarea, veți putea personaliza stilul de design în funcție de nevoile dvs.

Să ajungem la asta!

previzualizare

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

Desktop

Mobil

Să începem să recreăm

Abonați-vă la canalul nostru Youtube

Adăugați o secțiune nouă

Spațiere

Creați o pagină nouă sau deschideți una existentă și adăugați o nouă secțiune utilizând următoarele valori de umplere personalizate:

• Căptușeală superioară: 100 px
• Căptușeală inferioară: 100 px

Adăugați rândul # 1

Structura coloanei

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

Adăugați un modul de text

Adăugați conținut H2

Adăugați un titlu Modul text în coloană cu o copie H2 la alegere.

Setări text H2

Apoi, accesați setările de text H2 și efectuați câteva modificări ale aspectului copiei.

• Rubrica 2 Font: Cinzel
• Titlul 2 Stil font: majuscule mici
• Titlul 2 Aliniere text: centru
• Rubrica 2 Dimensiune text: 70 px

Adăugați un modul divizor

Vizibilitate

Continuați adăugând un nou modul divizor chiar sub titlul Modul text.

• Show Divider: Da

Culoare divizor

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

• Culoare divizor: # 333333

Dimensionare

Apoi, vom reduce dimensiunea divizorului și îl vom centra.

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

Adăugați rândul # 2

Structura coloanei

Chiar sub rândul anterior pe care l-ați adăugat, continuați și adăugați un rând nou folosind trei coloane de dimensiuni egale.

Dimensionare

Fără a adăuga încă module, deschideți setările rândurilor și efectuați unele ajustări la setările de dimensionare.

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

Spațiere

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

• Marja superioară: 50 px
• Marja inferioară: 50 px
• Căptușeală superioară: 10 px
• Căptușeală inferioară: 10 px
• Căptușeală stângă: 5 px
• Căptușeală dreaptă: 5 px
• Coloana 1, 2 și 3 Căptușeala stângă: 5 px
• Coloana 1, 2 și 3 Căptușeala dreaptă: 5 px

Box Shadow

De asemenea, oferim rândului nostru un pic de adâncime adăugând o umbră de casetă la acesta cu următoarele setări:

• Puterea neclarității umbrei cutiei: 80 px
• Puterea răspândirii umbrei cutiei: -14px
• Culoare umbră: rgba (0,0,0,0,3)

Adăugați modulul de imagine în coloana 1

Încărcați imaginea în modulul de imagine

E 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 de imagine și un modul Blurb. Modulul imagine va conține imaginea membruului echipei pe care doriți să îl prezentați. Modulul Blurb, pe de altă parte, va fi folosit pentru a adăuga pictograma în colțul din stânga jos și pentru a vizualiza biografia. Adăugați un modul de imagine la prima coloană folosind o imagine de dimensiuni pătrate.

Filtre

Designul pe care îl creăm este în întregime în tonuri de gri. Pentru a adăuga această scală de gri la imaginea noastră, accesați setările filtrelor și eliminați toată saturația.

• Saturație: 0%

Adăugați Blurb Module la coloana 1

Adauga continut

Continuați adăugând un nou modul Blurb chiar sub modulul de imagine din coloana 1. Adăugați numele membruului echipei în câmpul de titlu și introduceți mai multe informații despre membrul echipei în caseta de conținut.

Alege pictograma

Următorul lucru pe care îl vom face este să alegem o pictogramă la alegere care să le arate vizitatorilor că există mai mult decât o imagine.

Culoare de fundal implicită

Apoi, vom alege o întreagă culoare de fundal transparentă.

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

Plasați cursorul pe culoarea de fundal

Și vom schimba acea culoare pe hover.

• Culoare fundal: rgba (255.255.255,0.88)

Setări implicite pentru pictograme

Vrem o pictogramă vizibilă care să ajute vizitatorii să înțeleagă că o pot deplasa. Schimbați setările pictogramei pentru a obține o pictogramă de genul acesta.

• Culoare pictogramă: #ffffff
• Pictogramă cerc: Da
• Culoare cerc: # 000000
• Plasarea pictogramelor: stânga
• Utilizați pictograma Dimensiune font: Da
• Pictogramă Dimensiune font: 50 px

Plasați cursorul pe setările pictogramei

Cu toate acestea, nu vrem ca pictograma să apară pe hover. De aceea vom folosi în schimb o culoare complet transparentă.

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

Setări implicite pentru textul titlului

Apoi, accesați setările pentru textul titlului și efectuați câteva modificări.

• Titlu Font: Cinzel
• Greutatea fontului titlului: Bold
• Stilul fontului titlului: majuscule mici
• Culoare text titlu: # 000000
• Dimensiune text titlu: 0 px

Plasați cursorul pe setările pentru textul titlului

Modificați dimensiunea textului la cursor.

• Dimensiune text titlu: 30 px

Setări implicite pentru textul corpului

Modificați și setările pentru textul corpului.

• Font corp: Open Sans
• Culoarea textului corpului: # 000000
• Dimensiunea textului corpului: 0 px
• Înălțimea liniei corpului: 1,8em

Plasați cursorul pe Setările textului corpului

Și, din nou, schimbați dimensiunea textului corpului la cursor.

• Dimensiunea textului corpului: 14 px

Spațiere implicită

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

• Marja superioară: -3,7vw (desktop), -9vw (tabletă și telefon)
• Marja inferioară: 1,5vw (tabletă), 2vw (telefon)

Distanța cu mouse-ul

Schimbați marja personalizată și valorile de umplere la cursor.

• Marja superioară: -11,38vw
• Căptușeală superioară: 20 px
• Căptușeală inferioară: 20 px
• Căptușeală dreaptă: 50 px

Clonați ambele module de două ori și plasați duplicatele în coloanele rămase

Am terminat de creat primul nostru efect de hover bio. Pentru a economisi timp, putem pur și simplu clona ambele module în coloana 1 de două ori și plasa duplicatele în cele două coloane rămase.

Schimbați imaginea și conținutul modulului Blurb

Nu uitați să schimbați imaginea din modulul de imagine și copia în modulul Blurb pentru a finaliza secțiunea pentru membrii echipei!

previzualizare

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

Desktop

Mobil

Gânduri finale

În această postare, v-am arătat cum să creați un efect de hover bio pe hover pentru fotografiile membrilor echipei folosind doar opțiunile încorporate ale Divi. Am menționat cât de important este să creezi bine despre pagini, deoarece acestea sunt unul dintre cele mai vizitate site-uri de pagini. Utilizarea efectelor de hover bio pentru fotografiile membrilor echipei nu numai că vă va permite să vă duceți pagina despre la nivelul următor, ci și să creați o interacțiune 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!