Cum se adaugă pictograme sociale în meniul principal Divi

Este practic imposibil să rulați un site web de succes fără a avea o prezență dedicată pe social media. Indiferent dacă alegeți ca Instagram, Twitter, TikTok, Facebook sau orice combinație a acestora și orice altceva, oamenii vor să interacționeze direct cu dvs. și cu marca dvs. Asigurarea că aveți pictograme sociale în meniul principal al Divi este o modalitate excelentă de a canaliza traficul de pe site-ul dvs. web către rețeaua aleasă de dvs. Este rapid și ușor și vă vom plimba prin fiecare pas.

Să începem!

previzualizare

Desktop

Mobil

Utilizați Generatorul de teme Divi pentru a încărca un gratuit antet global

Pentru acest articol, vom folosi pachetul de layout Tennis Club și gratuit antetul / subsolul. Puteți descărca pachetul de aspect din cadrul constructorului Divi și pachetul de antet / subsol de pe blogul nostru. Când îl descărcați, fișierele vor fi o arhivă .zip . Asigurați-vă că le extrageți astfel încât să aveți un fișier .json de încărcat în Divi.

Acum, intrați în tabloul de bord WordPress și găsiți Divi Theme Builder sub Divi - Theme Builder . Faceți clic pe pictograma săgeată sus-jos în colțul din dreapta sus al paginii. Aceasta deschide modalitatea de portabilitate , selectați fila Import , găsiți fișierul .json pentru antetul / subsolul pe care l-ați descărcat și faceți clic pe Importați șabloane de constructor de teme Divi .

Apoi doriți să accesați secțiunea antet a site-ului dvs. Deoarece este vorba de pictograme sociale, le vom introduce în antetul global, deoarece ne gândim că ar trebui să fie pe toate paginile de pe site-ul dvs. (dacă nu se specifică altfel).

Ar trebui să te afli în interiorul constructorului acum. Dacă ați urmat instrucțiunile de mai sus, noul antet pe care l-ați încărcat ar trebui să apară deja la locul său.

Este posibil să observați că există deja icoane sociale aici. Acele pictograme sociale nu se află în meniul principal Divi, ceea ce lucrăm astăzi. Deci, hai să intrăm în buruieni, nu-i așa?

Adăugați pictograme sociale în bara de meniu principală

Primul lucru este primul, să schimbăm structura rândului / coloanei. Vrem să găsim rândul în secțiunea # 2 (cea de jos cu linkurile Acasă / Contact ).

Selectăm structura cu două coloane pentru acest tutorial, dar este ceea ce funcționează cel mai bine pentru site-ul dvs. După ce ați ales acest lucru, accesați setările Row și navigați la fila Design . Găsiți meniul Dimensionare și comutați pe Utilizați lățimea personalizată a jgheabului . Setați valoarea Lățimii jgheabului la 1. Puteți introduce numărul sau utilizați glisorul pentru a face acest lucru.

Faceți clic pe bifa verde pentru a salva setările. Apoi reveniți la setările Row. De data aceasta, selectați setul de viteze pentru coloana de sus / prima / stânga.

Apoi, navigați la fila Advanced . Găsiți zona CSS personalizată și faceți clic în câmpul Element principal . În acest câmp, veți dori să adăugați următorul CSS.

width:80%;

sau

width:80%!important;

Este posibil să trebuiască să adăugați eticheta! Importantă pentru a stiliza acest element. Este în regulă. Nu ar trebui să creeze probleme de performanță sau cod spaghetti de tratat, deoarece este un singur element.

Apoi, accesați setările de receptivitate și utilizați același cod pentru a schimba lățimea coloanei înapoi la 100% pentru dispozitivele mobile.

Apoi, repetați acest pas pentru a doua coloană. Numai de data aceasta, setați valoarea implicită la 20% și aveți în continuare valoarea mobilă la 100% .

