Objetivo #
Enseñar cómo agregar y configurar un botón flotante en el sitio web utilizando el recurso nativo de la plataforma, asegurando su correcto funcionamiento tanto en desktop como en mobile.
Público objetivo #
Usuarios principiantes a intermedios que desean agregar un botón fijo en pantalla, como WhatsApp o contacto rápido.
Vista general #
El constructor incluye un recurso nativo de botón flotante. Este botón permanece fijo en la pantalla y se ajusta automáticamente al tamaño del dispositivo del visitante.
Se puede configurar con:
link o número de contacto
mensaje opcional
posición en pantalla
tamaño
opacidad
sombra
efecto de entrada
tag para integración con scripts
Después de configurarlo y guardarlo, el botón funciona automáticamente tanto en desktop como en mobile.
Paso a paso #
1. Acceder a los elementos del constructor #
Dentro del constructor de la página:
haz clic en Agregar elementos
en el menú lateral derecho, desplázate hasta encontrar Botón flotante
2. Seleccionar el botón flotante #
Elige uno de los modelos disponibles.
Ejemplo común: botón de WhatsApp.
3. Abrir la configuración #
Haz clic derecho sobre el botón insertado.
Esto abrirá el panel de configuración.
4. Configurar el link o número #
Si es WhatsApp:
ingresa el número siguiendo el formato indicado en la URL de ejemplo
Este paso es esencial para el correcto funcionamiento del botón.
5. Activar mensaje opcional #
Puedes habilitar un texto al lado del botón.
Ejemplo:
Envíanos un mensaje
El texto puede personalizarse según tu necesidad.
6. Definir la posición del botón #
Elige dónde aparecerá:
lado izquierdo
lado derecho
7. Ajustar tamaño #
En la opción de tamaño, define la dimensión del botón.
Esto impacta directamente en la visibilidad y usabilidad.
8. Ajustar opacidad #
Puedes controlar el nivel de transparencia del botón.
Úsalo para hacerlo más discreto o más llamativo.
9. Configurar sombra y efecto de entrada #
Puedes personalizar:
sombra del botón
animación de entrada
Estos ajustes mejoran el impacto visual.
10. Configurar tag (opcional) #
Puedes agregar una tag al botón.
Esta puede vincularse con scripts JavaScript en la configuración de la página si necesitas integraciones avanzadas.
11. Guardar #
Haz clic en Guardar.
El botón quedará activo en la página.
Comportamiento en desktop y mobile #
El botón flotante tiene posicionamiento automático.
Esto significa que:
se ajusta a la posición configurada
se adapta al tamaño de pantalla
funciona en desktop y mobile sin configuración adicional
Consejos prácticos #
Prefiere el botón flotante estándar para asegurar responsividad automática
Revisa siempre el número o link configurado
Evita tamaños excesivos que afecten la navegación
Prueba en desktop y mobile antes de publicar
FAQ #
¿Funciona automáticamente en celular?
Sí. Se adapta automáticamente al tamaño de pantalla.
¿Puedo elegir dónde aparece?
Sí. Puedes definir izquierda o derecha.
¿Puedo cambiar el tamaño?
Sí. Hay una configuración específica para eso.
¿Puedo agregar mensaje al lado?
Sí. Se puede activar y personalizar.
¿Puedo integrarlo con scripts?
Sí. Usando la configuración de tag.
Troubleshooting #
El botón no aparece
Verifica que guardaste los cambios
Confirma que el botón está agregado en la página
El botón no abre correctamente WhatsApp
Revisa el número y el formato del link
El botón está en posición incorrecta
Verifica el lado configurado
Prueba en diferentes tamaños de pantalla
El tamaño no es adecuado
Ajusta la configuración de tamaño
Resumen #
El botón flotante estándar es la forma más simple y eficiente de agregar un botón fijo en tu sitio web.
Se adapta automáticamente a desktop y mobile, sin necesidad de configuraciones adicionales.
