Come aggiungere icone social al menu principale di Divi

Pubblicato: 2017-06-27

Nel tutorial Divi di oggi, ti mostreremo come aggiungere icone social al menu principale del tuo sito web Divi. Seguendo questo tutorial passo dopo passo, sarai in grado di aggiungere icone social a qualsiasi sito web che crei, sia per te che per un cliente.

Abbiamo già la possibilità di aggiungere icone social direttamente nell'intestazione e nel piè di pagina di un sito Web con il personalizzatore del tema Divi. Ma se non è quello che stai cercando, questo tutorial potrebbe aiutarti perché in molti casi; le persone preferiscono avere le icone social nel loro menu principale invece dell'intestazione o del piè di pagina del loro sito web.

Ti mostreremo esattamente come aggiungerli, come personalizzarli e come aprirli in una nuova scheda. Queste sono tutte cose che devi davvero sapere in modo che le icone social nel tuo menu principale possano portare valore aggiunto a tutto il tuo sito web.

Perché aggiungere icone social al menu principale?

Siti web e canali di social media sono in molti casi complementari. Non tutti i contenuti condivisi su un sito web vengono visualizzati sui canali dei social media e viceversa. Ecco perché promuovere il tuo sito Web sui tuoi canali di social media e i tuoi canali di social media sul tuo sito Web non sono rari e francamente; altamente incoraggiato.

Vuoi che le persone interagiscano con la tua azienda o il tuo marchio nel modo a loro più familiare. Il tuo sito web è di solito " territorio sconosciuto " per loro. La barriera di contattarti direttamente tramite il tuo sito Web potrebbe quindi essere più grande rispetto ai canali dei social media. La maggior parte delle persone che visitano la tua pagina Facebook o Twitter sono già integrate nelle piattaforme e la sensazione di comfort può influenzare positivamente il loro comportamento.

Ecco perché, nel complesso, è molto consigliabile inserire icone social sul tuo sito web. Ma perché condividerli esplicitamente nel tuo menu principale? Abbiamo elencato due dei motivi principali.

Facile da trovare/Menu segue il visitatore durante la sua visita

Quando aggiungi icone social al tuo sito web, vuoi che siano il più visibili possibile. Le persone non dovrebbero impegnarsi per trovare le icone social sul tuo sito web. Ecco dove mettere le icone social nel menu principale può fare la differenza. Il menu principale segue una persona durante l'intero soggiorno sul tuo sito web. Non c'è bisogno di cercare le icone, le icone vengono da te. L'unica cosa che la persona deve fare è cliccare e ci arriveranno.

Il menu principale segue una persona durante l'intero soggiorno sul tuo sito web. Non c'è bisogno di cercare le icone, le icone vengono da te. L'unica cosa che un visitatore deve fare è fare clic su di essi e ci arriveranno.

Azione di attivazione

Come menzionato prima; i canali dei social media e i siti web sono complementari. Lavorano insieme e di solito hanno gli stessi obiettivi, come informare potenziali lead e attirarli verso i servizi o i prodotti offerti. Più si confrontano con loro, più è probabile che si scateni la loro curiosità

Per supportare la connessione tra il sito web ei canali dei social media, è una buona cosa confrontare i visitatori con le icone social il più spesso possibile. Più si trovano di fronte a loro, più è probabile che la loro curiosità venga attivata e più è probabile che alla fine facciano clic su di essi.

Come aggiungere icone social al menu principale di Divi

Iscriviti al nostro canale Youtube

Installa Font Fantastico

Prima di tutto, dobbiamo installare Font Awesome nel nostro sito Web WordPress. Lo faremo aggiungendo del codice CSS nelle Opzioni del tema di Divi.

Apri il tuo sito Web WordPress, vai su Divi > Opzioni del tema > Integrazione e incolla il seguente codice nella sezione <head>: 

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

Font awesome dovrebbe ora essere aggiunto ai caratteri che vengono utilizzati sul tuo sito web. Ora puoi aggiungere queste icone al tuo menu principale seguendo passo dopo passo la parte successiva del nostro post.

Inizia a creare il menu principale

Molto probabilmente, hai già creato il tuo menu principale personalizzato in cui hai elencato tutte le pagine che desideri visualizzare nel menu principale del tuo sito web. Se non l'hai ancora fatto, vai alla pagina "Menu" in Aspetto e crea un nuovo menu.

Quindi, dai un nome al menu, aggiungi le pagine che desideri visualizzare nel menu principale e seleziona l'opzione "Menu principale" di seguito.

Aggiungi icone social

