Come creare una barra dei contatti Divi Mobile con clic per chiamare, e-mail, SMS e collegamenti di direzione

Con il mondo che vive sui dispositivi mobili, ha senso fornire link di contatto cliccabili sul tuo sito web che sfruttano l'esperienza mobile. Questi link di contatto, come un link click-to-call, possono avviare una chiamata sul tuo cellulare con un solo clic. Altri, come un link alle indicazioni stradali, possono aprire le indicazioni stradali per un indirizzo commerciale in Google Maps. Questi sono davvero convenienti per gli utenti e un must per alcune aziende.

In questo tutorial, ti mostreremo come creare una barra dei contatti mobile Divi con collegamenti Click-to-Call, e-mail, SMS e indicazioni stradali. Per fare ciò utilizzeremo il Divi builder per progettare la barra e i pulsanti su un piè di pagina globale. Quindi aggiungeremo URL personalizzati a ciascun collegamento di contatto per portare a casa la funzionalità di cui abbiamo bisogno.

Iniziamo!

Sbirciata

Ecco una rapida occhiata al design che costruiremo in questo tutorial.

Scarica il layout GRATUITAMENTE

Per mettere le mani sui disegni di questo tutorial, dovrai 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!

Come aggiungere il download del modello di barra dei contatti fissa al tuo sito Divi

ATTENZIONE!: L'aggiunta di questo modello sovrascriverà il modello di sito Web predefinito (se ne hai uno) sul tuo sito Divi. Ti suggeriamo di aggiungerlo a un sito di prova in modo da non rovinare nulla su un sito live.

Per importare il modello di barra del piè di pagina fisso nel tuo sito Web, decomprimi il file zip di download per accedere al file JSON.

Quindi vai al dashboard di WordPress e vai a Divi> Theme Builder.

Quindi fai clic sull'icona della portabilità in alto a destra nella pagina.

All'interno del popup di portabilità, scegli il file JSON che hai appena decompresso e seleziona l'opzione "Scarica il backup prima dell'importazione", nel caso in cui in precedenza avessi qualcosa nel modello di sito Web predefinito che non volevi sovrascrivere.

Quindi fare clic sul pulsante Importa.

Infine, salva le modifiche al Theme Builder e visualizza una pagina live per vedere la barra del piè di pagina fissa.

Ora, passiamo al tutorial, vero?

Parte 1: Creazione di un piè di pagina globale

Per questo tutorial, aggiungeremo una barra dei contatti mobile al piè di pagina globale utilizzando Divi Theme Builder. Inizia navigando su Divi > Generatore di temi. Quindi fai clic sull'area del piè di pagina globale all'interno del modello di sito Web predefinito. Dal menu a discesa, seleziona Crea piè di pagina globale.

NOTA: se hai già un piè di pagina globale, puoi aprire modifica il piè di pagina globale e aggiungere la barra dei contatti oltre al piè di pagina corrente.

Scegli l'opzione "Crea da zero".

Parte 2: Creazione della barra dei contenuti fissa

All'interno dell'editor del layout del piè di pagina globale, inizia il processo di progettazione aggiungendo una riga di una colonna alla sezione predefinita.

Impostazioni della sezione

Prima di iniziare ad aggiungere moduli, apri le impostazioni della sezione e assegnagli un'altezza impostata come segue:

• Altezza: 80 px

Questo è importante per creare lo spazio nella parte inferiore della pagina in cui la riga fissa alla fine si fermerà. Elimineremo anche l'imbottitura superiore e inferiore predefinita.

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

Impostazioni riga

Ora che la nostra sezione è pronta, siamo pronti a personalizzare la riga per fungere da barra di contatto fissa. Apri le impostazioni per la riga e quindi aggiorna quanto segue:

Sfondo

• Colore di sfondo: #751136

Taglia

• Larghezza grondaia: 1
• Larghezza: 100%
• Larghezza massima: 100%
• Altezza: eredita

Anche se la riga sarà fissa, vogliamo che l'altezza della riga corrisponda all'altezza della sezione padre in modo che lo spazio nella parte inferiore della pagina contenga adeguatamente la riga. Per fare ciò dobbiamo digitare il testo "eredita" per l'altezza.

Spaziatura

• Imbottitura: 0px in alto, 0px in basso, 15% a sinistra, 15% a destra

CSS personalizzato

Vogliamo assicurarci che il contenuto all'interno della riga rimanga allineato verticalmente e che le colonne non si rompano sui dispositivi mobili. Per fare ciò, aggiungi il seguente CSS personalizzato all'elemento principale della riga:

display:flex;
flex-wrap:nowrap;
align-items:center;

Posizionamento fisso

Per fissare la riga in modo che galleggi nella parte inferiore dello schermo, dobbiamo darle una posizione fissa nella posizione in basso a sinistra come segue:

• Posizione: fissa
• Posizione: in basso a sinistra
• Indice Z: 99999

Parte 3: creazione di link Call-to-Click, e-mail, SMS e indicazioni

Ora che la nostra barra dei contatti è completa, siamo pronti per aggiungere i pulsanti di contatto cliccabili insieme agli URL personalizzati.

Progettazione del pulsante Click-to-Call

Il primo pulsante di contatto che creeremo è il pulsante click-to-call. Per crearlo, aggiungi un nuovo modulo blurb alla colonna.

Contenuto

Nella scheda del contenuto, aggiungi un titolo e un'icona al blurb come segue:

• Titolo: Call
• Usa l'icona: S
• Icona: telefono

Sfondo

