Cum să adăugați pictograme sociale la imaginile membrilor echipei cu Divi

Când vă construiți pagina despre informații, ați putea lua în considerare adăugarea diferiților membri ai echipei companiei dvs. într-o vitrină. Când începeți acest proces de proiectare, veți observa că nu pot lipsi trei lucruri de pe bat: o imagine, un nume și o poziție. Dar dacă doriți să evidențiați și mai mult membrii echipei, puteți lua în considerare adăugarea linkurilor lor de rețea socială la design. Desigur, ați putea face acest lucru la modul vechi și puteți adăuga un modul de urmărire pe rețelele sociale sub numele și funcția persoanei. Cu toate acestea, puteți alege, de asemenea, să adăugați un pic de interacțiune declanșând pictogramele sociale de îndată ce cineva trece pe una dintre imaginile persoanei. În tutorialul de astăzi, vă vom arăta exact cum să faceți acest lucru folosind Divi. Veți putea descărca gratuit fișierul JSON!

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

Descărcați aspectul GRATUIT

Pentru a pune mâna pe aspectul liber, va trebui mai întâi să le descărcați folosind butonul de mai jos. Pentru a avea acces la descărcare, va trebui să vă abonați la lista noastră de e-mail Divi Daily folosind formularul de mai jos. Ca nou abonat, veți primi și mai multe bunătăți Divi și un pachet Divi Layout gratuit în fiecare luni! Dacă sunteți deja pe listă, pur și simplu introduceți adresa de e-mail mai jos și faceți clic pe descărcare. Nu veți fi „resubscris” și nu veți primi e-mailuri suplimentare.

Descărcați fișierele

Descarcă gratis

Înscrieți-vă la buletinul informativ Divi și vă vom trimite prin e-mail o copie a pachetului final de planificare a paginii de destinație Divi, plus o mulțime de alte resurse, sfaturi și trucuri uimitoare și gratuite Divi. Urmăriți-vă și veți fi un maestru Divi în cel mai scurt timp. Dacă sunteți deja abonat, pur și simplu introduceți adresa de e-mail de mai jos și faceți clic pe descărcare pentru a accesa pachetul de aspect.

DESCARCA

V-ați abonat cu succes. Vă rugăm să verificați adresa de e-mail pentru a vă confirma abonamentul și pentru a obține acces la pachetele de layout Divi săptămânale gratuite!

Să începem să recreăm!

Adăugați secțiunea nr. 1

Culoare de fundal

Începeți prin a adăuga o nouă secțiune la pagina la care lucrați. Deschideți setările secțiunii și schimbați culoarea de fundal.

• Culoare fundal: # 0f0f0f

Spațiere

Treceți la fila de proiectare a secțiunii și modificați setările de spațiere în continuare.

• Căptușeală de sus
  • Desktop și tabletă: 100 px
  • Telefon: 50 px
• Căptușeală inferioară:
  • Desktop și tabletă: 100 px
  • Telefon: 50 px

Adăugați un rând nou

Structura coloanei

Continuați adăugând un rând nou folosind următoarea structură de coloane:

Adăugați modulul de text nr. 1 în coloană

Adăugați conținut H1

Adăugați un prim modul de text în coloana rândului cu un conținut H1 la alegere.

Setări text H1

Treceți la fila de proiectare a modulului și modificați setările de text H1 în consecință:

• Font de titlu: Alata
• Culoare text antet: #ffffff
• Dimensiune text antet:
  • Desktop: 50 px
  • Tabletă: 45 px
  • Telefon: 35 px
• Înălțimea liniei de direcție: 1.2em

Adăugați modulul divizor în coloană

Vizibilitate

Apoi, vom adăuga un modul divizor. Asigurați-vă că este activată opțiunea „Show Divider”.

• Show Divider: Da

Linia

Treceți la fila de proiectare a modulului și schimbați culoarea liniei.

• Culoare linie: #ffffff

Dimensionare

Modificați și setările de dimensionare.

• Greutatea divizorului: 2 px
• Lățime maximă: 100 px
• Înălțime: 2 px

Adăugați modulul de text nr. 2 în coloană

Adăugați conținut de descriere

Următorul și ultimul modul de care avem nevoie în acest rând este un alt modul de text cu un conținut de descriere la alegere.

Setări text

Treceți la fila de proiectare a modulului și modificați setările de text după cum urmează:

• Font text: Alata
• Culoarea textului: # 7c7c7c
• Dimensiune text: 17 px
• Înălțimea liniei textului: 1.9em

Spațiere

Eliminați și marja de jos implicită.

• Marja inferioară: 0 px

Adăugați secțiunea 2

Fundal de gradient

Adăugați o altă secțiune chiar sub cea anterioară și utilizați un fundal de gradient pentru aceasta.

• Culoare 1: # 0f0f0f
• Culoare 2: # 000000
• Poziția inițială: 10%
• Poziție finală: 10%

Spațiere

Modificați apoi setările de spațiere.

• Căptușeală de sus: 0 px
• Căptușeală inferioară: 200 px

Adăugați un rând nou

Structura coloanei

Continuați adăugând un rând nou la secțiune utilizând următoarea structură de coloane:

Dimensionare

Deschideți setările rândului și modificați setările de dimensionare după cum urmează:

• Utilizați lățimea personalizată a jgheabului: da
• Lățimea jgheabului: 2 px

Adăugați modulul Social Media Follow în coloana 1

