Cómo añadir un Botón de Llamar en WordPress

Lo bueno de diseñar con WordPress es que hay muy pocas limitaciones. Actualmente este CMS ha crecido tanto que ya existe un plugin o un truco para hacer todo lo que te imagines. Hoy veremos cómo crear un botón de llamar en WordPress, una funcionalidad que te puede ser muy útil para incrementar las llamadas a tu negocio desde la web.

Para que sirve un botón de llamar en tu web

Tener un botón de llamar en la web puede ser de gran utilidad a los usuarios y mejorar su experiencia durante su navegación en tu web:

• Ofrece un CTA claro
• Promueve la acción
• Es cómodo para el usuario, no tiene que apuntar o copiar el número para llamar más tarde, si no que puede hacerlo pulsando simplemente un botón.
• Ofrece vías de comunicación alternativa al email o a los formularios.

Sin duda es un recurso muy interesante para incorporar en la web, sobre todo aquellos servicios que requieren de contacto previo antes de realizar una compra, como puede ser servicios con citas o reservas.

Antes de contarte todas las alternativas que tienes para incorporar un botón de llamar en WordPress quiero que analices si esta es una solución ideal para tu Web. El botón de llamar es muy útil en aquellas visitas desde dispositivos móviles, sin embargo si se pulsan desde el ordenador te saldrá el siguiente aviso.

Aunque algunos usuarios estén familiarizados con esta funcionalidad puede que otros no tanto. Por eso te recomiendo que antes analices desde qué dispositivos recibes el tráfico a tu web para decantarte o no por este recurso.

Cómo poner un botón de llamar en WordPress

Hay varias opciones para añadir un botón de llamar en WordPress. A continuación yo te voy a explicar varias formas para que tú elijas la que más te conviene. ¿Preparad@? ¡Vamos allá!

Con constructor del tema

Si usas el editor por defecto de Gutemberg u otro constructor como Divi o Elementor posiblemente ya estés familiarizado con la creación de botones. Hacer un botón de llamadas es tan fácil como:

1. Crear un botón
2. Añadir el siguiente fragmento como enlace:

Simplemente tienes que cambiar la parte en azul por el prefijo de tu país y la rosa por el número de teléfono.

¿Parece fácil verdad? Vamos a ver como se hace en cada constructor paso a paso.

Constructor de Gutemberg

1. En el Constructor de Gutemberg es tan fácil como elegir el Widget “botones”.
2. Añade el texto que quieras mostrar.
3. Pulsa en el icono de enlace y escribe «tel:+34666666666» añadiendo tu número de teléfono.

4. Personaliza tu botón en la columna bloque

Constructor Divi

1. Añade un nuevo bloque de botón.

2. En el apartado “texto” añade el texto de tu botón:

3. En el apartado enlace añade el enlace con esta forma «tel:+34666666666».

4. Ve a diseño> botón y pulsa “si” en la opción “usa estilos personalizados para botón». Así podrás cambiar el estilo del botón.

Elementor

A continuación te enseño los pasos para añadir un botón de llamada con Elementor:

1. Añade un botón en la sección elementos. 

2. Añade el texto y el enlace.

3. Personaliza el botón en «style».

Wp Bakery

1. Añade un nuevo elemento de tipo botón.

2. Añade el texto del botón y la URL.

Mediante Html y Css

Si por alguna razón prefieres incorporar el botón de forma manual a través de código Html puedes copiar directamente el código que te proporciono a continuación. Puedes cambiar el color, padding, tipo de letra…

<a style=»padding: 10px 30px; background-color:#aeff3b» href=»tel:+34666666666″>Llama ya</a>

También puedes incluir un icono de las siguientes maneras:

A través de una imagen

Simplemente añade el código que te proporciono a continuación modificando las propiedades de estilo y la ruta de la imagen. 

<a style=»padding: 20px 30px; background-color:#aeff3b» href=»tel:+34666666666″><img src=»https://lauruiz.com/wp-content/uploads/2022/03/phone-call.png«>

A través de Dashicon

Para ello primero tienes que haberlos habilitado previamente en tu WordPress. Para añadir iconos con Dashicon sigue los siguientes pasos:

1. Ve a la página https://developer.wordpress.org/resource/dashicons/
2. Busca el icono que deseas.
3. Copia el código HTML.

4. Inclúyelo en el fragmento de código.

<a style=»padding: 20px 30px; background-color:#aeff3b» href=»tel:+34666666666″><span class=»dashicons dashicons-phone»></span></a>

Con un plugin

No hay nada en WordPress que no se pueda hacer con un plugin y este caso no iba a ser menos. Si se te resiste el código o no quieres hacer tu botón con un constructor visual te voy mostrar un plugin gratuito con el que puedes realizar esta función.

Si buscas “call” en el buscador de plugins de WordPress te aparecerán otras opciones igual de válidas, pero te recomiendo que revises el número de instalaciones y si es compatible con tu versión de WordPress antes de decidirte a instalarlo.

Recuerda que tener muchos plugins en tu WordPress aumenta la velocidad de carga de tu página y siempre hay que tratar de usar los menos posibles.

Call Now Buttom

El primer plugin es Call Now Buttom un plugin con más de 200000 instalaciones muy sencillo de usar y que además es muy estético.

Para usarlo sólo tienes que seguir los siguientes pasos:

1. Sube el plugin y actívalo.
2. En la barra lateral busca “Call Now Buttom”.

3. Añade un el teléfono de contacto. Puedes añadirlo tanto con el prefijo del país como sin él.
4. Añade el texto del botón. Si lo dejas vacío se mostrará un icono de un teléfono.
5. Habilitalo y guarda cambios.

6. En la pestaña “presentation” puedes configurar el diseño del botón.
7. Elige donde se muestra. En la misma pestaña de “presentation”, en el apartado “limit appearance” puedes elegir en qué páginas se muestra el botón añadiendo el ID de las páginas que quieres añadir o excluir.

Así de fácil es poner un botón de llamar en tu WordPress. ¿Tienes alguna duda? ¡Cuéntamelo en comentarios!