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):
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:
2. Haz clic en HTML y copia el código:
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:
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.