Cómo agregar animación al texto en WordPress

Los estilos de texto elegantes captan la atención de los espectadores rápidamente. Los propietarios de sitios web de WordPress a menudo preguntan cómo agregar animación al texto. Absolutamente, encontrará varios métodos para diseñar los textos de su sitio de WordPress. Puede agregar manualmente efectos HTML CSS que requieren un poco más de código. Pero la codificación es una excelente manera de agregar animaciones personalizadas a su sitio. Nuevamente, un complemento con el mejor widget es relativamente útil, efectivo y también popular .

Sin embargo, hemos tratado de cubrir ambas técnicas lo más fácilmente posible. Si ejecuta un sitio de WordPress, tómese el tiempo para leer el blog y comprender los procesos. Si sigue los pasos y las instrucciones correctamente, podrá personalizar su propia animación sin problemas.

Cómo agregar efectos de texto animado en WordPress

Los efectos de texto animado se pueden usar para agregar estilo y personalidad a su sitio de WordPress. En este tutorial, le mostraremos las formas de agregar estos efectos; pero antes de eso, debes tener una idea clara sobre un texto animado y su función; ¡Aprendamos!

¿Qué es un efecto de texto animado y cómo aparece?

Los efectos de texto animados también son una excelente manera de agregar un poco de diversión y emoción a sus artículos y títulos . Cuando elige usar un efecto de texto animado elegante, puede crear varios efectos. Algunos efectos son simples, como cambiar el color o el tamaño del texto , mientras que otros son animaciones detalladas, como parpadear o parpadear el texto .

El texto animado es un poco diferente del texto normal. Por lo general, este tipo de texto no se mueve por sí solo. En cambio, tiene un efecto que hace que parezca que se mueve por la pantalla. Por lo tanto, los textos elegantes hacen que sea más probable que las personas hagan clic en el contenido, los enlaces o abran correos electrónicos .

El papel de los textos animados en su sitio web

Hay diferentes tipos de efectos de texto animado disponibles en los temas de WordPress, pero todos comparten la misma funcionalidad básica. Cambian el color o el estilo del texto y simplemente cambian un estilo de prueba. Por ejemplo, puede cambiar un botón de "llamada a la acción" con un fondo rojo y texto blanco que diga "¡Haga clic aquí!" cuando se hace clic en.

El encabezado animado o una sección de héroe con textos elegantes desempeña los siguientes roles:

• Hace que sus diseños sean visualmente más interesantes.
• Destaca ofertas especiales e información importante.
• Hace que las características de su producto se noten.
• Hace que un sitio web sea más interactivo y promueve el negocio.

Las formas más fáciles de agregar efectos de texto animado

Usar un complemento de WordPress

El mercado actual le ofrece diferentes tipos de complementos para facilitar las tareas de diseño de texto. ElementsKit es un complemento tan poderoso como un complemento para el generador de páginas de Elementor. Con ElementsKit, obtendrá todo bajo un mismo capó.

El texto animado elegante es un widget impresionante presentado por ElementsKit pro.

Inicie sesión en su Tablero -> Seleccione cualquier página o publicación -> Haga clic en editar con ElementsKit -> Busque el widget de texto de animación elegante de ElementsKit -> Arrastre y suelte el widget

Sección de contenido

La parte se llama la parte Fancy Text , contiene los siguientes campos:

Animación

• Estilo de animación : aquí las dos opciones son Texto o SVG, ambas le permiten crear diferentes estilos de animación.
• Tipo de animación : según su tipo de animación, obtendrá varias opciones aquí.
• Revelar duración (ms) : puede establecer la duración de la animación en milisegundos mediante el cuadro de opción.
• Revelar retraso de animación (ms) : ajuste aquí el tiempo de retraso de la animación. Especifica que una animación puede comenzar más tarde, inmediatamente desde su comienzo, o instantáneamente y en medio de la animación.

Contenido