Gli dai un colore di sfondo bianco:

• Colore di sfondo: #ffffff

Impostazioni di progettazione

Passa alla scheda Design e aggiorna le impostazioni come segue:

Icona

• Colore icona: #751136
• Usa la dimensione del carattere dell'icona: S
• Dimensione carattere icona: 2em

Carattere del titolo

• Stile del carattere del titolo: TT
• Allineamento del testo del titolo: al centro
• Colore del testo del titolo: #751136
• Dimensione del testo del titolo: 1em

Dimensione del corpo del testo

Se hai notato, abbiamo ridimensionato gli elementi del blurb usando l'unità di lunghezza "em". Questo è relativo alla dimensione del corpo del testo. Pertanto, la regolazione della dimensione del corpo del testo del blurb (anche se non ha il testo del corpo visualizzato) regolerà la dimensione di tutti gli elementi del blurb con l'unità di lunghezza em. Questo è semplicemente un modo conveniente per cambiare la dimensione del pulsante andando avanti senza dover regolare ogni elemento individualmente.

Aggiorna il corpo del testo come segue:

• Dimensione del testo del corpo: 12px

Taglia

Assegna al blurb un'altezza e una larghezza impostate come segue:

• Larghezza: 4.5em
• Allineamento del modulo: centro
• Altezza: 4.5em

Imbottitura e Angoli

• Imbottitura: 0.5em in alto

Scatola ombra

• Box Shadow: vedi screenshot
• Posizione orizzontale dell'ombra del riquadro: 0px
• Posizione verticale dell'ombra del riquadro: 2px
• Colore ombra: rgba (255,255,255,0,55)

CSS personalizzato

Per centrare verticalmente il contenuto del modulo blurb, aggiungi il seguente CSS personalizzato all'elemento principale:

display:flex;
align-items:center;

Ed elimina la spaziatura sotto l'icona blurb aggiungendo la seguente immagine Blurb:

margin-bottom: 0.3em;

Aggiunta dell'URL del collegamento alla chiamata

Per aggiungere un URL di collegamento alla chiamata che avvierà una chiamata su un telefono cellulare, aggiungere il numero dopo il prefisso "tel:".

• URL collegamento modulo: tel:555-555-5555

Progettazione del pulsante e-mail

Per creare il pulsante e-mail, duplica l'intera colonna.

Aggiunta dell'icona dell'e-mail e dell'URL del collegamento

Quindi aggiorna il blurb duplicato nella colonna 2 con un nuovo titolo e icona.

Per aggiungere un URL di collegamento alla chiamata che avvii un'e-mail su un'app mobile, aggiungi l'indirizzo e-mail dopo il prefisso "mailto:".

• URL collegamento modulo: mailto:[email protected]

Progettazione del pulsante SMS (messaggio di testo)

Per creare il pulsante SMS, duplica la colonna 2.

Aggiunta dell'icona SMS e dell'URL del collegamento

Quindi aggiorna il blurb duplicato nella colonna 2 con un nuovo titolo e icona.

Per aggiungere un URL di collegamento alla chiamata che avvii un'e-mail su un'app mobile, aggiungi l'indirizzo e-mail dopo il prefisso "sms:".

• URL collegamento modulo: sms: +155555555555

Progettazione del pulsante delle indicazioni stradali

Per creare il pulsante SMS, duplica la colonna 3.

Aggiunta dell'icona delle indicazioni stradali e dell'URL del collegamento

Quindi aggiorna il blurb duplicato nella colonna 3 con un nuovo titolo e icona.

Per aggiungere un URL di collegamento alla chiamata che avvierà le indicazioni stradali tramite Google Maps, utilizza queste strutture URL di direzione.

Per questo tutorial, aggiungeremo un collegamento alle indicazioni stradali che genererà indicazioni dalla posizione corrente dell'utente a GooglePlex a Mountain View, CA.

• URL collegamento modulo:

  https://www.google.com/maps/dir/?api=1&destination=1600+amphitheatre+pkwy+mountain+view+CA

Per aggiungere il tuo indirizzo all'URL, sostituisci il testo dopo "destination=" nell'URL, assicurandoti di separare le parole con i simboli più ("+").

Fare clic sul pulsante dovrebbe darti qualcosa di simile a questo ...

Nascondi sezione sul desktop

Poiché vogliamo che la barra dei contatti venga visualizzata solo sui dispositivi mobili, possiamo disabilitare l'intera sezione sul desktop. Per fare ciò, apri le impostazioni della sezione e aggiorna quanto segue:

• Disabilita su: desktop

Risultati finali

Altri link di contatto

Con HTML5, non sei limitato ai numeri di telefono. Puoi aggiungere altri inviti all'azione come e-mail, messaggistica, fax, ecc. I protocolli HTML5 includono:

tel: – fare una telefonata
mailto: – apri un'app di posta elettronica
callto: apri Skype
sms: – inviare un messaggio di testo
fax: – invia un fax

E se lo desideri, puoi anche aggiungere un link Waze mirato per l'URL delle indicazioni stradali.

Pensieri finali

La barra dei contatti sembra essere un'ottima aggiunta a qualsiasi sito Web aziendale che desideri rendere conveniente per gli utenti contattarli da un dispositivo mobile. E una volta che hai familiarizzato con le strutture degli URL dei link, sei pronto per qualsiasi tipo di link di contatto che desideri.

Per ulteriori informazioni, consulta il nostro post sui collegamenti telefonici.

Non vedo l'ora di sentirti nei commenti.

Saluti!