Andando avanti, vogliamo aggiungere le icone social. Quando crei il menu principale, puoi scegliere dove vuoi che le tue icone social vengano visualizzate. Nella maggior parte dei casi, verranno subito dopo le pagine, ma puoi anche metterle prima. Ci sono icone di social media disponibili per tutti i siti Web importanti e più popolari là fuori; da Facebook a Twitter, Instagram, LinkedIn e altro ancora.

Inizia aprendo il seguente collegamento sul sito Web di Font Awesome. Avremo bisogno di questo sito Web per la parte successiva di questo post in cui aggiungeremo le icone manualmente.

Aggiungi icone manualmente

Lo stesso modo di lavorare si applica per ogni icona social che aggiungi al tuo menu principale. Ad esempio, ti mostreremo come aggiungere l'icona di Instagram. Anche per tutte le altre icone che vorresti aggiungere; sappi che è lo stesso modo di lavorare (solo l'icona, il codice HTML e l'URL differiscono di conseguenza).

Apri l'opzione "Collegamenti personalizzati" e vedrai apparire due campi: URL e Etichetta di navigazione. Ovviamente, il campo URL è dove digiti l'URL che conduce un visitatore a uno dei canali dei social media. In questo esempio, vogliamo che l'icona conduca a Instagram, quindi digita semplicemente il tuo URL di Instagram.

Quindi, vai al sito Web Font Awesome nel tuo browser e cerca l'icona di Instagram attraverso la barra di ricerca. Allo stesso modo, puoi cercare Facebook, LinkedIn e qualsiasi altra icona.

Dopo aver cliccato sull'icona di Instagram, vedrai che il sito web fornisce il seguente codice HTML: 

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

Questo è il codice esatto che dobbiamo utilizzare nel campo Etichetta di navigazione, quindi vai avanti e completa il collegamento personalizzato copiando e incollando il codice nel campo.

Ripeti lo stesso processo per ciascuna delle icone social che vuoi visualizzare nel menu principale e dai un'occhiata a come appare sul front-end del tuo sito web.

Cambia l'aspetto delle icone sociali

Modifiche collettive al menu principale (incluse le icone social)

La personalizzazione del tema ti consente di apportare tutte le modifiche all'aspetto che desideri apportare al menu principale in un'unica posizione.

Le modifiche che puoi apportare al menu principale con le opzioni Divi si applicano anche alle icone social. Quando stai dando un certo colore al tuo menu principale, ad esempio, le icone social avranno lo stesso colore. Questo perché stiamo usando un font invece di un'immagine per farlo funzionare.

Puoi apportare tutte queste modifiche che desideri apportare all'aspetto nel Personalizzatore di temi andando su Intestazione e navigazione > Barra dei menu principale. Le modifiche che apporti si applicano in tempo reale e ti danno una buona prospettiva su come vuoi che sia il tuo menu principale.

Apri icone social in una nuova scheda

Questa parte del post è qualcosa in più che puoi fare con le icone social. Probabilmente non vuoi allontanare i tuoi visitatori dal sito web, anche se stanno andando sui tuoi canali di social media. Vuoi mantenere vive entrambe le interazioni il più a lungo possibile aprendo i collegamenti dei social media in una nuova scheda ogni volta che qualcuno fa clic su di essi.

Possiamo facilmente far funzionare l'opzione "Apri in una nuova scheda" su tutte le icone dei social media tornando al menu che abbiamo creato in precedenza. Dobbiamo apportare manualmente tutte le regolazioni a ciascuna delle icone. In questo esempio, apporteremo le modifiche all'icona di Instagram.

Vai avanti ed elimina l'URL che hai fornito nel campo URL e incolla invece il seguente codice nell'URL di navigazione: 

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

Fai la stessa cosa per ciascuna delle icone se vuoi che si aprano in una nuova scheda. Ogni volta che un visitatore fa clic su di essi, si aprirà in una nuova scheda che ti consentirà di mantenere i tuoi visitatori in giro il più a lungo possibile.

Pensieri finali

Questo tutorial ti aiuterà sicuramente a integrare le icone social nel tuo sito Web Divi nel modo desiderato. Puoi personalizzarli e adattarli al resto del tuo menu principale. Se hai domande o suggerimenti; assicurati di lasciare un commento nella sezione commenti qui sotto. Rimarremo in contatto e cercheremo di rispondere a tutte le domande o suggerimenti che hai.

Assicurati di iscriverti alla nostra newsletter e al canale YouTube in modo da non perdere mai un grande annuncio, un consiglio utile o un omaggio Divi!

Immagine in primo piano tramite Oceans / shutterstock.com