• Texto de prefijo : debe escribir aquí el contenido del prefijo que desea mostrar. Significa que se escribirá antes de la animación elegante.
• Listas elegantes: agregue elementos aquí para una animación elegante.
• Texto de sufijo : escriba el contenido de sufijo que desea mostrar. Por lo tanto, se especificará después de la animación elegante.

• Etiqueta HTML del título : seleccione aquí la etiqueta HTML del contenido.
• Enlace (opcional) : agregue cualquier enlace si desea que los usuarios redirijan a cualquier otra ubicación.

Sección de estilo

• Texto del encabezado : utilice este campo para ajustar la alineación del encabezado, la tipografía, el color, etc.
• Listas de texto elegante : utilice este campo para ajustar la tipografía, el color y el relleno.
• Cursor elegante: puede darle al cursor una apariencia elegante con color, ancho y alto usando este campo.

Después de editar y diseñar todas las declaraciones requeridas, haga clic en actualizar y vea los cambios desde el frente. Un ejemplo es –

Aplicando CSS

Al crear animaciones CSS en WordPress, tenga en cuenta las siguientes cosas básicas pero importantes :

• Establecer un nombre de animación correcto: este es el nombre que se mostrará en un elemento cuando se mueva mediante una animación CSS. Por ejemplo, si tiene un botón con una animación llamada “fadeIn”, este sería el valor que usaría para esta propiedad.
• Duración de la animación: este es el número de segundos que tardará una animación en completarse. También puede establecer esto en ninguno o 0 para hacer que una animación dure indefinidamente o hasta que suceda algo más (como la carga de una página).
• Función de temporización de animación: controla cómo se mueve el elemento de un lugar a otro en función del tiempo que tarda en una cantidad de tiempo específica (en milisegundos). Por ejemplo, si configura esta propiedad para que desacelere, su elemento comenzará a moverse lentamente y luego se acelerará al final de su duración antes de comenzar de nuevo desde el principio.
• Animation-delay: este es un valor que especifica qué número de milisegundos se deben agregar después de que una animación haya terminado antes de que comience de nuevo (por ejemplo, 1 s).
• Recuento de iteraciones de animación: esta es la cantidad de tiempo que necesita para reproducir la animación. Usando la propiedad CSS puede contar esta iteración.
• Animaciones-dirección: es el orden o la dirección en la que se debe reproducir una animación. Puede ser normal, inverso, alternativo y alternativo-inverso.
• Modo de relleno de animación: estos valores especifican cómo se debe mostrar un elemento. Puede ser antes y después de que se le haya aplicado una animación.
• Conocer @keyframes: especifica las propiedades de la animación que cambian a lo largo del curso y también los valores que deben tomar esas propiedades. Por ejemplo:

 @keyframes example { 0% {background-color: red;} 25% {background-color: yellow;} 50% {background-color: blue;} 100% {background-color: green;} }

Generalmente, los porcentajes se utilizan para indicar el tiempo de la animación. El fotograma clave anterior demuestra que el color de fondo del elemento se transformará el 25 por ciento del camino de rojo a amarillo, a través de la animación.

Sin embargo, desde y hasta se pueden usar en lugar de 0% y 100%, respectivamente .

Creación de un archivo animate.css

Primero debe crear un archivo separado con todas las propiedades necesarias, en el editor de texto en el que trabaja. Puede elegir los fotogramas clave para cualquier animación . Luego, debe unirlos con clases CSS particulares para aplicar con cualquier texto en su sitio de WordPress.

