¿Cómo Añadir un botón de WhatsApp en WordPres?
¡!Al lío!! Existen muchas maneras de añadir un botón de WhatsApp en tu web. La más sencilla es mediante un plugin, aunque no es la más recomendable, ya que muchas veces fallan, además de consumir recursos web.
Otra opción es diseñar el botón mediante un Pop-up, es una opción magnífica y funciona a la perfección. Si tienes Elementor Pro, te dejo aquí un video de cómo se hace.
¿Cómo Añadir un botón de WhatsApp sin necesidad de Plugins?
¿Pero qué pasa si no tengo Elementor Pro o ni ningún otro Page Builder? Porque cuestan un ojo de la cara y la versión free esta muy limitada. Pues te dejo la manera de insertar un botón de WhatsApp editando el Theme de tu web. Solo necesitaras unas líneas de HTML y CSS.
- Lo primero es asegurarte de utilizar un tema hijo o Child Theme, de esta manera podrás realizar modificaciones y conservar los cambios cuando actualices el tema padre.
Si esta utilizando Astra aquí podrás descargarte el tema hijo o si, por otro lado, utilizas Hello Theme de Elementor aquí tienes su tema hijo. - Ahora toca descargarte la imagen del icono de WhatsApp. Pixabay es una buena opción, las imágenes son gratuitas y se pueden utilizar libremente. Acuérdate de bajártela con fondo transparente.
- Otra tarea que necesitas hacer antes de empezar, es crear el enlace para que, al hacer clic en el botón, te lleve al chat de WhatsApp. Es muy sencillo, existen muchos generadores de enlace y muy buenos, te dejo uno que funciona muy bien, ademas te permite crear un mensaje personalizado.
- Una vez tengas el icono de WhatsApp en tu biblioteca de medios, es hora de ponerlo en el footer. Se puede insertar en forma de imagen con un hipervínculo, pero si el tema que utilizas no te deja insertar imágenes te dejo el código HTML para que no tengas problema.
<a href=»aquí va el enlace de WhatsApp» target=»_blank»><img class=»boton» src=»URL o lugar donde este la imagen» /></a>
Recuerda darle una clase (class=”botón”) para poder identificarlo al aplicarle CSS. - Ahora toca dale estilo CSS para que tenga el tamaño y la posición correcta, te dejo también las líneas de código. Los valores no son estáticos, auméntalos o disminúyelos según donde y cómo quieras el botón.
.boton {width:90px;position:fixed; bottom:100px;right:40px;z-index:5}
El atributo z-index sirve para ajustar el orden de las capas de los objetos - Ya lo tenemos casi listo, aunque con esto ya estaría el botón de WhatsApp para escritorio, sabemos que obligatoriamente se debe ver perfecto en móviles. Para que se aplique un código CSS específico en pantallas pequeñas debemos utilizar esta línea de código antes de los atributos CSS:
@media only screen and (max-width: 700px) {}
Dentro de los corchetes va el código CSS con la clase que identifica el objeto
@media only screen and (max-width: 700px) {.boton {width:70px; right:20px;bottom:20px}}
Modifica los valores según como y donde quieras el botón
¡!Todo listo!! Ya tienes tu botón de contacto por WhatsApp para que tus clientes o usuarios, puedan preguntarte lo que necesiten. Nosotros también tenemos uno, si tienes alguna pregunta o algo no ha sido demasiado claro, no dudes en escribirnos. Estaremos encantados de ayudarte.
