Tutorial Divi: Cómo hacer clicable el teléfono de la barra secundaria

Una de las utilidades más obvias de la barra secundaria de Divi, la que sale sobre el menú principal, es mostrar el correo electrónico y el teléfono de tu negocio, además de los enlaces sociales, e incluso el carrito de compra si tienes una tienda online.

Y todos estos elementos tienen algo en común, menos el teléfono: son clicables, sirven para hacer algo directamente.

Pues bien, si quieres que el teléfono no sea solo texto, que al hacer clic tenga un enlace al número que hayas puesto para que, sobre todo desde dispositivos móviles, te puedan llamar tus visitantes, aquí tienes como conseguirlo fácilmente.

Activa la barra secundaria

Parece algo de perogrullo pero si no la completas con datos ni la verás. Así que ve al escritorio de WordPress y haz clic en Apariencia > Personalizar.

Una vez en el personalizador de temas ve a Cabecera y navegación > Elementos de cabecera y pon tus datos (email, teléfono, etc).

Guarda los cambios.

Comprobarás, visitando la web, que el email sí es clicable, tiene enlace que abre tu aplicación de correo electrónico, pero no así el teléfono.

Tranqui, ahora aplicamos algo de magia.

La magia de JavaScript

Y la magia la hará un poco de código JavaScript, que será el culpable de convertir ese triste número de teléfono que es solo texto en un enlace clicable que abrirá nuestra aplicación de teléfono en los móviles, o la aplicación que tengamos asociada en ordenadores (Skype por ejemplo).

Para ello ve de nuevo al escritorio de WordPress y de ahí al menú Divi > Opciones del tema > Integration.

añadir código a divi para hacer teléfono clicable
Clic para ampliar

Habilita el código de cabecera y, en la primera caja, la que pone lo de «Agregar código al <head> de su blog», añade el siguiente código:

<script type="text/javascript">
jQuery(document).ready(function(){
var number = jQuery('span#et-info-phone').text();
var tel = "tel:"+ number;
jQuery('span#et-info-phone').text('');
jQuery('span#et-info-phone').prepend('<a href=""></a>');
jQuery('span#et-info-phone a').text(number);
jQuery('span#et-info-phone a').attr('href',tel);
});
</script>

Guarda los cambios y ¡ya está!

Ahora simplemente ve a tu web y comprueba que el teléfono ya tiene enlace clicable, para que te llamen tus futuros clientes.

Teléfono con enlace clicable en Divi
Clic para ampliar

 

VALORA Y COMPARTE ESTE ARTÍCULO PARA MEJORAR LA CALIDAD DEL BLOG…
(6 votos, promedio: 5)

¿Te gustó este artículo? ¡Ni te imaginas lo que te estás perdiendo en YouTube!

5 comentarios en “Tutorial Divi: Cómo hacer clicable el teléfono de la barra secundaria”

  1. Hola Fernando,
    Interesante y práctico como siempre, pero, quería comentarte, yo inserto directamente código html ( 123 456 789) en Apariencia > Personalizar > Cabecera y navegación > Elementos de cabecera. Así el teléfono aparece como clicable.
    Me parece un método más directo y fácil, a no ser que, por algún motivo, no sea buena idea hacerlo así.

    Si hay alguna «contraindicación» dimelo, por favor, ya que yo siempreo lo hago como te comento.
    Muchas gracias.
    Saludos.

  2. Hola Fernando,
    como no podía ser de otra manera viniendo de ti, funciona perfectamente. ¿Podemos dar un paso más?
    Que en el móvil aparezca el icono del teléfono y el icono del mail (sin que se vea el número de teléfono ni la dirección de correo), para que ocupe lo menos posible. Pero que estos iconos sean clicables y vayan a marcar el número de teléfono o se abra el correo.
    ¿Es posible?

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

 

Ir arriba Ir al contenido