Come aggiungere icone social al menu principale di Divi

È praticamente impossibile gestire un sito Web di successo senza una presenza dedicata sui social media. Sia che tu scelga che sia Instagram, Twitter, TikTok, Facebook o qualsiasi combinazione di questi e qualsiasi altra cosa, le persone vogliono interagire direttamente con te e il tuo marchio. Assicurati di avere le icone social nel menu principale di Divi è un ottimo modo per incanalare il traffico dal tuo sito web alla rete di tua scelta. È facile e veloce e ti guideremo in ogni passaggio.

Iniziamo!

Anteprima

Desktop

Mobile

Usa Divi Theme Builder per caricare un omaggio di intestazione globale

Per questo articolo, utilizzeremo il pacchetto di layout Tennis Club e l'intestazione/piè di pagina omaggio. Puoi scaricare il pacchetto di layout dal tuo generatore Divi e il pacchetto di intestazione/piè di pagina dal nostro blog. Quando lo scarichi, i file saranno come un archivio .zip . Assicurati di estrarli in modo da avere un file .json da caricare in Divi.

Ora vai nella dashboard di WordPress e trova Divi Theme Builder sotto Divi – Theme Builder . Fare clic sull'icona della freccia su e giù nell'angolo in alto a destra della pagina. Questo apre la modalità Portabilità , seleziona la scheda Importa , trova il file .json per l'intestazione/piè di pagina che hai scaricato e fai clic su Importa modelli Divi Theme Builder .

Quindi vuoi andare nella sezione dell'intestazione del tuo sito. Poiché si tratta di icone social, le inseriremo nell'intestazione globale perché riteniamo che dovrebbero essere su tutte le pagine del tuo sito (se non diversamente specificato).

Dovresti essere all'interno del costruttore ora. Se hai seguito le istruzioni sopra, la nuova intestazione che hai caricato dovrebbe apparire già al suo posto.

Potresti notare che ci sono già icone social qui. Quelle icone social non si trovano nel menu principale Divi, che è ciò a cui stiamo lavorando oggi, tuttavia. Quindi entriamo nel merito, vero?

Aggiungi icone social alla barra dei menu principale

Per prima cosa, cambiamo la struttura riga/colonna. Vogliamo trovare la riga nella sezione #2 (quella in basso con i link Home/Contatti ).

Stiamo selezionando la struttura a due colonne per questo tutorial, ma è quella che funziona meglio per il tuo sito. Dopo averlo scelto, vai nelle impostazioni della riga e vai alla scheda Design . Trova il menu Ridimensionamento e attiva Usa larghezza grondaia personalizzata . Impostare il valore Larghezza grondaia su 1. È possibile immettere il numero o utilizzare il dispositivo di scorrimento per farlo.

Fare clic sul segno di spunta verde per salvare le impostazioni. Quindi torna alle impostazioni della riga. Questa volta, seleziona l' ingranaggio delle impostazioni per la colonna in alto/prima/a sinistra.

Quindi, vai alla scheda Avanzate . Trova l'area CSS personalizzato e fai clic nel campo Elemento principale . All'interno di questo campo, vorrai aggiungere il seguente CSS.

width:80%;

o

width:80%!important;

Potrebbe essere necessario aggiungere il tag !important per applicare uno stile a questo elemento. Va bene. Non dovrebbe creare problemi di prestazioni o codice spaghetti da affrontare perché è un singolo elemento.

Quindi, vai nelle impostazioni Reattività e usa lo stesso codice per riportare la larghezza della colonna al 100% per i dispositivi mobili.

Quindi, ripeti questo passaggio per la seconda colonna. Solo questa volta, imposta il valore predefinito al 20% e mantieni ancora il valore mobile al 100% .

Fatto ciò, salva le modifiche e preparati ad aggiungere e modellare le tue icone dei social media.

Aggiungi il modulo Segui sui social media

Fare clic sull'icona nera + nella colonna 2 per aggiungere un nuovo modulo e scorrere fino a trovare Social Media Follow . Inseriscilo.

Indipendentemente dall'intestazione che stai utilizzando, le icone dei social media predefinite molto probabilmente non corrisponderanno al tuo stile. Né saranno posizionati correttamente. Il prossimo passo sarà quello di modellarli e distanziarli correttamente. All'interno delle impostazioni del modulo Segui social media , vai su Design e poi su Allineamento . Scegli dove vuoi posizionare il modulo.

Stiamo scegliendo la giustificazione a destra per il desktop e quindi entriamo nelle opzioni di Reattività e lo centramo.

Il prossimo passo è scorrere verso il basso nel menu Icona . Scegli il colore dell'icona che desideri. Questa è la f per Facebook, l'uccello per Twitter, la fotocamera per Instagram. Questo non è lo sfondo blu, per esempio.

Il prossimo è il distanziamento. In realtà la cosa principale che deve essere aggiustata è il margine superiore. Applicheremo un margine superiore di 1.5 vw in modo che sia centrato con il testo del menu. Se lo vuoi più o meno per i dispositivi mobili, puoi regolare anche quello.

Ora, fai clic sulla scheda Contenuto e accedi all'icona del singolo social network che desideri personalizzare. Ripeterai questi passaggi per ogni icona che scegli per il tuo sito.

Scorri verso il basso fino a Sfondo e seleziona il colore che desideri che corrisponda al design del tuo sito. Ancora una volta, ricorda che questo cambierà solo lo sfondo di questa particolare icona.

Potresti anche voler cambiare il colore di questa particolare icona. Puoi farlo nella scheda Design e nella sezione Icona , proprio come nel modulo generale stesso. Questa impostazione sovrascriverà quella generale, quindi non devi preoccuparti di interferire con gli altri se desideri colori una tantum.

Quindi, scorri verso il basso fino alla voce Bordo nella scheda Design e al suo interno troverai la Larghezza del bordo . Imposta questo valore su 3px, quindi seleziona un Colore bordo che si distingue dallo sfondo del menu principale Divi.

A questo punto, tornerai alla scheda Contenuto e ripeterai questi passaggi per ogni icona del social network che desideri visualizzare. Se desideri che ciascuna delle icone in questo modulo condivida lo stesso design, puoi semplicemente fare clic con il pulsante destro del mouse su quella che hai progettato e selezionare Copia stili oggetto .

Quindi, fai clic con il pulsante destro del mouse sulle altre reti a cui desideri applicare lo stile e seleziona Incolla stili oggetto .

E questo è tutto! Assicurati di fare clic sul pulsante Salva nell'angolo in basso a destra dello schermo per salvare il layout generale. Quindi, sei al sicuro su X fuori dalla schermata di modifica nell'angolo in alto a destra.

Assicurati che la pagina Divi Theme Builder mostri Tutte le modifiche salvate in alto a sinistra. In caso contrario, fai clic su Salva modifiche . Una volta fatto, il tuo sito sarà live mostrando le icone dei social media nel tuo Divi Primary Menu!

Risultati finali

Ed è a questo che dovrebbero assomigliare i tuoi risultati finali.

Desktop

Mobile

Avvolgendo

Assicurarti che il tuo pubblico possa sempre trovare i tuoi principali social network è un gioco da ragazzi con Divi. In pochi passaggi, puoi regolare uno dei nostri pacchetti di intestazione/piè di pagina gratuiti per includere le tue icone dei social media nel menu principale (o ovunque tu voglia). Buona fortuna!

Cosa ne pensi delle icone dei social media nel menu principale? Dove tendi a posizionarli?