En mis proyectos evito plugins innecesarios para mantener la velocidad y seguridad del sitio. Te muestro cómo crear un botón flotante de WhatsApp usando solo Divi: módulos, algunos ajustes y un enlace de chat.

• Ventajas rápidas:
  • Ligero: sin scripts extra.
  • Control total: diseño y posición precisos.
  • Seguro: menos vulnerabilidades.

Pasos principales (resumidos):

1. Añadir un módulo de imagen o botón fijo en la sección global.
2. Insertar el enlace de WhatsApp: https://wa.me/tu-numero?text=Mensaje.
3. Ajustes para posicionar, animar y ajustar a móviles.

Consejo: prueba en varios tamaños y usa icono SVG para mejor resolución.

El paso a paso detallado

Accedo al generador de temas de mi WordPress para decidir la ubicación del botón. Trabajo sobre el pie de página global para que el icono se cargue en todas las páginas sin repetir pasos.

Inserto un módulo de imagen en lugar de un módulo de botón; así controlo mejor la apariencia del icono. Subo un archivo PNG o SVG de calidad —yo utilizo recursos tipo Flaticon— que combine con la paleta del sitio.

Cambio la posición del módulo ya Fijado y lo coloco en la esquina inferior derecha para que el botón permanezca visible al hacer scroll. Ajusto el desplazamiento horizontal y vertical (por ejemplo 40px / 40px) hasta que la separación respecto a los bordes quede armónica con el diseño.

Aumento el Z-Index a 999 para asegurar que el icono se muestre por encima de sliders, menús u otros elementos flotantes. Luego redondeo las esquinas a un radio que convierta la imagen en un círculo perfecto (por ejemplo 50px en todas las esquinas) si el recurso original es cuadrado.

Aplico una sombra en la caja para generar profundidad y separar visualmente el botón del contenido. Elijo una sombra con algo de difusión para un efecto de “flotación” discreto y profesional.

Defino el tamaño desde Diseño > Tamaño; pruebo una anchura máxima pequeña (un valor como 5% puede funcionar) y la ajusto según la resolución de los dispositivos. Compruebo en móvil y escritorio para evitar que el botón quede demasiado grande o demasiado pequeño.

Activo una animación sutil al cargar la página, como un rebote ligero, para atraer la atención sin distraer. Además, en el estado hover uso Transformar > Escala para aumentar el icono en torno a un 5% (valor 105%), dando retroalimentación visual de que el elemento es interactivo.

En Contenido > Enlace pego la URL de WhatsApp en formato wa.me, por ejemplo: https://wa.me/3463773499. Me aseguro de reemplazar el número por el mío y de incluir siempre el prefijo del país sin espacios ni símbolos extra.

Lista de comprobación rápida:

• Hecho: Pie de página global seleccionado.
• Hecho: Módulo de imagen subido y posicionado como Fijado.
• Hecho: Desplazamientos ajustados y Z-Index elevado.
• Hecho: Bordes redondeados para forma circular.
• Hecho: Sombra aplicada para profundidad.
• Hecho: Tamaño probado en varias resoluciones.
• Hecho: Animación de entrada y efecto hover configurados.
• Hecho: Enlace wa.me verificado con prefijo de país.

Consejos prácticos:

• Si tienes otros elementos flotantes cerca (chat, botones de “ir arriba”), modifica el desplazamiento vertical para evitar solapes.
• Ajusta la opacidad de la sombra si notas que el botón compite demasiado con el contenido.
• Prueba diferentes tamaños y valores de z-index en páginas con sliders o menús fijos.

Código de referencia (ejemplo de enlace directo):

• Formato: https://wa.me/NumeroConPrefijo
• Ejemplo: https://wa.me/3463773499

Sigo estos pasos y hago pruebas en móvil y escritorio hasta que el botón se integra de forma coherente con el resto del diseño, resulta accesible y no interfiere con la navegación.

Conclusión: Diseño inteligente vs. Plugins

¿Te ha resultado útil este truco?

Prefiero soluciones que reduzcan dependencias externas y mantengan el sitio limpio y seguro. Al implementar el botón y su estilo directamente en Divi evito incompatibilidades, posibles fallos de seguridad y el peso extra que añaden plugins innecesarios.

Ventajas prácticas que notarás:

• Menos actualizaciones y conflictos entre extensiones.
• Código más legible y fácil de mantener.
• Mayor control sobre la apariencia y comportamiento responsive.

Si te surge alguna duda técnica —por ejemplo con el Z-index, posicionamiento fijo o ajustes en móviles— puedo ayudarte a resolverla paso a paso.

También ofrezco soporte profesional si prefieres que me encargue de optimizar tu web o la de tus clientes.