Cum se adaugă pictograme sociale în meniul principal Divi

Publicat: 2017-06-27

În tutorialul Divi de astăzi, vă vom arăta cum să adăugați pictograme sociale în meniul principal al site-ului Divi. Urmând acest tutorial pas cu pas, veți putea adăuga pictograme sociale pe orice site web pe care îl creați - indiferent dacă este pentru dvs. sau pentru un client.

Avem deja posibilitatea de a adăuga pictograme sociale direct în antetul și subsolul unui site web cu ajutorul personalizatorului temei Divi. Dar dacă nu asta căutați, acest tutorial vă poate ajuta, deoarece în multe cazuri; oamenii preferă să aibă pictogramele sociale în meniul lor principal în loc de antetul sau subsolul site-ului lor web.

Vă vom arăta exact cum le puteți adăuga, cum le puteți personaliza și cum să le deschideți într-o filă nouă. Acestea sunt toate lucrurile pe care trebuie să le cunoașteți cu adevărat, astfel încât pictogramele sociale din meniul dvs. principal să aducă valoare adăugată întregului site web.

De ce să adăugați pictograme sociale în meniul principal?

Site-urile și canalele de socializare sunt, în multe cazuri, complementare. Nu tot conținutul care este partajat pe un site web apare pe canalele de socializare și invers. De aceea, promovarea site-ului dvs. web pe canalele dvs. de socializare și canalele dvs. de socializare pe site-ul dvs. web nu sunt neobișnuite și sincer; foarte încurajat.

Vrei ca oamenii să interacționeze cu compania sau marca ta în modul în care sunt cei mai familiarizați. Site-ul dvs. web este de obicei „ teritoriu necunoscut ” pentru ei. Prin urmare, bariera de a vă contacta direct prin site-ul dvs. web ar putea fi mai mare decât pentru canalele de socializare. Majoritatea persoanelor care vizitează pagina dvs. Facebook sau pagina Twitter sunt deja integrate în platforme, iar sentimentul confortabil le poate influența comportamentul pozitiv.

De aceea, în general, este foarte recomandabil să puneți pictograme sociale pe site-ul dvs. web. Dar de ce să le distribuiți în mod explicit în meniul dvs. principal? Am enumerat două dintre principalele motive.

Ușor de găsit / Meniul urmărește vizitatorul în timpul vizitei lor

Când adăugați pictograme sociale pe site-ul dvs. web, doriți ca acestea să fie cât mai vizibile posibil. Oamenii nu ar trebui să depună eforturi pentru a găsi pictogramele sociale de pe site-ul dvs. web. De aceea, punerea pictogramelor sociale în meniul principal poate face diferența. Meniul principal urmărește o persoană pe tot parcursul șederii pe site-ul dvs. web. Nu este nevoie să te uiți la icoane, icoanele vin la tine. Singurul lucru pe care persoana trebuie să-l facă este să facă clic și va ajunge acolo.

Meniul principal urmărește o persoană pe tot parcursul șederii pe site-ul dvs. web. Nu este nevoie să căutați icoanele, icoanele vin la voi. Singurul lucru pe care trebuie să-l facă un vizitator este să facă clic pe ei și vor ajunge acolo.

Acțiune declanșatoare

Așa cum sa menționat mai înainte; canalele de socializare și site-urile web sunt complementare. Lucrează împreună și au de obicei aceleași obiective, cum ar fi informarea potențialilor clienți potențiali și atragerea lor către serviciile sau produsele oferite. Cu cât li se confruntă mai mult cu atât, cu atât este mai probabil să se declanșeze curiozitatea lor

Pentru a susține conexiunea dintre site-ul web și canalele de socializare, este un lucru bun să confruntați vizitatorii cu pictogramele sociale cât mai des posibil. Cu cât li se confruntă mai mult, cu atât este mai probabil să se declanșeze curiozitatea lor și cu atât mai probabil vor da clic pe ele.

Cum se adaugă pictograme sociale în meniul principal Divi

Abonați-vă la canalul nostru Youtube

Instalați Font Awesome

În primul rând, trebuie să instalăm Font Awesome pe site-ul nostru WordPress. Vom face acest lucru adăugând un anumit cod CSS în Opțiunile tematice ale Divi.

Deschideți site-ul WordPress, accesați Divi> Opțiuni teme> Integrare și lipiți următorul cod în secțiunea <head>: 

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" />

Font awesome ar trebui acum să fie adăugat la fonturile care sunt utilizate pe site-ul dvs. web. Acum puteți adăuga aceste pictograme în meniul dvs. principal urmând pas cu pas următoarea parte a postării noastre.

Începeți să creați meniul principal

Cel mai probabil, ați creat deja propriul meniu principal personalizat în care ați listat toate paginile pe care doriți să le apară în meniul principal al site-ului dvs. web. Dacă nu ați făcut încă acest lucru, accesați pagina „Meniuri” din Aspect și creați un nou meniu.

Apoi, denumiți meniul, adăugați paginile pe care doriți să le apară în meniul principal și selectați opțiunea „Meniul principal” de mai jos.

