Todas las colecciones
Creador de sitios web
Integraciones
Creador de sitios web: cómo añadir animaciones
Creador de sitios web: cómo añadir animaciones

Aprende cómo añadir animaciones a tu sitio web con el Creador de sitios web de Hostinger

Actualizado hace más de una semana

En este artículo, aprenderás cómo:

  • Agregar animaciones nativas.

  • Incrustar elementos animados de terceros.

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):

Configuración de animación global

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:

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:

Configuración del elemento del 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:

La biblioteca de animaciones en Lordicon

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

Copiando el código HTML de la animación

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:

Pegar el código HTML de la animación en Hostinger Website Builder

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.

¿Ha quedado contestada tu pregunta?