Doriți să afișați pictogramele rețelelor sociale la trecerea cursorului peste fotografiile din Divi ?
Atunci când creați pagina despre dvs., puteți lua în considerare adăugarea diferiților membri ai echipei ai companiei dvs. la o vitrină.
Când începeți acest proces de proiectare, veți observa că trei lucruri nu pot lipsi de la început: o imagine, un nume și o poziție. Dar dacă vrei să-i arăți și mai mult pe membrii echipei, poți lua în considerare și să adaugi link-urile lor de rețele sociale la design.
Bineînțeles, puteți merge pe calea de modă veche și puteți adăuga un modul „Urmărește-ne pe rețelele sociale” sub numele și funcția persoanei. Cu toate acestea, puteți alege și să adăugați un pic de interacțiune prin afișarea acestor pictograme de îndată ce cineva trece cu mouse-ul peste una dintre imaginile persoanei respective.
În tutorialul de astăzi, vă vom arăta exact cum să faceți acest lucru folosind Divi.
Să mergem.
studiu
Înainte de a vă scufunda în tutorial, să aruncăm o privire rapidă asupra rezultatului pe diferite dimensiuni de ecran.
Rezultat pe laptop
Rezultat pe mobil
Să începem realizarea cu Divi!
Adăugați secțiunea # 1
Culoare de fundal
Adăugați o nouă secțiune la pagina la care lucrați.
Deschideți setările secțiunii și schimbați culoarea de fundal.
- Fundal: #0f0f0f
spaţierea
Comutați la filă Amenajări opțiunea drop-down spațiere și apoi modificați setările de spațiere.
- Umplutură (sus și jos): 100px
Adăugați o linie nouă
Structura coloanei
Continuați prin adăugarea unui nou rând folosind următoarea structură de coloane:
Adăugați modulul „Text” #1 la coloană
Adăugați un titlu de mărimea H1
Adăugați un prim modul "Text" la coloana de rând
Adăuga cuprins mărimea H1 (Titlul 1) la alegere.
Setări text H1
Comutați la filă Amenajări, trageți în jos opțiunea Titlu text și modificați setările de text H1 în consecință:
- Font de titlu: Alata
- Culoarea textului titlului: #ffffff
- Mărimea textului:
- Desktop: 50px
- Tabletă: 45px
- Telefon: 35px
- Înălțimea liniei de cap: 1,2 em
Adăugați un modul „Divider” la coloană
vizibilitate
În continuare, vom adăuga un modul „Divider”. Asigurați-vă că opțiunea „Afișare divizor” este activată.
- Afișați separator: DA
Ligne
Comutați la filă Amenajări, trageți în jos opțiunea Linie și schimbați culoarea liniei.
- Culoare linie: #ffffff
dimensionarea
Opțiune drop-down dimensionarea și modificați și setările de dimensionare.
- Greutate divizor: 2px
- Lățimea maximă: 100 px
- Înălțime: 2px
Adăugați modulul „Text” #2 la coloană
Adăugați conținut de descriere
Următorul și ultimul modul de care avem nevoie în această linie este un alt modul „Text” cu a cuprins descrierea la alegere.
Setări text
Comutați la filă Amenajări, trageți în jos opțiunea Text și modificați setările de text după cum urmează:
- Font text: Alata
- Culoare text: #7c7c7c
- Dimensiune: 17px
- Înălțimea liniei textului: 1,9 em
spaţierea
De asemenea, eliminați marginea de jos implicită.
- Marja (jos): 0px
Adăugați secțiunea # 2
Fundal gradient
Adăugați o altă secțiune chiar sub cea anterioară și utilizați un fundal gradient pentru aceasta.
- Culoare stânga: #0f0f0f
- Culoare dreapta: #000000
- Poziția din stânga: 10%
- Poziția corectă: 90%
spaţierea
Comutați la filă Amenajări, trageți în jos opțiunea spațiere și apoi modificați setările de spațiere.
- Umplutură (sus): 0px
- Căptușeală (jos): 200px
Adăugați o linie nouă
Structura coloanei
Continuați adăugând un nou rând la secțiune folosind următoarea structură de coloane:
dimensionarea
Deschideți setările liniei și modificați setările de dimensionare după cum urmează:
- Utilizați lățimea jgheab personalizată: DA
- Lățimea jgheabului: 2px
Adăugați modulul „Urmărire pe rețelele sociale” în coloana 1
Adăugați rețelele sociale alese
Primul modul de care avem nevoie în rândul nostru este modulul „Urmărire pe rețelele sociale” din coloana 1. Adăugați rețelele sociale alese.
Eliminați individual culoarea din fiecare rețea socială
Deschideți fiecare rețea socială individual
Eliminați culoarea de fundal.
Adăugați un link către fiecare rețea socială în mod individual
De asemenea, adăugați un link corespunzător fiecărei rețele sociale.
Culoarea de fundal implicită
Apoi, reveniți la setările generale ale modulului și aplicați următoarea culoare de fundal:
- Fundal: rgba(0,0,0,0)
Culoarea de fundal la trecerea cursorului
Schimbați culoarea de fundal la trecerea cursorului.
- Fundal (Hover): #494949
Imagine de fundal
Apoi, încărcați o imagine de fundal.
- Dimensiunea imaginii de fundal: Coperta
- Amestecare imagine de fundal: Înmulțire
aliniere
Comutați la filă Amenajări și modificați alinierea.
- Modul de aliniere: Centru
icoană
Schimbați și culoarea pictogramei.
- Culoare pictogramă: rgba(0,0,0,0)
spaţierea
Apoi accesați setările de spațiere (spațiere) și aplicați următoarele valori:
- Marja (jos): 0px
- Captuseala (sus):
- Desktop: 250px
- Tabletă: 450px
- Telefon: 200px
- Căptușeală (jos): 20px
frontieră
De asemenea, modificăm setările de frontieră.
- Colțuri rotunjite: 100px
- Lățimea chenarului: 2px
- Culoare chenar: rgba(255,255,255,0)
Graniță la hover
Folosiți o altă culoare de chenar la trecerea cursorului.
- Culoarea chenarului (Hover): #ffffff
CSS
Apoi accesați fila Avansat și aplicați o clasă CSS personalizată.
- Clasa CSS: echipe-sociale
Css personalizat (înainte)
Și completați setările modulului activând setarea de hover pe element "Inainte de" și prin copierea și lipirea următoarelor rânduri de cod CSS:
content: "Restons connectés!";
font-family: "Alata";
color: white !important;
position: absolute;
margin-top: -30px;
Adăugați un modul „Persoană” la coloana 1
Adăugați conținut de descriere
Următorul și ultimul modul de care avem nevoie în coloana 1 este un modul „Persoană”. Adauga ceva cuprins descrierea la alegere.
Setări text
Comutați la filă Amenajări și modificați setările de text după cum urmează:
- Alinierea textului: Centru
- Culoare text: deschis
Setări text de titlu
Apoi personalizați textul titlului.
- Font titlu: Alata
- Titlu Text Dimensiunea titlului:
- Desktop: 27px
- Tabletă: 25px
- Telefon: 22px
Setări text pentru descrierea postului
Apoi editați setările pentru textul descrierii postului.
- Font de poziție: Alata
- Dimensiunea textului poziției:
- Desktop: 17px
- Tabletă și telefon: 15px
spaţierea
Modificați setările de spațiere după cum urmează:
- Umplutură (sus și jos): 40px
frontieră
Și completați setările modulului aplicând următoarele setări de chenar:
- Lățimea chenarului: 1px
- Culoare chenar: #ffffff
Eliminați coloanele rămase din rând
După ce ați completat modulele Coloana 1, puteți elimina celelalte două coloane din rând.
Clonează coloana de două ori
Reutilizați coloana 1 clonând-o de două ori.
Clonează întregul rând
Apoi clonează întregul rând de câte ori este nevoie.
Editați tot conținutul duplicat
Adăugați modulul Cod sub ultimul modul text din rândul 1 al secțiunii 1
Acum, pentru a ne asigura că fiecare rețea socială își schimbă stilul de îndată ce se trece cu mouse-ul întregului modul, vom avea nevoie de câteva rânduri de cod CSS. Vom plasa acest cod într-un nou modul de cod pe care îl vom adăuga la prima secțiune, chiar sub textul descrierii
Adăugați codul CSS
Copiați și lipiți următoarele rânduri 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>
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.
Birou
Descărcați DIVI acum!!!
Mobil
Descărcați DIVI acum!!!
Concluzie
În acest articol, ți-am arătat cum să fii creativ prezentând membrii echipei.
Mai exact, v-am arătat cum să afișați pictogramele rețelelor sociale atunci când treceți cu mouse-ul peste una dintre imaginile unui membru al echipei. Rezultatul este o interacțiune subtilă, dar distractivă, pe care o puteți folosi pentru orice tip de site-ul web pe care le creezi.
Dacă aveți nevoie de mai multe elemente pentru a finaliza proiectele dvs. de creare a site-ului web, răsfoiți și ghidul nostru despre Creare blog WordPress sau cea de pe Divi: cea mai bună temă WordPress din toate timpurile.
Dacă aveți nelămuriri sau sugestii, găsiți-ne în secțiunea de comentarii pentru a discuta despre asta.
Dar între timp, împărtășește acest articol pe diferitele rețele de socializare.
