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

2019-03-15T08:09:11+00:00 By |Wordpress|

Artículo de: ayudawordpress.com

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

 

La entrada Tutorial Divi: Cómo hacer clicable el teléfono de la barra secundaria la publicó primero Fernando Tellado en Ayuda WordPress. No copies contenido, no dice nada bueno de ti a tus lectores.

Artículo de: ayudawordpress.com

About the Author: