¿Cómo insertar animaciones de Lottie en WordPress? – Aprendermarketing.es

GIF es una forma estándar de insertar imágenes animadas en cualquier plataforma de creación de sitios web, incluido WordPress. Sin embargo, la última tendencia es insertar una animación de Lottie que mostrará elementos atractivos e interactivos como una imagen. Si bien puede usar SVG para la escalabilidad, Lottie permite un mayor control sobre sus animaciones. Si se pregunta qué es Lottie y cómo incorporarlas a WordPress, estas son las opciones.

¿Qué es la animación de Lottie?

Lottie es un formato de archivo de texto basado en JSON que puede usar para insertar animaciones en iOS, Android y cualquier plataforma web. Esto fue desarrollado por ingenieros de Airbnb para exportar archivos de animación de Adobe After Effects en formato JSON y renderizarlos de forma nativa. Estos son algunos de los beneficios de usar las animaciones de Lottie:

• Es un formato de código abierto con un tamaño de archivo muy pequeño.
• Formato de archivo de texto con controles de tiempo de ejecución.
• Animaciones interactivas que pueden destacarse fácilmente de los GIF normales.
• Escalable, de alta calidad y funciona como una imagen estática.

Incrustar animaciones de Lottie en WordPress

La mayoría de los complementos de bloque gratuitos ofrecen el bloque de animación Lottie para insertar el archivo animado en WordPress. Por ejemplo, puede usar Ultimate Addons para Gutenberg (ahora renombrado Spectra) o el complemento de bloques Kadence para este propósito. Aquí explicaremos con estos dos complementos cómo insertar animaciones de Lottie en los sitios de WordPress.

1. Usar bloques de Kadence para insertar animaciones de Lottie

Instale y active el complemento "Kadence Blocks – Gutenberg Blocks for Page Builder Features" del repositorio de WordPress. Este es un complemento gratuito para agregar bloques adicionales con controles personalizados en el editor de Gutenberg. Recomendamos usar este complemento para las animaciones de Lottie porque creará un bloque reutilizable como un tipo de publicación personalizada para cada animación que inserte en el sitio Además, los bloques de Kadence permitirán la carga de archivos JSON para las animaciones de Lottie, que no es compatible de forma predeterminada en WordPress.

• Después de activar el complemento, cree una nueva publicación o edite una publicación en la que desee insertar una animación de Lottie.
• Escribe /loti para encontrar e insertar un bloque de "Animaciones de Lottie".

• El complemento insertará un archivo de animación de muestra y podrá ver muchos controles en la barra lateral del bloque.

Personalización de la animación de Lottie en Kadence

La configuración de bloqueo está disponible en las siguientes secciones:

• Archivo de salida – Tiene dos opciones aquí para pegar una URL desde un archivo remoto o cargar un archivo JSON personalizado. Si no tiene su propio archivo, consulte la última sección de este artículo para averiguar cómo obtener archivos de animación gratuitos de Lottie. Seleccione "Archivo local" como "Origen del archivo" para ver un menú desplegable que muestra todas las animaciones creadas previamente en su sitio. Puede seleccionar uno de ellos o cargar un nuevo elemento para insertar. El título que proporcione aquí se usará como el nombre de su bloque de animación Lottie reutilizable.

• Configuración de reproducción – en esta sección puede controlar el comportamiento de la animación y configurar cómo se reproduce en el sitio. Puede mostrar el botón de reproducción/pausa, habilitar la reproducción automática y permitir que la animación se reproduzca solo cuando la página se mantiene presionada o se desplaza. También es posible configurar la animación en bucle para que se reproduzca sin fin y ajustar el retraso entre los bucles.

• Controles de tamaño – Esta configuración le permite configurar el relleno, el margen y el ancho para cambiar el tamaño general. Puede usar estas opciones para ajustar y alinear la animación en el área de contenido.

Una vez que haya terminado, agregue otro contenido a la página y presione el botón 'Publicar' para ver la animación de Lottie en acción.

Gestión de bloques Lottie

Vaya al menú Configuración > Bloques de Kadence y haga clic en 'Administrar animaciones de Lottie' en 'Cuadro de animación de Lottie'. Esto lo llevará a la página donde puede ver todas sus animaciones de Lottie en un solo lugar. Como puede ver, cualquier animación que inserte en el editor de Gutenberg en realidad se almacena como un tipo de publicación personalizada llamada "kadence_lottie". También puede crear una nueva animación desde aquí haciendo clic en el botón "Agregar nuevo". Estos son bloques reutilizables y puede insertarlos en cualquier parte de su sitio buscando su nombre.

2. Inserte Lottie Animation usando Ultimate Addon para Gutenberg

Si está utilizando el tema Astra o el bloque Kadence no funciona por alguna razón, entonces una opción alternativa es usar el complemento Ultimate para Gutenberg (llamado Spectra). Ofrece un bloque de animación Lottie similar con funcionalidad limitada. Después de activar el complemento , ve a Configuración > UAG" y habilita la opción "Lottie". Asegúrese de hacer clic en el botón "Regenerar activos" y borre el caché para que los cambios surtan efecto.

Ahora cree una nueva publicación o edite una publicación existente para ir al editor de Gutenberg. Inserta un bloque Lottie escribiendo /loti en el editor

A diferencia de los bloques Kadence, el complemento UAG no admite la carga de archivos JSON. Por lo tanto, solo puede usar la opción 'Insertar desde URL' y usar la URL del archivo Lottie de sitios de terceros. De lo contrario, debe habilitar la compatibilidad con la carga de JSON mediante complementos adicionales.

El complemento UAG ofrece configuraciones de "Controles" y "Estilo" para el bloque de animación de Lottie. En la sección Controles, puede configurar la animación para que se reproduzca en espera, haga clic o en función de la ventana gráfica. También es posible reproducir en bucle a cierta velocidad e invertir la secuencia de animación.

En la sección Estilo, puede ajustar el ancho, la altura, la alineación y los colores de fondo del bloque Lottie.

¿Dónde conseguir dibujos animados de Lottie?

Ahora que sabe cómo insertar animaciones de Lottie en el sitio de WordPress. El problema, sin embargo, es obtener los archivos JSON gratuitos de Lottie. Los diseñadores pueden crear animaciones con Adobe After Effects y convertirlas en archivos Lottie. Además, también hay opciones para convertir un archivo SVG a formato Lottie. Sin embargo, la opción simple para los creadores de contenido y bloggers normales de WordPress es reutilizar los archivos gratuitos disponibles en sitios web como Lottiefiles. Como se mencionó, Kadence admite la carga de archivos JSON, pero el complemento UAG no. Así que asegúrese de usar los bloques de Kadence para cargar y el complemento UAG para incrustar desde el sitio de Lottiefiles.

• Ir al sitio web de Lottifiles y crea una cuenta gratis.
• Vaya a la sección Descubrir > Animaciones gratuitas usando la barra de navegación superior y luego seleccione el menú Categorías.
• Aquí puede buscar archivos de Lottie en diferentes categorías y descargar sus artículos favoritos de forma gratuita.

• Seleccione el elemento, haga clic en el botón "Descargar" y seleccione "Lottie JSON" para obtener un archivo JSON. Puede usar esto para cargar cuando use el complemento de bloques Kadence.
• Para complementos como UAG, puede cargar el JSON a través de FTP y usar la URL de su sitio. Alternativamente, tome el HTML y busque la URL del archivo fuente para incrustarlo en su sitio.

Tenga en cuenta que Lottiefiles también ofrece un complemento de WordPress y un widget de Elementor Pro para facilitar las integraciones.