Hacer que el Botón Añadir al Carrito Animado Tiemble

¿Por qué hacer que un botón esté animado?

Añadir animación a su botón "Añadir al Carrito" es una forma poderosa de llamar la atención sobre él, asegurando que su llamada a la acción (CTA) se destaque en la página. Esta técnica puede mejorar la participación del usuario más antigua y aumentar la tasa de clics, haciendo más probable que los usuarios realicen la acción deseada.

Una de las animaciones más efectivas y comúnmente utilizadas es el efecto de "temblor", que agrega un movimiento dinámico al botón, haciéndolo difícil de pasar por alto para los usuarios.

Vea este ejemplo:

Hacer que un Botón Añadir al Carrito Animado Tiemble con GemPages

Crear una animación de temblor para su botón en GemPages es simple y personalizable. Siga estos pasos para implementar y ajustar el efecto:

Paso 1: Habilitar la animación en la configuración del botón

Una vez ubicado en el Editor de GemPages, seleccione el botón Añadir al Carrito en su página para abrir su configuración.

En la barra lateral izquierda, vaya a la sección Avanzado . Desplácese hacia abajo hasta la opción Animación y actívela.

Paso 2: Aplicar la animación de agitación

Seleccione la Forma para Agitación de las opciones de animación. Puede configurar el botón para que tiemble solo al pasar el cursor, o tiemble al aparecer según prefiera.

Luego, ajuste la Configuración de Animación para controlar cómo se comporta el efecto de temblor.

• Intensidad: Defina qué tan fuerte es el movimiento de temblor.
• Velocidad: Establezca qué tan rápido ocurre el efecto de temblor. 
• Retraso: Especifique un retraso (en segundos) antes de que comience la animación.
• Facilitación: Elija cómo progresa la animación con el tiempo:
  • Lineal: Una velocidad constante a lo largo de toda la animación.
  • Entrada fácil: Comienza lento y acelera.
  • Salida fácil: Comienza rápido y desacelera.
  • Entrada y salida fáciles: Una combinación de inicio lento y final lento.
• Bucle: Decida si la animación de temblor debe repetirse continuamente o suceder solo una vez.

Para aprender más sobre la Configuración de Animación, puede leer este artículo.

Paso 3: Guardar y Publicar

En la barra superior, guarde las actualizaciones y presione Publicar para hacer que sus cambios estén en vivo en la tienda.