Agregar una animación a una insignia
Agrega efectos de animación como pulse a tus insignias para captar la atención de quienes visitan tu tienda online.
Agrega efectos de animación para atraer la atención hacia las ofertas, las promociones por tiempo limitado y la información importante del producto.
Cómo agregar una animación
Sección titulada «Cómo agregar una animación»-
Abre el editor de insignias
Sección titulada «Abre el editor de insignias»En Sami Product Labels, ve a Badges & Labels. Haz clic en Edit badge/label para una insignia existente, o haz clic en Create badge y completa la configuración inicial de la insignia.
-
Abre Design
Sección titulada «Abre Design»El editor se abre en Design por defecto. Si estás en otra pestaña, haz clic en Design.
-
Expande Advanced settings
Sección titulada «Expande Advanced settings»Desplázate hasta la parte inferior de Design y haz clic en Advanced settings.
Expande Advanced settings para encontrar los controles de animación en Effects.
-
Activa Use animation
Sección titulada «Activa Use animation»En Effects, activa Use animation. Aparecen los controles de tipo de animación, velocidad y repetición.
-
Selecciona el tipo de animación
Sección titulada «Selecciona el tipo de animación»Elige uno de los 13 efectos disponibles: Pulse, Flash, Bounce in, Bounce out, Swing, Wobble, Flip, Gelatine, Roll in, Roll out, Rotate in down left, Rotate in up left o Hi there.
Elige un efecto de animación y ajusta su velocidad y el número de repeticiones.
-
Define la velocidad de la animación
Sección titulada «Define la velocidad de la animación»Usa el control deslizante o el campo numérico Animation speed para establecer un valor de 0 a 10. Observa la vista previa en vivo mientras lo ajustas para que el efecto siga siendo visible sin distraer la atención del producto.
-
Define el número de repeticiones
Sección titulada «Define el número de repeticiones»Usa el control deslizante o el campo numérico Animation Repeat para establecer un valor de 0 a 100.
-
Guarda y previsualiza
Sección titulada «Guarda y previsualiza»Comprueba el efecto en la vista previa en vivo. Puedes alternar entre las vistas previas de la página de colección y de producto, y entre las vistas de escritorio y móvil. Cuando la animación te convenza, haz clic en Save en la parte superior del editor.
Siguientes pasos
Sección titulada «Siguientes pasos»- Cambiar el estilo de la insignia: personaliza las fuentes, los colores, los bordes y los fondos de tu insignia.
- Usar CSS personalizado: usa CSS personalizado para un estilo avanzado y para afinar las animaciones.