Crea animaciones CSS de forma sencilla en WordPress • Silo Creativo

1638869287 Crea animaciones CSS de forma sencilla en WordPress • Silo

Al diseñar una página, una de las máximas es crear algo que atraer la atención de las personas que lo visitan. Y las animaciones son un sistema que nos puede asistir en esta labor. Por supuesto, no hablamos de las habituales animaciones web de finales de los noventa y principios de los dos mil, sino más bien de algo más útil y menos desganado.

Esta vez, usaremos animaciones CSS por múltiples razones. Y más fácil de implementarAdemás, consumirán significativamente recursos más limitados y se van a cargar más veloz. En SiloCreativo charlamos múltiples veces sobre de qué manera hacer animaciones CSS para, por poner un ejemplo, la página de fallo cuatrocientos cuatro.

En este tutorial, no vamos a tocar ningún código CSS, puesto que nos asistiremos mutuamente con los complementos de WordPress y facilidad que nos ofrece Gutenberg para añadir clases CSS. Si no sabe de qué manera añadir clases CSS en Gutenberg, le aconsejamos que eche una ojeada a nuestro artículo sobre de qué manera crear columnas asimétricas en Gutenberg, donde hacemos empleo de esta funcionalidad.

Índice

    Agrega animaciones con Animate It!

    Crea animaciones CSS de forma sencilla en WordPress • Silo

    Gracias a WordPress, tenemos muchos complementos para animar nuestro lugar, y son completamente actualizado para trabajar con Gutenberg. Uno de los más usados y mejor valorados es Animate It !, que usaremos en este artículo. Como siempre y en todo momento, la primera cosa que debemos hacer es instalar y activar este complemento en nuestro WordPress.

    Después de hacer eso, va a estar hecho. todo el código CSS preciso en nuestro lugar web. El siguiente paso va a ser crear la animación que deseamos crear, con sus peculiaridades, para entonces aplicarla a los diferentes elementos de nuestra página.

    Diseñando nuestras animaciones

    ¡Anímate! Tiene 2 páginas que te servirán de referencia y nos van a ayudar ya antes de que empieces a trabajar en nuestro sitio. El primero es el lugar de demostración de Animate It !, donde hay una pequeña muestra de animaciones disponibles con este complemento. Además de poder ver de primera mano de qué manera se comportan y se ven en nuestro navegador.

    El segundo tiene por nombre Generador de Clases, y es el más esencial, puesto que nos dejará crear animación a través de diferentes campos y selectores, y vea en vivo como es la animación. Si entramos en esa página, vamos a ver algo afín a esto.

    Crea animaciones CSS de forma sencilla en WordPress • Silo

    Aparece un icono en la parte superior donde vamos a ver la animación que hemos escogido en los campos inferiores. Si hacemos click en el botón animarlo, va a repetir la animación. El primer menú es el de estilo. Tenemos de todo, desde hacer zoom, saltar, deslizar en diferentes direcciones, rotaciones ... Te aconsejamos prueba todas y cada una de las opciones que ofrece hasta el momento en que tengas lo que más amas.

    Te puede Interesar  Qué es el principio del mínimo privilegio y cómo llevarlo a cabo en WordPress

    A continuación tenemos los campos para Demora, con lo que marcar el retraso con el que aparecerá la animación, y Duración, que es el tiempo que va a durar la animación de principio a fin. También podemos hacer que la animación se repita indefinidamente si marcamos la opción animar infinitamente. Las últimas 3 opciones son fundamentales puesto que acá es donde afirmaremos cuando deseamos que aparezca la animación: al desplazarse, hacer click o bien desplazarse. Recuerda que solo podemos marcar una de las 3 opciones.

    Una vez que tengamos todas y cada una de las opciones escogidas, vamos a hacer click en el botón Para generar, y nos va a dar un código CSS que debemos copiar. Después de copiarlo, es hora de ir a WordPress.

    Aplica tus animaciones a WordPress

    Primero, deberemos tener una entrada o bien página creada con Gutenberg, con algún bloque dentro. Seleccionamos el bloque que deseamos animar y vamos a su panel de opciones, en el lado derecho. Al final de estas opciones, en la sección Avanzado, vemos un campo de texto llamado Clases CSS adicionales. En este campo debes pegar el código CSS que conseguimos en el punto precedente.

    1638869283 658 Crea animaciones CSS de forma sencilla en WordPress • Silo

    Y eso es todo. Rapido y fácil. Este código CSS podemos aplicarlo a cualquier otro bloque, a sabiendas de que es esa animación concreta que creamos en Animate It! Generador de clases. Por supuesto, podemos regresar a esta página, crear otra animación diferente, con la que conseguiremos otro código CSS para pegarlo en el bloque de Gutenberg que deseemos.

    Guarda tu publicación y mira los resultados

    Después de aplicar las clases CSS de animaciones a cada bloque pertinente, podemos guarda y actualiza nuestra página para poder ver los resultados. Inmediatamente se van a aplicar y vamos a poder ver de qué manera se comportan con nuestro diseño.

    ¿Dónde podemos aplicar estas animaciones?

    Mientras trabajamos en Gutenberg, podemos agregar animaciones a cualquier elemento creemos en el editor de bloques. Es decir, desde bloques completos hasta imágenes o bien parágrafos que se hallan dentro de un bloque. Podemos animar cualquier elemento que pueda añadirle una clase CSS.

    Como recomendación personal, no es conveniente aplicar una animación a todos y cada uno de los elementos de nuestra página y / o bien entrada. Si es posible, vamos a hacer una vista anterior de nuestra página para seleccionar. cuales son los puntos importantes y que sería apropiado que tuviesen algo de animación. Si todo está animado, nada resalta del resto. Además de poder provocar a nuestros visitantes un cierto rechazo, que es el efecto opuesto al que procuramos.

    Como hemos visto, incorporar animaciones a WordPress es sumamente fácil y en unos minutos vamos a tener nuestro sitio en un estilo absolutamente diferente y considerablemente más activo y atractivo. Espero que este tutorial te haya ayudado. ¡Y como siempre y en todo momento, tienes comentarios abiertos para cualquier pregunta o bien experiencia que te agradaría contarnos!

    Artículos Relacionados

    Deja una respuesta

    Tu dirección de correo electrónico no será publicada.

    Subir

    Utilizamos cookies para asegurar que damos la mejor experiencia al usuario en nuestra web. Si sigues utilizando este sitio asumiremos que estás de acuerdo. Más Información