După ce ați terminat, salvați modificările și pregătiți-vă să adăugați și să vă stilizați pictogramele de pe rețelele sociale.

Adăugați modulul Social Media Follow

Faceți clic pe pictograma negru + din coloana 2 pentru a adăuga un nou modul și derulați până găsiți Social Media Follow . Introduceți-l.

Indiferent de antetul pe care îl utilizați, pictogramele implicite de pe rețelele sociale nu se vor potrivi cu stilul dvs. Nici nu se vor poziționa corect. Următorul pas va fi stilizarea și spațierea corectă a acestora. În cadrul setărilor modulului Social Media Follow , accesați Design și apoi Alignment . Alegeți unde doriți să fie plasat modulul.

Alegem justificarea corectă pentru desktop și apoi intrăm în opțiunile de receptivitate și o centrăm.

Următorul este derularea în jos în meniul Pictogramă . Alegeți culoarea pictogramei dorite. Aceasta este f pentru Facebook, pasărea pentru Twitter, camera pentru Instagram. Acesta nu este fundalul albastru, de exemplu.

Următorul este spațiul. Într-adevăr, principalul lucru care trebuie ajustat este marja superioară. Vom aplica o marjă superioară de 1,5 vw , astfel încât să se centreze cu textul meniului. Dacă îl doriți mai mult sau mai puțin pentru mobil, îl puteți ajusta și.

Acum, faceți clic pe fila Conținut și accesați pictograma individuală a rețelei sociale pe care doriți să o personalizați. Veți repeta acești pași pentru fiecare pictogramă pe care o alegeți pentru site-ul dvs.

Derulați în jos până la Fundal și selectați culoarea dorită care se potrivește cu designul site-ului dvs. Din nou, amintiți-vă că acest lucru va schimba doar fundalul acestei pictograme.

Ați putea dori, de asemenea, să schimbați culoarea acestei pictograme. Puteți face acest lucru în fila Design și secțiunea Icon , la fel ca în modulul general în sine. Această setare îl va suprascrie pe cel general, deci nu trebuie să vă faceți griji cu privire la interferența cu alții dacă doriți culori unice.

Apoi, derulați în jos până la intrarea Border sub fila Design și în cadrul acesteia, veți găsi Lățimea Border . Setați această valoare la 3 px, apoi selectați o culoare de margine care să iasă din fundalul meniului principal Divi.

În acest moment, veți reveni la fila Conținut și veți repeta acești pași pentru fiecare pictogramă de rețea socială pe care doriți să o afișați. Dacă doriți ca fiecare dintre pictogramele din acest modul să împărtășească același design, puteți face clic dreapta pe cea pe care ați proiectat-o ​​și selectați Copierea stilurilor de elemente .

Apoi, faceți clic dreapta pe celelalte rețele pe care doriți să le stilizați și selectați Lipire stiluri de element .

Si asta e! Asigurați-vă că dați clic pe butonul Salvare din colțul din dreapta jos al ecranului pentru a salva aspectul general. Apoi, sunteți în siguranță la X din ecranul de editare din colțul din dreapta sus.

Asigurați-vă că pagina Divi Theme Builder afișează Toate modificările salvate în partea stângă sus. Dacă nu, faceți clic pe Salvați modificările . După ce ați terminat, site-ul dvs. va afișa live pictogramele de pe rețelele sociale în meniul Divi Primary!

Rezultate finale

Și așa ar trebui să semene rezultatele tale finale.

Desktop

Mobil

Încheierea

Asigurarea faptului că publicul dvs. vă poate găsi întotdeauna rețelele sociale principale este o bucată de tort cu Divi. În doar câțiva pași, puteți ajusta unul dintre pachetele noastre de antet / subsol gratuit pentru a include pictogramele dvs. de socializare în meniul principal (sau oriunde altundeva le-ați dori). Noroc!

Ce părere aveți despre pictogramele de pe rețelele sociale din meniul principal? Unde ai tendința să le plasezi?