Seleccionar página

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


VER CURSOS

 

 

 

 

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”

 

Poner teléfono en la cabecera de la web (header) con Divi

 

 

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á

 

Código HTML enlace teléfono llamar header de web con Divi

 

 

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

 

Código JavaScript para enlace en teléfono de cabecera con Divi para llamarda en móviles

 

 

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 BOOSTER

El 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

 

Poner enlace de llamada en teléfono header con Divi Booster plugin

 

 

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.

 

Resaltar enlace a teléfono en header con Divi cuando se pasa el ratón por encima del número de teléfono

 

Compártelo ya!!
Curso gratis de wordpress y divi

▷LLÉVATE EL CURSO WORDPRESS Y DIVI GRATIS

Aprende a crear una página web con Wordpress y Divi

22 vídeos gratis

Consentimiento

Vé a tu buzón de correo y confirma la suscripción. Si no encuentras el correo de confirmación mira en la carpeta de SPAM.

Abrir chat
¿Dudas sobre mis cursos o servicios?
🙋🏻‍♂️** ¿Alguna duda sobre mis cursos o servicios? Soy Joaquín, cuéntame y te ayudo encantado
**Accede a TODOS mis cursos por solo 10 €/mes desde cursotiendaonline.com