Dëshironi t'i bëni ikonat tuaja të mediave sociale të ngjiten me Divi?

Me opsionet 'ngjitëse' të integruara të Divi, mund të dizajnoni lehtësisht një modul ngjitës 'Ndjekja e mediave sociale' që do t'i mbajë ato ikona të mediave sociale përpara dhe në qendër ndërsa përdoruesi lëviz poshtë faqes. 

Për më tepër, duke shtuar një stil të personalizuar në modul në gjendje ngjitëse, ne mund të krijojmë tranzicione unike të dizajnit kur kalojmë në gjendjen ngjitëse gjatë lëvizjes. 

Pra, nëse po kërkoni kontroll të plotë mbi dizajnin e butonit tuaj të mediave sociale, ky tutorial është për ju!

studim

Këtu është një përmbledhje e shkurtër e rezultatit që do të marrim në këtë tutorial.

rrjete sociale ngjitëse me Divi

Krijo një faqe të re me "Divi Builder"

Nga pulti i WordPress, shkoni te "Faqet > Shto të reja"

Jepini një titull që ka kuptim për ju dhe pastaj klikoni "Përdor DiviBuilder"

Për këtë tutorial, ne do të përdorim një plan urbanistik të paracaktuar. Për ta bërë këtë, klikoni mbi "Shfleto paraqitjet"

Gjeni dhe zgjidhni paraqitjen "Stilisti"

Zgjidhni paraqitjen "Zbritje" pastaj kliko "Përdorni këtë paraqitje"

Dizajnimi i modulit "Social Media Follow" në Divi

Krijimi i seksionit

Shtoni një seksion të ri të rregullt në paraqitje.

Më pas zhvendoseni seksionin e ri në krye të faqes (ose kudo që dëshironi të shtoni lidhjet e ndjekjes së mediave tuaja sociale).

Hapni cilësimet e seksionit dhe përditësoni ngjyrën e sfondit që të përputhet me paraqitjen si më poshtë:

  • Ngjyra e sfondit: #fff9f2

Nën skedinë Projektimi, zgjeroni opsionin Spacing dhe modifikoni parametrat e mëposhtëm:

  • Mbushje (lart dhe poshtë): 10 px

Krijimi i linjës

Brenda seksionit, shtoni një rresht në një kolonë.

Hapni cilësimet e linjës, tërhiqni opsionin Spacing dhe ndryshoni cilësimet si më poshtë:

  • Përdorni gjerësinë e ulluqit të personalizuar: PO
  • Gjerësia e kanalit: 1
  • Gjerësia: 100%
  • Gjerësia maksimale: 100%

Vazhdoni duke lëvizur poshtë opsionin ndarje

  • Mbushje (lart dhe poshtë): 0 px

Krijimi i modulit ngjitës "Social Media Follow".

Pasi seksioni dhe rreshti të jenë vendosur, shtoni një modul të ri "Follow Media Sociale" në linjë.

Përditësimi i cilësimeve të modulit

Hapni cilësimet e modulit "Social Media Follow". 

Gjëja e parë që duhet të bëjmë është të shtojmë një pozicion ngjitës në modul. 

Nën skedinë Avancuar, tërhiqni opsionin Efektet lëvizni dhe përditësoni sa vijon:

  • Pozicioni ngjitës: Ngjit në krye

Pasi pozicioni të jetë në gjendje ngjitëse, do të jeni në gjendje të synoni stilin e modulit në gjendje ngjitëse (ashtu si mundeni për gjendjen e pezullimit). Kjo mund të bëhet duke qëndruar pezull mbi një opsion dhe duke klikuar ikonën e pinit.

Nën skedinë Projektimi, përditësoni sa vijon:

  • Moduli i shtrirjes: Qendra
  • Ngjyra e ikonës: #000000 (Desktop), #ffffff (Hover), #ffffff (Ngjitës)
  • Gjerësia: 100%
  • Gjerësia maksimale: 100%
  • Mbushja: 20 px (lart), 12 px (poshtë), 10 px (majtas dhe djathtas)

Cilësimet e mediave sociale

Pasi cilësimet e modulit të jenë gati, tani mund ta kthejmë vëmendjen në stilimin e ikonave individuale të mediave sociale. 

Për ta bërë këtë, së pari do të personalizojmë një ikonë të rrjetit social. Më pas do të dublikojmë rrjetin social për të krijuar të tjerët.

Tashmë duhet të keni dy rrjete sociale nën skedën përmbajtje sipas parazgjedhjes. Fshini një dhe klikoni për të modifikuar atë të mbetur.

