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.
Índice de contenidos
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.
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.
¿Te gustó este artículo? ¡Ni te imaginas lo que te estás perdiendo en YouTube!
Sí señor, muy práctico.
Gracias por tu consejos y ayuda.
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.
Mira, pues no lo había probado, buen apunte.
Es correcto, sencillo y efectivo, problema ninguno
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?
me ha servido, muchas gracias!