Agregar animaciones nativas

Puedes habilitar animaciones nativas de dos maneras:

Globalmente (en todo el sitio): una sola animación seleccionada se aplica a todos los elementos en todo el sitio web.
Localmente (por elemento): aplica animaciones para cada uno de los elementos de tu sitio web individualmente; de esta manera puedes configurar diferentes tipos de animaciones para diferentes elementos

NOTA: los elementos del código incrustado no son compatibles con las animaciones nativas

Agregar animaciones en todo el sitio

Dentro del creador de sitios web, expande el panel Estilos de sitios web a la izquierda. Abre la pestaña Animaciones y seleccioae el estilo de animación preferido (desvanecer, diapositiva, escala):

Hostinger Creador de sitios: pestaña Animations resaltada en Estilos del sitio

De esta manera, la animación seleccionada se aplica a todos los elementos y secciones de tu sitio web. Puedes deshabilitar la animación para un elemento en particular en su configuración local, por ejemplo, así es como puedes desactivarla para el elemento de texto:

Hostinger Creador de sitios: menú de animación abierto con la opción Escala seleccionada

Después de habilitar o deshabilitar las animaciones, actualiza tu sitio web para que los cambios se reflejen online. Para verificar cómo se ve el sitio web con animaciones, ve al modo de vista previa o abre el sitio web en vivo.

Agregar animaciones a elementos particulares

Dentro del creador de sitios web, haz clic en el elemento en cuestión y selecciona Editar o Cambiar para abrir su configuración. Luego, busca la configuración de Animaciones y habilita la preferida. Por ejemplo, la configuración del elemento de texto:

Configuración de elementos de imagen:

Hostinger Creador de Sitios: pestaña Animación resaltada en Configuraciones de imagen

Configuración del elemento del botón:

Hostinger Creador de Sitios Web: pestaña Animación en configuraciones de botón

¡Y así! Después de habilitar las animaciones, actualiza tu sitio web para que los cambios se reflejen online. Para verificar cómo se ve el sitio web con animaciones, ve al modo de vista previa o abre el sitio web en vivo.

Incrustar elementos animados de terceros

Puedes incrustar animaciones gratuitas en tu sitio web con las herramientas de terceros. En este ejemplo, se utilizan animaciones de Lordicon.

1. Inicia sesión en Lordicon y haz clic en cualquier animación que quieras; personalizarlo si es necesario:

Lordicon: panel con el icono Confetti seleccionado y el botón para abrir el editor resaltado

2. Haz clic en HTML y copia el código:

Botón Copy HTML Code resaltado en la ventana de inserción de animación web

3. Ahora, abre el creador de sitios web y agrega un elemento de código de inserción en el lugar preferido de tu página web.

4. Pega el código de animación en el elemento incrustado y la animación se mostrará en tu página:

Creador de sitios Hostinger: botón “EMBED CODE” resaltado en un cuadro de código

Siéntete libre de cambiar el tamaño del elemento de código si es necesario.

5. Finalmente, actualiza tu sitio web para que los cambios se reflejen online.

Para verificar cómo se ve el sitio web con animaciones, ve al modo de vista previa o abre el sitio web en vivo.