En este tutorial aprenderás cómo animar botones dentro del Builderall Website Builder, haciendo que aparezcan automáticamente después de unos segundos o cuando el visitante llegue a una sección específica de la página.
Este recurso es útil para:
• Destacar botones de llamada a la acción (CTA)
• Hacer que elementos importantes aparezcan en el momento adecuado
• Mejorar la interacción del visitante con tu página
Puedes ver el video completo del tutorial a continuación:
Cómo Animar un Botón en el Constructor #
Sigue estos pasos para aplicar una animación a un botón:
- Abre tu página en el Website Builder.
- Ubica el botón que deseas animar.
- Haz clic derecho sobre el botón.
- En el menú de configuración, desplázate hacia abajo hasta encontrar la opción Animación.
- Selecciona el tipo de animación que deseas aplicar.
Animación por Tiempo #
La animación por tiempo permite que el botón aparezca automáticamente después de unos segundos.
Cómo configurarla #
- Haz clic derecho sobre el botón.
- Accede a la opción Animación.
- Selecciona Por tiempo.
- Define la cantidad de segundos que deseas esperar antes de que aparezca el botón.
Por ejemplo:
Si configuras 3 segundos, el botón aparecerá tres segundos después de que el visitante cargue la página.
Selección del Tipo de Animación #
Dentro de la configuración encontrarás una lista de efectos de animación.
Si deseas que el botón aparezca en la página, debes elegir una animación que incluya la palabra IN.
Ejemplos:
• Fade In
• Bounce In
• Slide In
Estas animaciones hacen que el elemento aparezca gradualmente en pantalla.
Después de elegir el efecto:
- Guarda la configuración.
- Visualiza o publica tu página para probar la animación.
Importante #
Las animaciones no se muestran dentro del editor del constructor.
Para verlas funcionando debes:
• Abrir la página publicada
• O usar la opción de vista previa del sitio
Animación Cuando el Elemento es Visible #
Otra opción disponible es hacer que el botón aparezca cuando el visitante llegue a esa sección de la página.
Esto ocurre cuando el usuario desplaza la página hacia abajo y el elemento entra en la pantalla.
Cómo configurarlo #
- Haz clic derecho en el botón.
- Abre la opción Animación.
- Selecciona la opción Cuando visible.
- Elige el tipo de animación.
- Guarda los cambios.
Cómo Funciona esta Animación #
Cuando utilizas esta opción:
• El botón no aparece inmediatamente.
• Solo se mostrará cuando el visitante llegue a esa parte de la página.
Este tipo de animación es muy útil para:
• Botones de compra
• Formularios de registro
• Llamadas a la acción estratégicas
Cómo Probar la Animación #
Para comprobar que todo funciona correctamente:
- Publica tu página.
- Ábrela en el navegador.
- Actualiza la página.
Dependiendo de la configuración:
• El botón aparecerá después de unos segundos
o
• Aparecerá cuando el visitante llegue a esa sección de la página.
FAQ #
¿Puedo aplicar animaciones a otros elementos además de botones? #
Sí. Las animaciones también pueden aplicarse a otros elementos dentro del constructor.
¿Por qué no veo la animación en el editor? #
Esto es normal.
Las animaciones solo se muestran en la vista previa o en la página publicada.
¿Puedo usar más de una animación en el mismo botón? #
No es possible aplicar múltiples animaciones al mismo elemento.
Troubleshooting #
La animación no aparece #
Verifica lo siguiente:
• Que la animación haya sido guardada correctamente
• Que la página esté publicada
• Que el tiempo configurado no sea demasiado alto
El botón aparece inmediatamente #
Revisa si la animación está configurada como:
• Por tiempo
o
• Cuando visible
Si está en otro modo, el comportamiento puede ser diferente.
No veo la animación dentro del editor #
Esto es normal.
Las animaciones solo pueden verse:
• En la vista previa
• En la página publicada
