En este post te voy a explicar como poner en el número de teléfono que se muestra con Divi, en la barra secundaria del header, un enlace que al hacer clic en el con el móvil, se marque directamente el número para realizar la llamada.
Es decir, que cuando un visitante está viendo tu web hecha con WordPress y Divi en un dispositivo móvil, cuando haga clic en el número de teléfono que aparece en el header pueda llamar directamente. Evitando tener que memorizar o copiar el número para marcarlo en el móvil en la aplicación de llamadas.
Te voy a mostrar cómo hacerlo de diferentes formas y también como puedes hacer un efecto hover sobre el teléfono. Es decir, que al pasar el ratón cambie de color
Algunas cosas de las que te voy a comentar te pueden servir también para otras plantillas de WordPress que no sean Divi (Principalmente lo expliclado en el apartado 2.- que te servirá para cualquier enlace en wordpress, independíentemente de la plantilla)
SUPER DESCUENTO DIVI
ACCEDE A TODOS MIS CURSOS ONLINE POR SOLO 10€/MES
PONER TELÉFONO CON ENLACE DE LLAMADA EN CABECERA DE DIVI
- 1.- Cómo poner un teléfono en el header o cabecera de Divi
- 2.- Vía HTML: Cómo poner un enlace de llamada en el teléfono del header con Divi y HTML
- 3.- Vía JavaScript: Cómo poner un enlace de llamada en el teléfono del header con Divi y Javascript
- 4.- Vía Divi Booster: Cómo poner un enlace de llamada en el teléfono del header con Divi y Divi Booster
- 5.- Cómo hacer efecto hover sobre el teléfono del header de Divi
1.- Cómo poner un teléfono en el header o cabecera de Divi
Para mostrar un número de teléfono en le header o cabecera (barra secundaria) de tu wordpress usando el tema Divi debes ir en la administración de WordPress a: “Divi > Personalizador de temas > cabecera y navegación > Elementos de cabecera”.
En el campo: “NÚMERO DE TELÉFONO” escribe el número de teléfono que quieres que aparezca y después dale al botón “Publicar”
2.- Vía HTML: Cómo poner un enlace de llamada en el teléfono del header con Divi y HTML
En el campo “NÚMERO DE TELÉFONO”, al que has llegado a través de: “Divi > Personalizador de temas > cabecera y navegación > Elementos de cabecera”, que te comentaba en el apartado anterior, en vez de poner el número de teléfono “a secas”, pondrás el siguiente código HTML:
<a href="tel:654235452" rel="nofollow">654 23 54 52</a>
Notas:
- i.- sustituye 654235452 por tu número de teléfono. En este caso debes escribir todos los números seguidos, sin separación entre ellos.
- ii.- Sustituye 654 23 54 52 por tu número de teléfono. En este caso, puedes escribir el número con la separación que quieras entre cada dígito. Este será el número que se mostrará
3.- Vía JavaScript: Cómo poner un enlace de llamada en el teléfono del header con Divi y Javascript
Si por alguna razón no te funcionara el código anterior, te voy a mostrar ahora como hacerlo con código Javascript.
En primer lugar, tendrás que ir a “Divi > Personalizador de temas > cabecera y navegación > Elementos de cabecera” y en el campo “NÚMERO DE TELÉFONO” poner el número de teléfono y después haz clic en el botón “Publicar”. Nota: en este caso es importante que pongas el número de teléfono sin espacios entre números (pon el teléfono con todos los números seguidos)
El código lo tendrás que poner en: “Divi > Opciones del tema > pestaña “Integración” > campo “Agregar código al <head> de su blog”.
Asegúrate que tienes el selector “Habilitar código de la cabecera” activado.
Si ya tiene código puesto, introduce el código que te voy a comentar después del que tienes ya añadido.
El código a añadir es el siguiente:
<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>
Finalmente guarda los cambios
4.- Vía Divi Booster: Cómo poner un enlace de llamada en el teléfono del header con Divi y Divi Booster
Si no quieres introducir código para añadir el enlace con llamada al teléfono del header de Divi, también puedes usar un plugin como Divi Booster que te permitirá añadir el enlace al número de teléfono de manera automática.
QUIERO DIVI BOOSTEREl plugin tiene otras muchas funcionalidades, que puedes ver aquí: Guía de Divi Booster
Primero tendrás que establecer el número de teléfono en el header con Divi, como te he explicado en el primer apartado del post.
Después, tras instalar el plugin Divi Booster, ve en la administración de WordPress a: “Divi > Divi Booster > Header > Top Header” y marca el checkbox: “Make pone number a “click to call” link”.
A continuación, en el campo “Dial this number” introduce el número de teléfono de llamada. Introduce en primer lugar el prefijo de país. Para España es +34. Por lo que un número de España podría ser por ejemplo: +34675677789
Finalmente guarda los cambios
5.- Cómo hacer efecto hover sobre el teléfono del header de Divi
El número de teléfono del header de Divi no quedará resaltado al pasar el ratón sobre él, como sí pasa con el enlace al email que aparece junto al teléfono.
Para solucionarlo puedes utilizar el siguiente código (al pasar el ratón se clareará un poco el enlace):
#et-info-phone:hover {
opacity: 0.7;
-moz-transition: all 0.4s ease-in-out;
-webkit-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
}
El código lo tienes que colocar en: “Divi > opciones del tema > pestaña “General”. En el área de texto “CSS Personalizado”. Si ya tienes código en esa área de texto, pon este nuevo código al final.
Soy Blogger y formador profesional. Me gustaría que este blog te sirviera para conocer más de cerca el mundo del diseño web y de WordPress. Mi proyecto online es una plataforma de formación online tipo membership site, denominada cursotiendaonline.com donde podrás acceder a todos los cursos por solo 10 €/mes
