Come progettare un social media pop-out Segui la barra dei pulsanti sul modello di pagina in Divi

I pulsanti Segui sui social media continuano a essere un'aggiunta popolare a qualsiasi sito web. Le aziende e gli individui utilizzano questi collegamenti per reindirizzare gli utenti alle loro pagine di social media nella speranza che i visitatori li seguano o si iscrivano al loro canale. Normalmente, vedi questi pulsanti in una pagina di contatto, nella barra laterale o nel piè di pagina di un sito web.

In questo tutorial, ti mostreremo come progettare una barra dei pulsanti per seguire i social media pop-out su un modello di pagina in Divi. Ciò darà a quei social media follow button una maggiore visibilità sul tuo sito senza essere una distrazione. Inoltre, con Divi's Theme Builder, crei facilmente un modello di pagina che include questi pulsanti per qualsiasi (o tutte) le pagine del tuo sito.

Facciamo un salto e iniziamo!

Sbirciata

Ecco una rapida occhiata ai pulsanti per seguire i social media creati in questo tutorial.

Scarica GRATUITAMENTE il modello di pagina pop-out della barra dei pulsanti per seguire i social media

Per mettere le mani sul modello di pagina della barra dei pulsanti Segui social media da questo tutorial, devi prima scaricarlo utilizzando il pulsante in basso. Per accedere al download dovrai iscriverti alla nostra mailing list Divi Daily utilizzando il modulo sottostante. Come nuovo abbonato, riceverai ancora più bontà Divi e un pacchetto Divi Layout gratuito ogni lunedì! Se sei già nell'elenco, inserisci semplicemente il tuo indirizzo email qui sotto e fai clic su download. Non sarai "riabbonato" o riceverai email extra.

Scarica i file

Scarica gratis

Iscriviti alla newsletter Divi e ti invieremo via email una copia dell'ultimo Divi Landing Page Layout Pack, oltre a tonnellate di altre incredibili risorse Divi gratuite, suggerimenti e trucchi. Seguici e diventerai un maestro Divi in ​​pochissimo tempo. Se sei già iscritto, digita il tuo indirizzo e-mail qui sotto e fai clic su download per accedere al pacchetto di layout.

SCARICA

Ti sei iscritto con successo. Controlla il tuo indirizzo e-mail per confermare la tua iscrizione e ottenere l'accesso ai pacchetti di layout Divi settimanali gratuiti!

Per importare il layout nella tua pagina, estrai semplicemente il file zip e aggiungi uno dei file json nel Divi Theme Builder utilizzando l'opzione Theme Builder Portability.

Andiamo al tutorial, vero?

Cosa ti serve per iniziare

Per iniziare, dovrai installare e attivare il tema Divi. Assicurati di avere l'ultima versione di Divi.

Avrai anche bisogno di almeno una pagina creata con Divi Builder a scopo di test per assegnare il nuovo modello a quella pagina per mostrare il risultato.

Dopodiché, sei pronto per partire.

Creazione di un social media pop-out Segui la barra dei pulsanti per un modello di pagina in Divi

Creazione di un nuovo modello

Dal dashboard di WordPress, vai a Divi > Generatore di temi. Quindi fare clic sulla casella "Aggiungi nuovo modello" per creare un nuovo modello.

Assegna il modello alla pagina o alle pagine in cui desideri visualizzare la barra promozionale.

Sul nuovo modello, fai clic sull'area "Aggiungi corpo personalizzato", quindi seleziona "Crea corpo personalizzato".

Quindi seleziona l'opzione "Crea da zero".

Creazione della barra dei pulsanti Segui sui social media

Crea nuova riga

Per cominciare, aggiungiamo una riga a una colonna al modello.

Aggiungere il modulo Pulsanti Segui social media

Nella riga a una colonna, aggiungi un modulo di follow sui social media.

Aggiungi social network

Sotto le impostazioni di follow dei social media, aggiungi tutti i social network che desideri visualizzare. Per aggiungere una nuova rete, fare clic sull'icona grigia con il segno più Aggiungi nuovo social network, quindi selezionare la rete dall'elenco.

Dovrai anche aggiungere l'URL del collegamento per la pagina dei social media a cui desideri reindirizzare i visitatori. Per fare ciò, fai clic sull'icona delle impostazioni sul social network e aggiorna l'URL del collegamento all'account.

Aggiungi modulo pulsante

