Molti siti Web aziendali mostrano un numero di telefono in modo che i loro clienti possano contattarli. Quando i desktop erano il modo più popolare per accedere ai siti, gli utenti prendevano nota del numero di telefono e chiamavano da un dispositivo separato. Naturalmente, la maggior parte degli utenti ora accede al sito Web e effettua la telefonata dallo stesso dispositivo. Questo apre l’opportunità di aggiungere un collegamento di chiamata – la creazione di un numero di telefono HTML che è cliccabile.,
In questo articolo, daremo un’occhiata a come aggiungere un link di chiamata e alcuni altri link cliccabili come e-mail e altri CTA.
Iscriviti al nostro canale Youtube
Come funzionano i collegamenti di chiamata
Fare un numero di telefono cliccabile è facilmente fatto con HTML. HTML5 include protocolli come tel: e mailto: che i browser possono utilizzare. I browser rispondono in modo diverso a questi protocolli. Alcuni lanceranno l’app del telefono e aggiungeranno il numero al display mentre aspettano di fare clic sul pulsante di chiamata. Altri faranno la chiamata, mentre altri chiederanno se va bene prima.,
Dal momento che è HTML, è possibile aggiungere i protocolli in qualsiasi punto del sito tra cui l’intestazione, piè di pagina, barre laterali, all’interno del contenuto di post e pagine, e all’interno di widget.
Aggiunta di un numero di telefono HTML Chiama il link al tuo sito Web
Aggiungi il codice come testo nella posizione in cui vuoi che appaia il link:
<a href="tel:123-456-7890">123-456-7890</a>
Href=tel: crea il link di chiamata. Questo indica al browser come utilizzare il numero.
“Tel: 123-456-7890 “crea il numero di telefono HTML. Il numero tra virgolette è il numero che chiamerà.,
Il numero all’interno dei tag>< è la parte visiva e può essere qualsiasi cosa tu voglia includere il numero di telefono, una riga di testo come “Clicca per chiamare” o “Chiama ora”, o qualsiasi altra chiamata all’azione che desideri. Dovrebbe essere descrittivo di cosa succederà quando fanno clic.,
La visualizzazione di un messaggio al posto del numero sarebbe simile a questa:
<a href="tel:123-456-7890">CLICK TO CALL</a>
I visitatori vedranno il testo ma quando fanno clic su di esso vedono la schermata di composizione dei loro telefoni con il tuo numero pronto per fare clic sul pulsante di chiamata.
Aggiunta di un’estensione
Alcuni numeri di telefono hanno un’estensione. È possibile aggiungere il codice che creerà una breve pausa prima di comporre il numero di estensione. L’aggiunta di P davanti all’estensione aggiungerà una pausa di un secondo., Il codice potrebbe essere simile a questo:
<a href="tel:123-456-7890p123">CLICK TO CALL</a>
Questo compone il numero, attende un secondo e quindi compone l’estensione.
Puoi aspettare un segnale di linea usando w invece di p.
Aggiunta di codici paese
I codici paese possono essere aggiunti includendo a + insieme al codice del tuo paese prima del numero di telefono., Un esempio potrebbe essere simile a questo:
<a href="tel:+1123-456-7890">123-456-7890</a>
Aggiunta di microdati per SEO locale
Una delle mie comodità preferite di portare in giro uno smartphone è quando cerco un’attività locale e il risultato in Google mi dà un numero di telefono cliccabile. Posso fare clic sul numero per effettuare la chiamata senza doverlo scrivere o provare a memorizzarlo. Questa funzione è ora una necessità. Fortunatamente, puoi aggiungerlo al tuo sito Web in modo che Google possa fornire il tuo numero di telefono nelle ricerche locali.
Questo viene fatto con microdati., Microdata informa i motori di ricerca che i numeri sono un numero di telefono in modo che siano mostrati come un link di chiamata cliccabile. È possibile creare questo arricchendo il markup con alcuni tag per le ricerche locali.
Ad esempio, il codice potrebbe essere simile a questo:
Altre chiamate all’azione
Con HTML5, non sei limitato ai numeri di telefono. È possibile aggiungere altre chiamate all’azione come e-mail, messaggi, fax, ecc., HTML5 protocolli includono:
- tel: – effettuare una chiamata telefonica
- mailto: – aprire un’app di posta elettronica
- callto: apri Skype
- sms: inviare un messaggio di testo
- fax: – inviare un fax
Tutti questi protocolli sono utilizzati nello stesso modo come abbiamo visto sopra. Diamo un’occhiata ad alcuni esempi.
Aggiungere il codice alla tua pagina di contatto
Uno dei posti migliori per aggiungere un link di chiamata è all’interno delle tue informazioni di contatto sulla tua pagina Contattaci.,
Sia che tu stia usando l’editor Classico o il nuovo editor Gutenberg, dovrai visualizzare la versione testuale della pagina. Nell’editor classico fare clic sulla scheda Testo. In Gutenberg, fare clic sui tre punti in alto a destra e selezionare Editor di codice.
Aggiungi il codice al posto del tuo numero di telefono.
Esci dall’editor di codice o Visualizza l’anteprima della pagina e vedrai che il tuo numero di telefono è ora un link cliccabile.,
la Creazione di Codice per un Collegamento e-Mail o URL
Il codice HTML per email mailto: L’indirizzo email è stato aggiunto alla fine, come:
Proprio come il collegamento telefonico, è possibile utilizzare visual porzione di aggiungere un messaggio, ad esempio:
< href="mailto: "; Click here to send me an email</a>
Ecco un esempio dalla Spa layout pack nella pagina dei contatti. Ho aggiunto un modulo blurb con un’icona e il testo invia una e-mail. Ho selezionato la scheda Testo e aggiunto l’email HTML. Il testo è ora cliccabile e aprirà la tua app di posta elettronica.,
Aggiunta di codice per aprire gli URL
Si può avere l’HTML per aprire qualsiasi URL che si desidera. Questo è buono se si desidera inviare i lettori a pagine per iscrizioni alla newsletter, eventi,ecc. Per collegarli, il tuo codice HTML includerà l’URL. Ad esempio:
<a href=" http://MySampleSite.com/SamplePage/"> See the sample page>
Ho aggiunto un altro blurb con il codice per vedere la pagina degli eventi.
Disabilita su desktop e tablet
Un problema con i collegamenti di chiamata è che non sono utili per desktop o tablet., È possibile risolvere questo problema con Divi creando moduli specifici per ciascun tipo di dispositivo e quindi disabilitandoli sugli altri dispositivi.
Qui, ho creato due moduli con il numero di telefono: uno include un numero di telefono HTML e l’altro no. Ho disabilitato quello con il numero cliccabile su tablet e desktop, quindi non vedranno mai il link. Ho anche disabilitato il modulo senza il link per i telefoni, quindi gli utenti del telefono vedranno solo il modulo con il link.
Aggiunta del codice all’intestazione o al piè di pagina
È possibile aggiungere il codice all’intestazione o al piè di pagina utilizzando l’editor del tema., Utilizzare sempre un tema figlio o il codice PHP verrà sovrascritto quando si aggiorna il tema. Ciò richiederà uno stile CSS per avere un bell’aspetto.
Nella Dashboard, vai su Aspetto > Editor > Intestazione del tema (o piè di pagina del tema). Inserire il codice all’interno del <corpo> porzione di codice. Ho cercato un tag finale </a>, ho fatto clic su invio per aggiungere alcune righe extra e incollato nel mio codice., Potete vedere il codice qui sulle linee 28 e 29.
Ecco come appare quando ho inserito il link di chiamata e il link e-mail nell’intestazione del tema Twenty Nineteen. È lì e funziona, ma non è molto carino. Questo è risolvibile aggiungendo colore e spazio margine in modo che si distinguano l’uno dall’altro. Naturalmente, questo è fatto in CSS.
Styling dei collegamenti
È necessario aggiungere codice al campo CSS aggiuntivo nel Customizer.
Il tuo codice potrebbe essere simile a questo:
Questo dice al CSS come modellare il testo per tel: e mailto:., Cambia il carattere del numero di telefono in marrone, il carattere e-mail arancione e aggiunge un piccolo margine a destra di ciascun collegamento.
Il CSS funziona ovunque il codice sia incluso all’interno di widget, post, ecc. È anche possibile utilizzare le icone al posto del testo.
Aggiungere il codice al menu secondario Divi
Divi può includere il tuo numero di telefono ed e-mail nel menu secondario sopra l’intestazione. Il pulsante e-mail è già cliccabile per impostazione predefinita, ma il numero di telefono non lo è., Il numero di telefono può essere trasformato in un collegamento di chiamata utilizzando un numero di telefono HTML simile che abbiamo usato negli esempi precedenti.
selezionare il Tema Customizer > Intestazione & Navigazione > Elementi di Intestazione. Questo ti darà una casella di testo in cui puoi aggiungere il tuo numero di telefono. Fortunatamente, non sei limitato a soli numeri. È inoltre possibile aggiungere HTML. Ho aggiunto l’HTML dagli esempi precedenti. Ho anche aumentato la dimensione del carattere del numero di telefono per renderlo più facile da vedere per le immagini.,
Puoi rendere ovvio che è cliccabile aggiungendo un messaggio alla parte visiva del link. È possibile sostituire il numero con il messaggio o aggiungere il messaggio alla fine del numero. Potrebbe assomigliare a questo:
<a href="tel:123-456-7890">123-456-7890 CLICK TO CALL</a>
Questo esempio mostra solo il testo.
In questo, ho aggiunto il numero di telefono insieme al testo.
Test su mobile
Consiglio di testare i collegamenti con i dispositivi mobili per assicurarmi che funzioni., Se non si ha accesso a uno smartphone è possibile utilizzare gli strumenti di sviluppo di Google Chrome.
Fai clic con il pulsante destro del mouse sulla tua homepage e seleziona Ispeziona. Nell’angolo in alto a sinistra dello schermo, vedrai un elenco di dispositivi. Seleziona quello per vedere come appare il tuo sito web su quella schermata. Facendo clic sul link numero di telefono HTML dovrebbe aprire una finestra di dialogo che chiede di scegliere un app. Se vedi questo, il link funziona. Consiglio comunque di provarlo su uno smartphone reale, ma questa è una buona indicazione che il link fa qualcosa.,
Aggiunta di collegamenti di chiamata con plugin
Puoi anche aggiungere un collegamento di chiamata alla tua intestazione con un plugin. In genere includono funzionalità per lo styling, l’aggiunta di più chiamate all’azione e la possibilità di essere attivata o disattivata in base al dispositivo del visitatore. Sono anche facili da configurare e utilizzare. Queste sono grandi scelte se non vuoi gestire il codice. Ecco alcune delle migliori opzioni.
Pulsante Chiama ora
Pulsante Chiama ora aggiunge un pulsante click-to-call nella parte inferiore dello schermo per i visitatori mobili. Non viene visualizzato su altri dispositivi., È inoltre possibile aggiungere del testo, se si desidera. Il pulsante è un’icona del telefono, quindi è facile capire a cosa serve. Tutto quello che dovete fare è attivare il pulsante e inserire il proprio numero di telefono. È possibile modificare il comportamento predefinito nelle impostazioni avanzate.
Ulteriori informazioni
Sticky Side Buttons
Questo plugin consente di aggiungere pulsanti che si attaccano al lato del tuo sito web e rimangono sullo schermo quando l’utente scorre. È possibile aggiungere un numero di telefono cliccabile, indirizzo e-mail, icone di social media e posizioni dei negozi., Impostali a destra o a sinistra, scegli gli stili di animazione e rollover, personalizza i colori e scegli dove vengono visualizzati.
Ulteriori informazioni
Speed Contact Bar
Questo aggiunge una barra dei contatti che include link cliccabili per un numero di telefono, numero di fax, un titolo, indirizzo, e-mail, social network e URL personalizzati. Impostare la barra in alto o in basso e regolare la dimensione, il colore, il colore del testo e collegamenti, e come la barra reagisce. È inoltre possibile regolare le dimensioni. è possibile aggiungere più contenuti utilizzando ganci filtro.,
Ulteriori informazioni
Mobile Contact Bar
Questo plugin aggiunge link al tuo sito web quando visualizzato su dispositivi mobili. È possibile scegliere quali collegamenti vengono visualizzati da 13 opzioni tra cui telefono, e-mail, Skype, URL personalizzati e social network. Ha l’integrazione FontAwesome per le icone. Puoi modellare i collegamenti e scegliere la dimensione, il bordo, l’opacità, ecc. Imposta il menu nella parte superiore o inferiore dello schermo. Il menu rimane sullo schermo quando l’utente scorre. Esso comprende anche scorrere verso l’alto e carrello WooCommerce con pulsanti contatore voce.,
Ulteriori informazioni
Considerazioni finali
La popolarità degli smartphone per accedere ai siti web è in aumento ogni giorno. Questa popolarità prende i collegamenti di chiamata dall’essere una semplice convenienza ad una necessità completa. L’aggiunta di numeri di telefono cliccabili può fare la differenza tra gli utenti che chiamano la tua azienda o i tuoi concorrenti. Fortunatamente, non è così difficile creare link cliccabili per aggiungere numeri di telefono HTML alle intestazioni, piè di pagina, widget, pagine e post del tuo sito web WordPress.