Adăugați pictograme sociale

Continuând, dorim să adăugăm pictogramele sociale. Când creați meniul principal, puteți alege unde doriți să apară pictogramele dvs. sociale. În majoritatea cazurilor, vor veni imediat după pagini, dar le puteți pune și pe primul loc. Există pictograme de socializare disponibile pentru toate site-urile importante și cele mai populare de acolo; de la Facebook la Twitter, Instagram, LinkedIn și multe altele.

Începeți prin a deschide următorul link pe site-ul Font Awesome. Vom avea nevoie de acest site web pentru următoarea parte a acestui post, unde vom adăuga pictogramele manual.

Adăugați pictograme manual

Același mod de lucru se aplică pentru fiecare pictogramă socială pe care o adăugați la meniul principal. De exemplu, vă vom arăta cum să adăugați pictograma Instagram. Pentru toate celelalte pictograme pe care doriți să le adăugați, de asemenea; să știți că este același mod de lucru (doar pictograma, codul HTML și adresa URL diferă în consecință).

Deschideți opțiunea „Legături personalizate” și veți vedea că apar două câmpuri: URL și Etichetă de navigare. Evident, câmpul URL este locul în care tastați adresa URL care conduce un vizitator la unul dintre canalele de socializare. În acest exemplu, dorim ca pictograma să conducă la Instagram, așa că trebuie doar să introduceți URL-ul dvs. Instagram.

Apoi, accesați site-ul web Font Awesome din browser și căutați pictograma Instagram prin bara de căutare. La fel, puteți căuta Facebook, LinkedIn și orice altă pictogramă.

După ce ați făcut clic pe pictograma Instagram, veți vedea că site-ul web oferă următorul cod HTML: 

<i class="fa fa-instagram" aria-hidden="true"></i>

Acesta este codul exact pe care trebuie să îl folosim în câmpul Etichetă de navigare, așa că mergeți mai departe și completați linkul personalizat copiind și lipind codul în câmp.

Repetați același proces pentru fiecare dintre pictogramele sociale pe care doriți să le apară în meniul dvs. principal și aruncați o privire la cum arată în partea din față a site-ului dvs. web.

Schimbați aspectul icoanelor sociale

Modificări colective la meniul principal (inclusiv pictograme sociale)

Personalizatorul de teme vă permite să faceți toate modificările de aspect pe care doriți să le efectuați în meniul principal într-un singur loc.

Modificările pe care le puteți face meniului principal cu opțiunile Divi se aplică și pictogramelor sociale. Când dați o anumită culoare meniului principal, de exemplu, pictogramele sociale vor avea aceeași culoare. Asta pentru că folosim un font în loc de o imagine pentru a face acest lucru să funcționeze.

Puteți face toate aceste modificări pe care doriți să le faceți aspectului în Customizerul tematic accesând Header & Navigation> Main Menu Bar. Modificările pe care le faceți se aplică în timp real și vă oferă o perspectivă bună asupra modului în care doriți să arate meniul principal.

Deschideți pictogramele sociale în fila nouă

Această parte a postării este ceva suplimentar pe care îl puteți face cu pictogramele sociale. Probabil că nu doriți să vă trimiteți vizitatorii departe de site, chiar dacă aceștia merg pe canalele dvs. de socializare. Doriți să păstrați în viață ambele interacțiuni cât mai mult timp, deschizând link-urile de socializare într-o filă nouă de fiecare dată când cineva face clic pe ele.

Putem face cu ușurință ca opțiunea „Deschideți în filă nouă” să funcționeze pe toate pictogramele de pe rețelele sociale revenind la meniul pe care l-am creat anterior. Trebuie să facem toate ajustările manual la fiecare dintre pictograme. În acest exemplu, vom face modificările pictogramei Instagram.

Continuați și ștergeți adresa URL pe care ați furnizat-o în câmpul URL și lipiți în schimb următorul cod în adresa URL de navigare: 

<a href="http://www.instagram.com" target="_blank"><i class="fa fa-instagram" aria-hidden="true"></i></a>

Faceți același lucru pentru fiecare dintre pictograme dacă doriți să se deschidă într-o filă nouă. De fiecare dată când un vizitator face clic pe ele, acestea se vor deschide într-o filă nouă care vă permite să vă mențineți vizitatorii cât mai mult timp posibil.

Gânduri finale

Acest tutorial vă va ajuta cu siguranță să integrați pictogramele sociale în propriul site web Divi în modul dorit. Le puteți personaliza și face ca acestea să se potrivească cu restul meniului principal. Dacă aveți întrebări sau sugestii; asigurați-vă că lăsați un comentariu în secțiunea de comentarii de mai jos. Vom rămâne în legătură și vom încerca să răspundem la toate întrebările sau sugestiile pe care le aveți.

Asigurați-vă că vă abonați la newsletter-ul nostru de e-mail și la canalul YouTube, astfel încât să nu pierdeți niciodată un anunț mare, un sfat util sau un cadou gratuit Divi!

Imagine prezentată prin Oceans / shutterstock.com