Pasi të jeni në cilësimet e rrjetit social, zgjidhni një rrjet social dhe përditësoni ngjyrat e sfondit për desktopin, qëndrimin pezull dhe gjendjet ngjitëse.

  • Rrjet social : TIK Tok (ose cfare te duash)
  • Sfondi: transparent (Desktop), #fe2c55 (Hover), #000000 (Ngjitës)

MASHTRIM : Ngjyra e sfondit do të ndryshojë automatikisht për t'u përshtatur me markën e mediave sociale. Mund ta kopjoni këtë ngjyrë dhe ta shtoni si ngjyrën e sfondit të gjendjes së pezullimit për ikonën. Kjo do të shfaqë ngjyrën e paracaktuar të sfondit të rrjetit social kur kaloni pezull mbi ikonën.

Tani mund të kaloni midis skedave për të parë ngjyrën e sfondit për të tre gjendjet (desktop, rri pezull dhe ngjitës).

Më pas, le t'i japim ikonës një formë të bukur ovale dhe një kufi për t'u përshtatur më mirë me paraqitjen. Nën skedën Projektimi, përditësoni sa vijon:

  • Këndet e rrumbullakosura: 50%
  • Gjerësia e kufirit: 1 px
  • Ngjyra e kufirit: #000000 (Desktop), Transparente (Hover)

Aktualisht, ikona ka një formë rrethi. Për të marrë një formë më ovale, ne do të ndryshojmë cilësimet e ndarjes si më poshtë:

  • Margjina (majtas dhe djathtas): 15 px (Desktop), 0px (Ngjitës), 0px (Telefon)
  • Mbushja (majtas dhe djathtas): 16 px (Desktop), 14 px (Tablet), 0px (Telefon)

Rrjeti social i kopjuar

Tani që kemi përfunduar dizajnimin e rrjetit të parë social, mund ta dublikojmë ikonën për të krijuar të tjerë. 

Për ta bërë këtë, hapni cilësimet e modulit Media SocialFollow dhe klikoni ikonën e kopjuar. Për këtë shembull, le të krijojmë 4 të tjera.

Tani gjithçka që duhet të bëjmë është të përditësojmë secilin prej rrjeteve të reja sociale. Duke qenë se kjo do të ndryshojë ngjyrën e sfondit, do t'ju duhet gjithashtu të përditësoni ngjyrën e sfondit për secilën.

Për ta bërë këtë, hapni cilësimet e rrjetit të dytë social dhe përditësoni sa vijon:

  • Rrjeti social: Facebook
  • Sfondi: transparent (Desktop), #3b5998 (Hover)

Vazhdoni të njëjtin proces për të përditësuar pjesën tjetër të rrjeteve sociale.

Rezultati përfundimtar

Tani le të shohim rezultatin e marrë në madhësi të ndryshme të ekranit.

rrjete sociale ngjitëse me Divi

Shkarkoni DIVI Tani!!!

rrjete sociale ngjitëse me Divi
rrjete sociale ngjitëse me Divi

Shkarkoni DIVI Tani!!!

Përfundim

Butonat e mediave sociale janë pothuajse gjithmonë një veçori kryesore në një Site Web. Ato janë një nga mënyrat kryesore për të lidhur kanalet e mediave sociale me një Site Web. Kjo është arsyeja pse moduli “Ndiqni mediat sociale” i Divi përmban të gjitha ikonat e rrjetit dhe opsionet e dizajnit që ju nevojiten për të krijuar zgjidhjen perfekte për faqen tuaj. 

Shpresojmë që ky tutorial të jetë i dobishëm për ju në projektet tuaja të ardhshme Divi. Nëse dëshironi të dini më shumë rreth Divi, mos hezitoni të vizitoni katalogun tonë të Divi tutorial. Ju gjithashtu mund të konsultoheni Si të krijoni faqen e Blog me modulin Divi Blog 

Nëse keni ndonjë pyetje ose sugjerim, mos ngurroni të lini një koment në seksionin e komenteve më poshtë.

Sidoqoftë, gjithashtu mund të këshilloheni burimet tonanëse keni nevojë për më shumë elementë për të realizuar projektet tuaja të krijimit të faqeve në Internet, duke u konsultuar me udhëzuesin tonë për Krijimi i blogut të WordPress ose atë më Divi: tema më e mirë e WordPress të të gjitha kohërave.

Por ndërkohëndajeni këtë artikull në rrjetet tuaja të ndryshme sociale.

...