Cum să creați efecte sociale unice de urmărire a butonului pentru rețelele sociale cu Divi

Modulul Social Media Follow al Divi vă permite să stilizați și să adăugați cu ușurință acele linkuri importante către rețelele dvs. sociale oriunde pe site-ul dvs. web. Și dacă doriți să vă murdăriți mâinile cu unele dintre efectele puternice de hover încorporate ale Divi, puteți proiecta câteva efecte de hover creative și pentru butoanele de urmărire pe rețelele sociale.

În acest tutorial, îți voi arăta câteva efecte unice de urmărire a butonului de urmărire pe rețelele de socializare, care te-ar putea surprinde.

Verifică!

Trage cu ochiul

Iată o scurtă privire asupra efectelor de hover pe care le vom crea.

Partea 1: Mutarea umbrelor casetei pentru a vă evidenția butoanele de urmărire a rețelelor sociale

Granițe către puncte

Puncte la frontiere

Bouncing Shadows 1

Bouncing Shadows 2

Începeți să construiți partea 1 Efecte de cursor

Partea 2: Schimbarea culorii, a dimensiunii și a formei pe hover

Schimbarea dimensiunii și a culorii

Schimbarea dimensiunii, culorii și formei

Începeți să construiți Partea 2 Efecte de plutire

Partea 3: Efecte de filtrare

Începeți să construiți partea 3 Efectul hover

Partea 4: Icoane mari cu efecte de amestecare a ecranului și filtrare

Începeți să construiți partea 4 Efectul hover

Noțiuni de bază

Abonați-vă la canalul nostru Youtube

Pentru ca lucrurile să ruleze pentru acest tutorial, tot ce aveți nevoie este Tema Divi instalată și activă. Apoi creați o pagină nouă și dați-i paginii un titlu. Apoi faceți clic pentru a utiliza Divi Builder și selectați opțiunea Utilizați un aspect premade. Din modalitatea pop-up Încărcare din bibliotecă, selectați pachetul de aspect pentru dezvoltatori de aplicații. Apoi faceți clic pentru a utiliza butonul de urmărire a rețelei de socializare, vom folosi aspectul paginii de pornire a dezvoltatorilor de aplicații.

Publicați-vă pagina și faceți clic pe butonul pentru a crea pe front-end.

Acum ștergeți toate secțiunile paginii, cu excepția secțiunii care conține butoanele de urmărire a rețelelor sociale din partea de jos a paginii.

Acesta va servi drept șablon inițial pentru crearea efectelor noastre de plutire.

Să salvăm secțiunea în Biblioteca Divi, astfel încât să putem adăuga o versiune nouă a acestor modele de butoane de urmărire a rețelelor sociale atunci când este necesar.

De asemenea, puteți duplica secțiunea de mai multe ori pe pagina dvs. Acest lucru vă va permite să creați diferite efecte de hover începând cu secțiunea premade.

Acum sunteți gata să începeți să creați efectele de hover.

Să începem.

# 1 Umbre de cutie în mișcare pentru a vă evidenția butoanele de urmărire pe rețelele sociale

Granițe către puncte

Pentru acest efect de hover, vom adăuga o umbră de casetă în jurul butonului care se micșorează și se deplasează deasupra butonului de pe hover. Pentru a face acest lucru, deschideți modulul social media follow și faceți clic pentru a deschide setările rețelei sociale Facebook.