Dopo aver terminato le reti di moduli segui i social media, siamo pronti per aggiungere un modulo pulsante. Questo pulsante sarà quello su cui l'utente passa il mouse per rivelare la barra a comparsa. Vai avanti e aggiungi il modulo pulsante, quindi trascinalo sopra il modulo follow sui social media.

Contenuto del pulsante

Quindi aggiorna il contenuto del pulsante come segue:

• Testo del pulsante: Segui
• URL collegamento pulsante: #

Stili e posizionamento dei pulsanti

Quindi aggiorna le impostazioni di progettazione del pulsante come segue:

• Dimensione del testo del pulsante: 16 px
• Colore del testo del pulsante:
• Larghezza bordo pulsante: 0px
• Spaziatura tra le lettere dei pulsanti: 1px
• Carattere pulsante: Montserrat
• Carattere pulsante Peso: grassetto
• Icona pulsante: freccia destra (vedi screenshot)
• Margine: 100% a sinistra
• Imbottitura: 100px in basso

Quindi aggiungi il seguente CSS personalizzato all'elemento principale:

position: absolute;

Impostazioni riga

Una volta che il pulsante è stato disegnato e pronto per l'uso, aggiorna le impostazioni della riga come segue:

• Colore di sfondo: #ffffff
• Larghezza grondaia: 1
• Larghezza: 100%
• Larghezza massima: 64 pixel
• Imbottitura: 24px in alto, 16px in basso, 16px a sinistra

Ombra della casella di riga

• Box Shadow: vedi screenshot
• Forza sfocatura ombra scatola: 0px
• Forza sfocatura ombra scatola: 30 px
• Colore ombra (desktop): trasparente
• Colore ombra (al passaggio del mouse): rgba(0,0,0,0.2)

Posizionamento della riga

Quindi aggiungi il seguente CSS personalizzato all'elemento principale della riga:

position: fixed;
top: calc(33.33vh - 55px);
left: 0;

Ciò posizionerà la riga in una posizione fissa a un terzo della distanza dalla parte superiore del browser.

Effetto pop-out al passaggio del mouse con margini personalizzati

Ora aggiungi i seguenti valori di margine per aggiungere la funzionalità di comparsa al passaggio del mouse.

• Margine (desktop): -64px sinistro
• Margine (hover): 0px a sinistra

Questo si occupa della barra dei pulsanti di follow dei social media. Ma dobbiamo ancora completare il modello creando il modulo di contenuto del post necessario.

Aggiunta del modulo del contenuto del post al modello

A questo punto la barra dei pulsanti per seguire i social media è pronta per essere utilizzata. Ma poiché questo è un modello, dobbiamo assicurarci di aggiungere il modulo del contenuto del post per visualizzare il contenuto delle pagine che utilizzano questo modello.

Aggiungi nuova riga con modulo contenuto post

Sotto la riga contenente la barra dei pulsanti per seguire i social media, aggiungi una nuova riga a una colonna.

Quindi aggiungi il modulo del contenuto del post alla riga.

Attualmente, il modulo del contenuto del post sarà limitato alla larghezza predefinita della riga principale. Dobbiamo modificare la larghezza e il riempimento della riga in modo che occupi l'intera larghezza del browser senza spazi vuoti. Questo è importante perché il modulo del contenuto del post determina l'area che devi creare una pagina utilizzando Divi Builder.

Aggiorna quanto segue:

• Larghezza: 100%
• Larghezza massima: 100%
• Imbottitura: 0px in alto, 0px in basso

Ora aggiorna le impostazioni della sezione come segue:

• Imbottitura: 0px in alto, 0px in basso

Questo lo fa. Ora assicurati di salvare il layout prima di uscire dall'editor. Quindi salva le modifiche anche per il generatore di temi.

Risultato finale

Per vedere i risultati finali, visita la pagina a cui è assegnato il modello. Ecco come apparirà la barra dei pulsanti per seguire i social media pop out.

Pensieri finali

Questa barra dei pulsanti per seguire i social media aiuterà sicuramente a portare in primo piano questi importanti social network. La funzionalità di pop-out assicurerà che le icone non rappresentino una distrazione per gli utenti. E puoi aggiungere la barra a qualsiasi modello di pagina usando il Theme Builder. Spero che questa sia una grande aggiunta al tuo prossimo progetto!

Non vedo l'ora di sentirti nei commenti.

Saluti!