Editor de Wix Studio: agregar animaciones a los iconos de los botones
5 min
En este artículo
- Agregar una animación de icono prediseñada
- Crear animaciones de iconos personalizadas
- Diseñar el icono
- Requisitos y pautas para los iconos personalizados
¿Estás usando botones con estilo? Agrega animaciones de iconos para crear efectos llamativos y hacer que los sitios de tus clientes resulten interactivos hasta en el más mínimo detalle.
Elige entre la variedad de iconos animados prediseñados de Wix Studio para obtener un efecto prediseñado, o combina un icono de inicio y un icono de finalización para crear una animación personalizada. Incluso puedes subir tus propios archivos SVG para darle un toque más personalizado.
¿Cómo funcionan las animaciones de los iconos de los botones?
Agregar una animación de icono prediseñada
Elige una de nuestras llamativas animaciones de iconos para una edición rápida. Una vez que hayas seleccionado el efecto que deseas, puedes establecer la duración.
Para agregar un icono animado prediseñado:
- Ve al editor.
- Haz clic en el botón con el estilo correspondiente.
- Haz clic en Ajustes.
- Haz clic en Animado debajo de Tipo de icono.
- Elige qué hacer a continuación:
- Selecciona el icono deseado en Elegir icono.
- Haz clic en el icono Agregar
para explorar nuestra gama completa de iconos animados en el Administrador de multimedia.
- (Opcional) Arrastra el control deslizante para cambiar la Duración de la animación.
Consejo:
Pasa el cursor sobre nuestros iconos prediseñados para obtener una vista previa de su animación.
Crear animaciones de iconos personalizadas
Crea tus propias animaciones de iconos para los botones en el sitio de tu cliente. Al seleccionar un icono de inicio y un icono de finalización, puedes crear una animación fluida que sea exclusiva para el sitio de tu cliente. Combina iconos de Wix o usa 2 de tus propios archivos SVG.
Para crear animaciones personalizadas:
- Ve al editor.
- Haz clic en el botón con el estilo correspondiente.
- Haz clic en Ajustes (o en Cambiar icono y texto).
- Selecciona Animado en Tipo de icono.
- Haz clic en el icono Agregar
y selecciona Crear nuevo. - Configura los iconos de inicio y finalización:
- Haz clic en Agregar icono
debajo del Icono de inicio. - Selecciona un archivo en la pestaña Multimedia de Wix o sube/selecciona el tuyo propio en Archivos del sitio.
- Haz clic en Elegir archivo.
- Repite los pasos a-c para el Icono de finalización.
- Haz clic en Agregar icono
- (Opcional) Haz clic en Volver en la parte superior y usa el control deslizante para establecer la Duración.
Consejos:
- Puedes combinar tu propio archivo con un icono de Wix.
- Usa el cuadro de vista previa para asegurarte de que el efecto se vea tal y como deseas.
Diseñar el icono
Personaliza el icono para que se adapte a tu visión del diseño, a la marca única de tu cliente y al botón en particular. Cambia el tamaño del icono, modifica su color y gíralo para que el botón se vea más dinámico.
Puedes diseñar el estado del botón al pasar el cursor, lo que te permite añadir una capa adicional de interactividad; por ejemplo, haz que el icono gire o cambie de color al pasar el cursor.
Para diseñar el icono:
- Ve al editor.
- Haz clic en el botón con el estilo correspondiente.
- Haz clic en el icono Abrir Inspector profesional
en la parte superior derecha del editor.
- Selecciona el Estado correspondiente en Diseño: Normal o Efecto cursor.
- Haz clic en Icono en la sección Diseño.
- Usa las opciones disponibles para diseñar el icono:
- Cambia el tamaño del icono.
- Cambia el color del icono y ajusta la opacidad.
- Rota el icono a un ángulo diferente.
Requisitos y pautas para los iconos personalizados
Los iconos personalizados tienen algunos requisitos. Para subir y usar tus propios archivos, estos deben cumplir las siguientes condiciones:
- Solo negro sólido (#000000)
- En formato SVG
- No más de 250 KB
Nota:
Si has creado tus archivos SVG en Adobe Illustrator o Figma, debes convertirlos a un trazado compuesto antes de exportarlos.
También hay algunas prácticas recomendadas que debes tener en cuenta al crear iconos. Te recomendamos seguir las siguientes pautas para garantizar la animación más fluida posible.
- Asegúrate de que los iconos de inicio y finalización tengan la misma posición inicial.
- Verifica que ambos iconos tengan el mismo número de puntos.
- Usa iconos rellenos (sin recortes).
- Usa varias formas más pequeñas para crear un icono SVG, en lugar de 1 forma más grande.
- Escala las formas al cambiarlas de tamaño para mantener su calidad.
- Usa la vista de píxeles del programa para garantizar la alineación con los píxeles en la mesa de trabajo.
- Si los iconos tienen formas muy diferentes, puedes probar estos consejos para lograr una transición aún más fluida:
- Usa versiones transformadas de los iconos (un icono de inicio que se haya transformado ligeramente en el icono de finalización y viceversa).
- Oculta las formas de un icono en el otro (por ejemplo, oculta formas del icono de finalización en el icono de inicio).
Importante:
No podemos proporcionar asistencia ni solucionar problemas con los archivos SVG que creas fuera de Wix.