Comience escribiendo un código simple en su archivo CSS. Un código de muestra para un texto de animación puede parecerse a:

 ```@keyframes MyAnimation { from { opacity: 0; transform: rotate(20deg); animation-duration: 3s; } to {opacity: 1;} transform: rotate(0deg); } }

Ahora, para vincular este fotograma clave a una clase CSS, hemos establecido un texto llamado MyAnimation. Entonces, justo después del código anterior, ahora debe colocar el código a continuación en el archivo.

 .MyAnimation { animation-name: MyAnimation; }

¡Puedes encontrar todo el conocimiento básico de animación CSS y practicar los códigos aquí!

Puede repetir este procedimiento para crear tantas animaciones como sea posible según sus necesidades. Luego, guarde el archivo como animate.css. Alternativamente, puede descargar el archivo Animate.css . Es un archivo muy apreciado que contiene los fotogramas clave y las clases CSS para toneladas de diseños de animación populares. Además, usar el archivo disminuirá el dolor de codificar la animación compleja.

El código anterior animará el texto de su etiqueta h1 ' MyAnimation '. Puede cambiar la duración de la animación cambiando los "3s" a un valor diferente . También puede cambiar los colores cambiando los valores hexadecimales. Una vez que haya guardado el archivo CSS, puede realizar más cambios en la apariencia de su sitio web, puede editar el archivo CSS. Puede cambiar la fuente, el tamaño del texto y el color del texto editando el archivo CSS. También puede cambiar el color de fondo y el tamaño del encabezado cambiando el archivo CSS.

Cargar su archivo animate.css en el sitio de WordPress

Una vez que haya terminado con el trabajo del archivo, cárguelo en el directorio de su tema. Hemos dividido todo el proceso en tres pasos,

Paso 1

Vaya al sitio usando el Protocolo de transferencia de archivos (FTP) -> Elija el cliente FTP (FileZilla, WinSCP, Cyberduck, etc.) -> Seleccione las credenciales necesarias en su cuenta de alojamiento.

Paso 2

Acceda a su directorio public_html -> Navegue a wp-content -> Temas -> Seleccione la carpeta del tema activo o secundario

Paso 3

Ahora, busque un subdirectorio llamado css. Si lo obtiene, cargue su archivo animate.css o animate.min.css desde el archivo Animate.css con el subdirectorio.

Sin embargo, si no tiene la carpeta del subdirectorio, puede crear fácilmente una nueva. Para eso, justo después de cargar el archivo, haga una edición simple para crear el nuevo archivo y listo.

Llame a la hoja de estilo de Animate a través de functions.php

Encontrará el archivo functions.php en la carpeta de su tema activo. Ahora, debe agregar este fragmento de código para llamar a la hoja de estilo de Animate:

 add_action( 'wp_enqueue_scripts', 'wpb_animate_styles' ); function wpb_animate_styles() { wp_enqueue_style( 'animate-css', get_stylesheet_directory_uri() . '/css/animate.css', '3.5.0', 'all'); }

Recuerde , si usó el archivo animate.min.css de Animate.css, deberá escribir animate.min.css en la línea final en lugar de animate.css. Después de guardar todos los cambios, vaya a su panel de WordPress.

Aplicar animaciones usando clases CSS

Entonces, ahora es posible aplicar cualquier clase que desee en el archivo animate.css para ver diferentes efectos de animación en publicaciones y páginas. Además, el archivo Animate.css le permite hacer referencia a una lista completa de todos.

Finalmente, seleccione una publicación o página en el Editor clásico -> Cambie al editor de texto -> O haga clic en el ícono de tres puntos de la barra de herramientas del bloque si es un Editor de bloques -> Seleccione Editar como HTML-> Agregue el animado clase y la clase para su animación a la etiqueta del elemento -> Vista previa

Estas son dos técnicas efectivas para agregar texto animado a su sitio y pueden ayudar a que su sitio sea más atractivo y visualmente atractivo . Al usar una de estas técnicas, puede agregar algo de movimiento e interés a sus páginas.

Sin embargo, aplicar CSS puede ser un poco difícil si no tienes idea de codificación. Por lo tanto, se recomienda la ayuda de expertos para crear animaciones CSS en WordPress. Alternativamente, el texto animado elegante de ElementsKit es un widget inteligente que lo ayuda a diseñar cualquier animación con estilo rápidamente. Con el widget, puede transformar los textos elegidos en animaciones elegantes.