Adăugați rețele sociale la alegere

Primul modul de care avem nevoie în rândul nostru este un modul Social Follow Follow din coloana 1. Adăugați rețelele sociale la alegere.

Eliminați fiecare culoare de fundal a rețelei sociale individual

Apoi, deschideți fiecare rețea socială individual și eliminați culoarea de fundal.

Adăugați un link la fiecare rețea socială individual

Adăugați și un link corespunzător la fiecare rețea socială.

Culoare de fundal implicită

Apoi, reveniți la setările generale ale modulului și aplicați următoarea culoare de fundal:

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

Plasați cursorul pe culoarea de fundal

Schimbați culoarea de fundal la cursor.

• Plasați cursorul pe fundal: # 494949

Imagine de fundal

Apoi, încărcați o imagine de fundal.

• Dimensiunea imaginii de fundal: copertă
• Amestec de imagine de fundal: înmulțiți

Aliniere

Treceți la fila de proiectare a modulului și schimbați alinierea.

• Alinierea modulului: centru

Pictogramă

Modificați și culoarea pictogramei.

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

Spațiere

Apoi, accesați setările de spațiere și aplicați următoarele valori:

• Marja inferioară: 0 px
• Căptușeală superioară:
  • Desktop: 250 px
  • Tabletă: 450 px
  • Telefon: 200 px
• Căptușeală inferioară: 20 px

Frontieră

Modificăm și setările de frontieră.

• Toate colțurile: 100 px
• Lățimea chenarului: 2 px
• Culoare margine: rgba (255,255,255,0)

Plasați mouse-ul peste frontieră

Folosiți o altă culoare a chenarului pe hover.

• Plasați cursorul pe culoarea chenarului: #ffffff

Clasa CSS

Apoi, accesați fila avansată și aplicați o clasă CSS personalizată.

• Clasa CSS: social-echipă

Plasați cursorul înainte de element

Și finalizați setările modulului activând setarea hover pe elementul anterior și copiați-lipiți următoarele linii de cod CSS:

content: "Connect with me!";
font-family: "Alata";
color: white !important;
position: absolute;
margin-top: -30px;

Adăugați modulul persoană la coloana 1

Adauga continut

Următorul și ultimul modul de care avem nevoie în coloana 1 este un modul de persoană. Adăugați un conținut la alegere.

Setări text

Treceți la fila de proiectare a modulului și modificați setările de text după cum urmează:

• Aliniere text: centru
• Culoarea textului: deschis

Setări text titlu

Stilează textul titlului în continuare.

• Titlu Font: Alata
• Dimensiune text titlu:
  • Desktop: 27 px
  • Tabletă: 25 px
  • Telefon: 22 px

Setări text poziție

Apoi, modificați setările pentru textul poziției.

• Poziție Font: Alata
• Dimensiune text poziție:
  • Desktop: 17 px
  • Tabletă și telefon: 15 px

Spațiere

Aplicați niște umpluturi personalizate de sus și de jos la setările de spațiere.

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

Frontieră

Și completați setările modulului aplicând următoarele setări de margine:

• Lățimea chenarului: 1 px
• Culoare margine: #ffffff

Eliminați coloanele de rând rămase

După ce ați completat modulele din coloana 1, puteți elimina cele două coloane rămase ale rândului.

Clonați coloana de două ori

Reutilizați coloana 1 clonând-o de două ori.

Clonați întregul rând

Apoi, clonați întregul rând de câte ori aveți nevoie.

Schimbați tot conținutul duplicat

Social Media Urmărește link-uri

Desigur, va trebui să modificați tot conținutul duplicat, începând cu linkurile de rețea socială din fiecare modul duplicat Social Media Follow.

Social Media Urmărește imaginile de fundal

Apoi, schimbați imaginea de fundal în fiecare modul de urmărire pe rețelele sociale.

Conținutul modulului persoană

Și finalizați modificările modificând conținutul din fiecare modul de persoană.

Adăugați un modul de cod sub ultimul modul de text în rândul nr. 1 al secțiunii nr. 1

Acum, pentru a ne asigura că fiecare rețea socială schimbă stilurile de îndată ce întregul modul este plasat, vom avea nevoie de câteva linii de cod CSS. Vom plasa acest cod într-un nou modul de cod pe care îl vom adăuga în prima secțiune, chiar sub descrierea Modulului text.

Adăugați cod CSS

Copiați-lipiți următoarele linii de cod CSS și ați terminat:

<style>
.team-socials:hover li a.icon:before {
  color: black !important;
}

.team-socials:hover li a.icon {
  background-color: white;
}
</style>

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, ți-am arătat cum să devii creativ cu vitrina membrilor echipei tale. Mai precis, v-am arătat cum să declanșați pictograme sociale atunci când plasați una dintre imaginile membrilor echipei. Acest lucru are ca rezultat o interacțiune subtilă, dar distractivă, pe care o puteți folosi pentru orice fel de site web pe care îl creați. Ați putut descărca gratuit fișierul JSON! Dacă aveți întrebări, nu ezitați să lăsați un comentariu în secțiunea de comentarii de mai jos.

Dacă sunteți dornici să aflați mai multe despre Divi și să obțineți mai multe cadouri Divi, asigurați-vă că vă abonați la newsletter-ul nostru de e-mail și la canalul YouTube, astfel încât să fiți întotdeauna unul dintre primii oameni care să cunoască și să obțină beneficii din acest conținut gratuit.