Como crear enlaces html para llamar por teléfono

Escrito por Matias Adrian Romero

16 Mar 2020

Todos sabemos que los enlaces nos permiten acceder a un sitio de la red con un simple clic, pero su funcionalidad no se limita solo a eso.

Hoy en día estamos acostumbrados a navegar desde el teléfono movil y podemos aprovechar esa funcionalidad de los enlaces para llamar por teléfono sin tener que copiar y pegar el número.

Esta técnica mejora la experiencia de usuario y además incrementa la cantidad de leads que captas a través de tu web corporativa o tienda online.

Integrarlo en tu página web es realmente fácil, te voy a enseñar distintos métodos y ejemplos para que incorpores los enlaces de llamada y botones CTA.

Cómo agregar un enlace html de llamada

<a href="tel:661403235">661-403-235</a>

  1. La etiqueta href es la que se utiliza para indicar al navegador que se trata de un enlace.
  2. Con =»tel:» le indicamos que se trata de un enlace de llamada.
  3. A continuación, ponemos el número de teléfono sin espacios y entre comillas
  4. Entre los símbolos > < podemos colocar cualquier texto que queramos, ya sea el número de teléfono o mensajes de llamada a la acción como «Llama aquí» «Clic para llamar» «Contacta con nosotros»

Añadir una extensión telefónica

En caso de que dispongamos una o varias extensiones para un mismo número las podemos agregar indicando con la letra «p» justo al final del número de teléfono seguido del número de la extensión, quedaría algo como esto:

<a href="tel:661403235p45">Llámanos</a>

Lo que hace esta funcionalidad es: Primero marca el número de teléfono indicado justo después de la etiqueta tel y después espera un segundo aproximadamente y luego marca la extensión.

Si queremos que en lugar de un segundo lo que espere es un tono, tenemos que sustituir la p por una w.

Agregar un prefijo nacional en código HTML

Para añadir un numero internacional tanto en un código html o en un botón a href callto lo podemos hacer de una manera bastante sencilla, simplemente añadiendo al principio de la etiqueta el símbolo + seguido del prefijo internacional.

<a href="tel:+34661403235">Llámanos</a>

Crear un botón de número de teléfono en el menú de WordPress

Ahora te voy a enseñar cómo poner un link html directamente en el menú de tu WordPress para que te puedan llamar:

1) Desde el escritorio de WordPress accedemos a Apariencia > Menú

añadir boton llamada menu wordpress

2) Seleccionamos el menú donde nos interesa añadir este botón de llamada y añadimos un nuevo elemento al menú, en concreto un enlace personalizado especificando los siguientes campos, por ejemplo:

URL: tel://661403235

Texto de enlace: ¡Llámanos! 661 403 235 ✆

crear link html tel menu wordpress

3) Guardamos los cambios y actualizamos la página. Con esto ya tienes añadido un botón de llamada directamente en tu menú:

boton con link html

Una vez hayas añadido el botón, si quieres aplicarle distintos estilos y formatos te recomiendo que le eches un vistazo a este post para personalizar menús con Divi

Cómo poner una imagen con link html

Otra opción bastante interesante es añadir este enlace a una imagen o icono para que actué como CTA.

Para ello debemos primero añadir la imagen, ya sea utilizando Gutenberg, Divi, elementor o el maquetador que utilices.

A continuación, tienes que indicarle que enlace a una URL personalizada e indicarle la URL, en este caso el formato es el mismo que cuando lo añadimos en el menú:

tel://661403235

poner imagen con link html

La imagen con enlace la podemos añadir en una entrada, una página o incluso en el sidebar de nuestra web.

Como poner enlaces en html para telefonos en la cabecera, pie de pagina o sidebar

Atención: Estos cambios los debes aplicar siempre utilizando un tema hijo ya que de lo contrario cuando haya una actualización del tema se te borrarán estas modificaciones.

Para incluir estos callto link html debemos ir a nuestro panel de administración: Apariencia > Editor de temas

Debemos añadir el código html que hemos visto antes:

<a href="tel:661403235">661-403-235</a>

Si lo queremos añadir en la cabecera tenemos que buscar el archivo header.php y añadir ese código dentro de la etiqueta. Actualizamos los cambios y cargamos de nuevo la página.

link tel html en la cabecera
crear botones html en wordpress

En caso de que queramos la funcionalidad callto href en el pie de página tenemos que repetir ese mismo proceso, pero editando el archivo footer.php

Podemos agregar un enlace tel link en la barra lateral utilizando los Widgets de WordPress, para ello vamos a: Apariencia > Widgets

Arrastramos el modulo HTML personalizado hacia la barra lateral e incluimos el código en cuestión.

crear link html tel menu wordpress

Como añadir un link html para llamadas y email en Divi

En este Blog somos tremendamente fans de Divi y sus funcionalidades. Si utilizas este theme (Y si no es así, te lo recomiendo) puedes añadir enlaces de llamada y de email en la cabecera de tu web de manera muy sencilla y sin tocar código.

Para añadir estos campos tenemos que ir a: Personalizar temas > Cabecera > Elementos del menú

añadir boton de llamada en la cabecera divi

Existen muchas opciones a la hora crear enlaces y botones html para llamar por teléfono. Sin duda estos son una gran funcionalidad que toda página web corporativa o tienda online debería incluir.

Y tú ¿Has probado estos métodos? ¿Conoces alguno distinto? Te leo en los comentarios 🙂

4.5/5 (2 Reviews)

Elegant Themes

Celebra su 12 aniversario 🥳

No te vayas aún, hay mucho más…

Tipos de páginas web

Tipos de páginas web

Descubre todos los tipos de sitios webs que existen en Internet y las diferentes maneras de clasificar una página según sus características.

Crear y modificar cabeceras Divi

Crear y modificar cabeceras Divi

Con la nueva actualización de Divi 4 y su constructor de temas puedes crear y personalizar la cabecera de tu web de una manera muy profesional

Como instalar Divi

Como instalar Divi

Divi es el tema preferido por la mayoria de webmasters que trabajan con WordPress. En este articulo te explico paso a paso como instalarlo en tu web

0 comentarios

Enviar un comentario

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

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

web design agency 2

¿Quieres triunfar con tu página web?

Suscribete y recibe las mejores guías de Diseño Web con WordPress

¡Enhorabuena! Te has suscrito correctamente a nuestro boletín de articulos de diseño web.

Chat Whatsapp
Acepte nuestra política de privacidad primero para comenzar una conversación.