Vrei să faci pictogramele tale rețelele sociale să fie lipicioase cu Divi?
Cu opțiunile „lipinice” încorporate ale Divi, puteți proiecta cu ușurință un modul „Urmărire pe rețelele sociale” care va păstra acele pictograme de rețele sociale în față și în centru pe măsură ce utilizatorul derulează în jos pe pagină.
În plus, adăugând un stil personalizat modulului în starea lipicioasă, putem crea tranziții unice de design atunci când trecem la starea lipicioasă în timpul derulării.
Așadar, dacă sunteți în căutarea unui control deplin asupra designului butonului de rețele sociale, acest tutorial este pentru dvs.!
studiu
Iată o scurtă prezentare a rezultatului pe care îl vom obține în acest tutorial.
Creați o pagină nouă cu „Divi Builder”
Din tabloul de bord WordPress, accesați „Pagini > Adăugați nou”
Dați-i un titlu care să aibă sens pentru dvs., apoi faceți clic pe „Utilizați DiviBuilder”
Pentru acest tutorial, vom folosi un aspect predefinit. Pentru a face acest lucru, faceți clic pe „Răsfoiți aspecte”
Găsiți și selectați aspectul "Designer de moda"
Alegeți aspectul "Aterizare" apoi faceți clic pe „Utilizați acest aspect”
Proiectarea modulului „Social Media Follow” în Divi
Crearea secției
Adăugați o nouă secțiune obișnuită la aspect.
Apoi mutați noua secțiune în partea de sus a paginii (sau oriunde doriți să adăugați rețelele sociale, urmați linkurile).
Deschideți setările secțiunii și actualizați culoarea de fundal pentru a se potrivi cu aspectul, după cum urmează:
- Culoare de fundal: #fff9f2
Sub filă Amenajări, extindeți opțiunea Spațiere și modificați următorii parametri:
- Umplutură (sus și jos): 10px
Crearea liniei
În interiorul secțiunii, adăugați un rând la o coloană.
Deschideți setările liniei, trageți în jos opțiunea Spațiere și modificați setările după cum urmează:
- Utilizați lățimea jgheab personalizată: DA
- Lățimea jgheabului: 1
- Latime: 100%
- Latime maxima: 100%
Continuați derulând în jos opțiunea spațiere
- Umplutură (sus și jos): 0px
Crearea modulului sticky „Social Media Follow”.
Odată ce secțiunea și linia sunt la locul lor, adăugați un nou modul „Social MediaFollow” la linie.
Actualizarea setărilor modulului
Deschideți setările modulului „Social Media Follow”.
Primul lucru pe care trebuie să-l facem este să adăugăm o poziție lipicioasă la modul.
Sub filă Avansat, trageți în jos opțiunea Efecte de derulare și actualizați următoarele:
- Poziție lipicioasă: lipiți de sus
Odată ce poziția este în starea lipicioasă, veți putea ținti stilul modulului în starea lipicioasă (la fel ca și pentru starea hover). Acest lucru se poate face trecând cu mouse-ul peste o opțiune și făcând clic pe pictograma PIN.
Sub filă Amenajări, actualizați următoarele:
- Modul de aliniere: Centru
- Culoare pictogramă: #000000 (Desktop), #ffffff (Hover), #ffffff (Lipicios)
- Latime: 100%
- Latime maxima: 100%
- Umplutură: 20px (sus), 12px (jos), 10px (stânga și dreapta)
Setări pentru rețelele sociale
Odată ce setările modulului sunt gata, acum ne putem îndrepta atenția către stilarea pictogramelor individuale de rețele sociale.
Pentru a face acest lucru, vom personaliza mai întâi o pictogramă de rețea socială. Apoi vom duplica rețeaua socială pentru a le crea pe celelalte.
Ar trebui să aveți deja două rețele sociale sub filă cuprins în mod implicit. Ștergeți unul și faceți clic pentru a-l edita pe cel rămas.
Odată ajuns în setările rețelei sociale, selectați o rețea de socializare și actualizați culorile de fundal pentru desktop, hover și stările sticky.
- Rețea socială : TIC-tac (sau ce vrei tu)
- Fundal: transparent (Desktop), #fe2c55 (Hover), #000000 (Lipicios)
TRUC: Culoarea de fundal se va schimba automat pentru a se potrivi cu marca rețelelor sociale. Puteți copia această culoare și adăugați-o ca culoare de fundal pentru starea de trecere cu mouse-ul pentru pictogramă. Aceasta va afișa culoarea de fundal implicită a rețelei sociale când treceți cu mouse-ul peste pictogramă.
Acum puteți comuta între file pentru a vedea culoarea de fundal pentru toate cele trei stări (desktop, hover și sticky).
Apoi, să dăm pictogramei o formă ovală frumoasă și un chenar pentru a se potrivi mai bine cu aspectul. Sub fila Amenajări, actualizați următoarele:
- Colțuri rotunjite: 50%
- Lățimea chenarului: 1px
- Culoare chenar: #000000 (Desktop), Transparent (Hover)
În prezent, pictograma are formă de cerc. Pentru a obține o formă mai ovală, vom modifica setările de spațiere după cum urmează:
- Marja (stânga și dreapta): 15px (desktop), 0px (lipicios), 0px (telefon)
- Umplutură (stânga și dreapta): 16px (desktop), 14px (tabletă), 0px (telefon)
Rețea socială duplicată
Acum că am terminat de proiectat prima rețea socială, putem duplica pictograma pentru a crea altele.
Pentru a face acest lucru, deschideți setările modulului Media SocialFollow și faceți clic pe pictograma duplicat. Pentru acest exemplu, să creăm încă 4.
Acum tot ce trebuie să facem este să actualizăm fiecare dintre noile rețele sociale. Deoarece aceasta va schimba culoarea de fundal, va trebui, de asemenea, să actualizați culoarea de fundal pentru fiecare.
Pentru a face acest lucru, deschideți setările celei de-a doua rețele sociale și actualizați următoarele:
- Rețeaua de socializare: Facebook
- Fundal: transparent (Desktop), #3b5998 (Hover)
Continuați același proces pentru a actualiza restul rețelelor sociale.
Rezultat final
Acum să vedem rezultatul obținut pe diferite dimensiuni de ecran.
Descărcați DIVI acum!!!
Descărcați DIVI acum!!!
Concluzie
Butoanele rețelelor sociale sunt aproape întotdeauna o caracteristică cheie a unui site-ul web. Ele sunt una dintre modalitățile principale de a conecta canalele de social media la a site-ul web. Acesta este motivul pentru care modulul „Urmărire pe rețelele sociale” of Divi conține toate pictogramele de rețea și opțiunile de design de care aveți nevoie pentru a crea soluția perfectă pentru site-ul dvs.
Sperăm că acest tutorial vă va fi util în următoarele proiecte Divi. Dacă doriți să aflați mai multe despre Divi, nu ezitați să vizitați catalogul nostru de Tutoriale Divi. De asemenea, puteți consulta Cum se creează pagina de blog cu modulul Divi Blog
Dacă aveți întrebări sau sugestii, nu ezitați să lăsați un comentariu în secțiunea de comentarii de mai jos.
Cu toate acestea, puteți consulta și resursele noastre, dacă aveți nevoie de mai multe elemente pentru realizarea proiectelor dvs. de creare a site-urilor de internet, consultați ghidul nostru cu privire la Creare blog WordPress sau cea de pe Divi: cea mai bună temă WordPress din toate timpurile.
Dar între timp, împărtășește acest articol pe diferitele rețele de socializare.
...