Apoi copiați în clipboard culoarea de fundal utilizată pentru pictogramă (# 3b5998). Această culoare va fi utilizată pentru umbra cutiei.

Acum deschideți fila de proiectare și actualizați următoarele:

Box Shadow: vezi captura de ecran
Poziție verticală a umbrei casetei: 0 px (implicit), -46 px (pluteste)
Puterea neclarității umbrei cutiei: 0 px
Puterea răspândirii umbrei casetei: 5 px (implicit), -16 px (plutitor)

Pentru culoarea umbrei, lipiți culoarea de fundal (# 3b5998) și reduceți opacitatea cu 50%. Acest lucru vă va oferi o versiune mai ușoară a culorii de fundal a butonului.

Culoare umbră: rgba (59,89,152,0,5)

Acum faceți clic dreapta pe categoria de stil Box Shadow și selectați Copy Copy Shadow Styles.

Salvați setările pentru rețeaua socială Facebook și apoi faceți clic dreapta pe fiecare dintre rețelele sociale și selectați Inserați stiluri de elemente pentru fiecare. Aceasta va aplica aceleași stiluri de umbră de casetă pentru restul butoanelor.

Cu toate acestea, va trebui să actualizați în continuare culoarea umbrei cutiei care este specifică fiecăreia. Pentru a face acest lucru, repetați același proces pe care l-am făcut pentru rețeaua socială Facebook. Deschideți setările specifice rețelei sociale, copiați culoarea de fundal utilizată, lipiți-o în noua culoare umbră a casetei și apoi reduceți opacitatea cu 50%.

Iată culorile umbrelor pentru fiecare dintre celelalte rețele sociale:

Culoare umbră cutie Twitter: rgba (0,172,237,0,5)
Instagram Box Shadow Color: rgba (234,44,89,0.5)
Dribble Box Shadow Color: rgba (234,76,141,0,5)
Youtube Box Shadow Color: rgba (168,36,0,0.5)

După actualizarea culorilor umbrelor casetei, verificați rezultatul final.

Puncte la frontiere

Puteți inversa cu ușurință efectul hover prin comutarea valorilor implicite și hover pentru poziția verticală a umbrei casetei și puterea de răspândire.

Duplicați secțiunea (dacă doriți să păstrați designul „borduri la puncte”) și apoi deschideți setările modulului de urmărire a rețelelor sociale. Apoi deschideți setările pentru rețeaua socială Facebook și actualizați următoarele:

Box Shadow Vertical Position: -46px (implicit), 0px (hover)
Puterea răspândirii umbrei cutiei: -16px (implicit), 5px (plutitor)

Va trebui să actualizați aceste noi setări de umbră pentru fiecare dintre rețelele sociale rămase. Puteți face acest lucru manual sau puteți folosi clic dreapta pentru a copia poziția verticală a umbrei cutiei și a întinde puterea și apoi lipiți-le în fiecare dintre rețele.

Odată terminat, designul final va arăta astfel.

Efectul Shadows Bouncing

Pentru următoarea versiune a acestui efect de design și hover, vom face ca umbra casetei (punct) a fiecăruia dintre butoane să înceapă în aceeași locație în mod implicit. Acest lucru va crea un fel de efect de salt.

Pentru început, puteți duplica designul „puncte la margini” pe care l-am construit anterior. Deschideți setările modulului de urmărire a rețelelor sociale și apoi deschideți setările rețelei sociale Facebook. Actualizați următoarele stiluri de umbră a casetei:

Poziție orizontală a umbrei casetei: 140 px (implicit), 0 px (plutitor)
Box Shadow Vertical Position: -70px (implicit), 0px (hover)

Pentru rețeaua socială Twitter, actualizați următoarele:

Poziție orizontală a umbrei casetei: 70 px (implicit), 0 px (plutire)
Box Shadow Vertical Position: -70px (implicit), 0px (hover)

Pentru rețeaua socială Instagram, actualizați următoarele:

Poziție orizontală a umbrei casetei: 70 px (implicit), 0 px (plutire)
Box Shadow Vertical Position: -70px (implicit), 0px (hover)

Pentru rețeaua socială Dribble, actualizați următoarele:

Poziție orizontală a umbrei casetei: -70px (implicit), 0px (plutire)
Box Shadow Vertical Position: -70px (implicit), 0px (hover)

Pentru rețeaua socială Youtube, actualizați următoarele:

Poziție orizontală a umbrei casetei: -140px (implicit), 0px (hover)
Box Shadow Vertical Position: -70px (implicit), 0px (hover)

Verificați rezultatul final.

Dacă nu doriți ca punctul să se afișeze inițial, puteți seta culoarea implicită a umbrei casetei la transparentă și apoi puteți adăuga o culoare a umbrei casetei la cursor. Acest lucru vă va oferi un design care arată ca următorul:

# 2 Schimbarea culorii, a dimensiunii și a formei pe Hover

Pentru următoarea serie de efecte de hover, vă voi arăta cum să schimbați cu ușurință culoarea, dimensiunea sau forma butoanelor de pe rețelele sociale de pe hover. Pentru a începe, asigurați-vă că utilizați o versiune nouă a secțiunii butonului de urmărire pe rețelele sociale din aspectul paginii de pornire pentru dezvoltatori de aplicații. Dacă l-ați salvat în biblioteca Divi, acum ar fi un moment bun să îl adăugați la pagina dvs.

Schimbarea culorii

Schimbarea culorii unui buton de rețea socială în cursă este destul de simplă. Pentru acest exemplu, să începem cu o culoare de fundal gri închis în mod implicit care se transformă în culoarea rețelei sociale.

Pentru a face acest lucru, deschideți modulul Social Media Follow și apoi deschideți setările Rețelei Facebook. Actualizați următoarele:

Culoare fundal: # 333333 (implicit), # 3b5998 (trecere cu mouse-ul)

Apoi continuați acest proces pentru a actualiza celelalte patru culori de fundal ale rețelei sociale după cum urmează:

Culoarea fundalului Twitter: # 333333 (implicit), # 00aced (hover)
Culoarea fundalului Instagram: # 333333 (implicit), # ea2c59 (trecere)
Culoare fundal dribling: # 333333 (implicit), # ea4c8d (trecere)
Culoarea fundalului YouTube: # 333333 (implicit), a82400 (plasați cursorul)

Iată rezultatul.

Schimbarea dimensiunii

Pentru a schimba dimensiunea butonului, putem adăuga o umbră de casetă pe hover. Aceasta permite butonului să crească, fără a adăuga spațiu real butonului care ar împinge butoanele adiacente în deplasare.

Pentru aceasta, deschideți setările rețelei Facebook și adăugați următoarele stiluri de umbră a casetei:

Box Shadow: vezi captura de ecran
Box Shadow Vertical Position: 0px
Puterea neclarității umbrei cutiei: 0 px
Puterea răspândirii umbrei casetei: 0 px (implicit), 10 px (plutitor)
Culoare umbră: # 3b5998 (aceasta ar trebui să aibă aceeași culoare cu culoarea de fundal a butonului)

Pentru a accelera procesul de adăugare a aceluiași design de umbră de cutie la restul butoanelor rețelei sociale, faceți clic dreapta pe categoria de umbră a cutiei din rețeaua Facebook și faceți clic pe „Salvați stilurile de umbră a casetei”.

Salvați setările și faceți clic dreapta pe fiecare dintre rețelele sociale și selectați „Inserați stiluri de element”.

Acum nu mai rămâne decât să actualizați culoarea umbrei cutiei cu culoarea corectă a rețelei sociale care se potrivește cu culoarea sa de fundal.

Pentru a face această actualizare, urmați următoarele:

Culoare umbră cutie Twitter: # 00 în față
Culoare umbră cutie Instagram: # ea2c59
Culoare umbră Dribble Box: # ea4c8d
Culoare umbră Youtube Box: # a82400

Iată rezultatul final.

Schimbarea formei

Pentru a schimba forma butonului pe hover, tot ce trebuie să faceți este să reglați opțiunea „Colțuri rotunjite”. Acest modul de urmărire a rețelelor sociale are în prezent colțurile rotunjite setate la 40 px, făcând butoanele circulare. Dacă dorim să-l schimbăm în pătrat, tot ce trebuie să faceți este să reglați colțurile rotunjite la 0 px la plecare.

Pentru aceasta, deschideți setările rețelei Facebook și actualizați următoarele:

Colțuri rotunjite (plutesc): 4 px pe toate cele patru colțuri

Apoi copiați stilurile de margine și lipiți-le în fiecare rețea rămasă.

Iată designul final.

# 3 Efecte de filtrare

Pentru următorul efect de hover, vă voi arăta cum să utilizați câteva efecte de filtru pentru a schimba culorile butoanelor de pe rețelele sociale de pe hover. Pentru a începe, asigurați-vă că utilizați o versiune nouă a secțiunii butonului de urmărire pe rețelele sociale din aspectul paginii de pornire pentru dezvoltatori de aplicații. Dacă l-ați salvat în biblioteca Divi, acum ar fi un moment bun să îl adăugați la pagina dvs.

Efecte de saturație și inversare a filtrului la cursor

Folosirea saturației și a efectelor de filtrare inversă sunt o modalitate simplă și puternică de a schimba stilul butoanelor de pe rețelele sociale pe hover. În acest exemplu, vă voi arăta cum să combinați saturația și să inversați pentru a crea butoane gri cu pictograme negre care trec înapoi la culoarea lor originală în timpul deplasării.

Pentru a face acest lucru, deschideți social media, urmați setările modulului, apoi deschideți fiecare dintre setările individuale ale rețelei sociale și actualizați următoarele opțiuni de filtrare:

Saturație: 0% (implicit), 100% (pluteste)
Inversați: 100% (implicit), 0% (plasați cursorul)

Verificați rezultatul.

# 4 Icoane mari colorate cu efecte de amestec de ecran și filtru

Pentru acest design final al butonului de social media, vom începe complet de la zero. Deci, creați o nouă secțiune cu un rând cu o coloană și adăugați un modul de urmărire pe rețelele sociale pe rând.

Apoi deschideți setările de urmărire a rețelelor sociale și ștergeți rețeaua socială implicită de twitter, lăsând doar elementul de rețea socială Facebook.

Apoi actualizați setările de social media, după cum urmează:

Culoare fundal: #ffffff
Aliniere element: centru
Blend Mode: ecran

Apoi, deschideți setările elementului de rețea socială Facebook și actualizați următoarele:

Culoare fundal: # 000000
Marjă personalizată: 10 px la stânga, 10 px la dreapta
Împletire personalizată: 10 px sus, 10 px jos, 10 px stânga, 10 px dreapta
Saturație: 0% (implicit), 100% (pluteste)
Inversați: 100% (implicit), 0% (plasați cursorul)

Salvează setările.

Apoi duplicați elementul de rețea socială facebook de 4 ori, astfel încât să aveți un total de 5 butoane de rețea socială.

Acum deschideți fiecare dintre elementele rețelei sociale duplicate și actualizați rețeaua socială și culoarea fundalului la # 000000.

Salvează setările.

Acum, pentru că avem efect modul de amestecare a ecranului, putem adăuga o culoare de fundal în coloana rând care conține modulul nostru de urmărire a rețelelor sociale. Orice culoare de fundal pe care o vom folosi va determina culoarea pictogramelor noastre de pe rețelele sociale și va plasa culoarea de fundal.

Pentru aceasta, deschideți setările rândului și actualizați următoarele:

Coloana 1 Culoare fundal: # 0c71c3

Observați cum s-au schimbat culorile pictogramei în această culoare de fundal.

Acum verificați rezultatul de până acum.

Pentru a mări pictogramele / butoanele, putem folosi un fragment de CSS personalizat. Pentru a face acest lucru, trebuie mai întâi să adăugăm un ID CSS la modulul de urmărire a rețelelor sociale și apoi să adăugăm câteva CSS la setările paginii noastre.

Deschideți modulul de urmărire social media și adăugați următorul ID CSS în fila avansată.

ID CSS: pictograme mari

Apoi, deschideți setările paginii și adăugați următoarele css personalizate.

@media (min-width: 980px){
#large-icons.et_pb_social_media_follow li a.icon::before {
  font-size: 50px;
 line-height: 100px;
  width: 100px;
  height: 100px;
}
}

Acest cod mărește dimensiunea pictogramelor la 50 px și înălțimea și lățimea butoanelor la 100 px. Interogarea media asigură faptul că acest stil se aplică numai pe desktop.

Verificați rezultatul final.

Gânduri finale

Sper că aceste rețele sociale urmăresc efectele de trecere a butonului vă vor oferi câteva noi idei noi despre cum să vă capturați vizitatorii cu câteva modele unice. Majoritatea acestor exemple sunt ușor de creat, mai ales dacă vă familiarizați cu modul în care funcționează efectele hover în cadrul Divi. Până data viitoare, continuați să vă stăpâniți abilitățile Divi și creați ceva frumos pentru următorul dvs. proiect.

Aștept cu nerăbdare să aud de la dvs. în comentarii.

Noroc!