Cómo agregar animación al texto en WordPress

Los estilos de texto sofisticados captan rápidamente la atención de los espectadores. Los propietarios de sitios web de WordPress suelen preguntar cómo agregar animación al texto. Por supuesto, 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. De nuevo, un complemento con el mejor widget es relativamente útil, efectivo y también popular.

Sin embargo, hemos intentado 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. Seguir los pasos e instrucciones correctamente te permitirá personalizar tu propia animación sin problemas.

Cómo agregar efectos de texto animados en WordPress

Se pueden utilizar efectos de texto animados 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 son una excelente manera de agregar un poco de diversión y emoción a tu artículos y títulos también. Cuando eliges utilizar un elegante efecto de texto animado, puedes crear varios efectos. Algunos efectos son tan simple como cambiar el color o tamaño del texto, mientras que algunas son animaciones detalladas como texto parpadeante o parpadeante.

El texto animado es un poco diferente del texto normal. Normalmente, este tipo de texto no se mueve por sí solo. En cambio, tiene un efecto que hace que parezca como si se estuviera moviendo por la pantalla. Entonces, los textos sofisticados hacen que las personas sean más propensas a haga clic en el contenido, enlaces o abra correos electrónicos.

El papel de los textos animados en su sitio web

Hay diferentes tipos de efectos de texto animados disponibles en los temas de WordPress, pero todos comparten la misma funcionalidad básica. Cambian el color o estilo del texto y simplemente cambian un estilo de prueba. Por ejemplo, puedes cambiar un Botón de “llamado a la acción” con un fondo rojo y un texto blanco que dice "¡Haga clic aquí!" cuando se hace clic en él.

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

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

Las formas más sencillas de agregar efectos de texto animados

Usando un complemento de WordPress

El mercado actual ofrece diferentes tipos de complementos para facilitar las tareas de estilo de texto. ElementsKit es un complemento tan poderoso así como un complemento para el creador de páginas Elementor. Con ElementsKit, tendrás todo bajo un mismo capó.

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

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

Sección de contenido

La parte se llama Parte de texto elegante, contiene los siguientes campos-

¿Sabes por qué ElementsKit es tan popular? 🤔
Chequea aquí 👉 Los sitios web mejor clasificados del mundo creados con ElementsKit

Animación

• Estilo de animación – Aquí las dos opciones son Texto o SVG, ambas te permiten realizar diferentes estilos de animación.
• Tipo de animación – Según su tipo de animación, aquí obtendrá varias opciones.
• Duración de revelación (ms) – Puede establecer la duración de la animación en milisegundos usando el cuadro de opción.
• Revelar retardo de animación (ms) – Ajuste el tiempo de retardo de la animación aquí. Especifica que una animación puede comenzar más tarde, inmediatamente desde el principio o instantáneamente y a mitad 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 elegante animación.
• Listas elegantes – Agregue elementos aquí para obtener animaciones elegantes.
• Texto de sufijo – Escriba el contenido del sufijo que desea mostrar. Por lo tanto, se especificará después de la elegante animación.

• Etiqueta HTML de 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 título, la tipografía, el color, etc.
• Listas de texto elegantes – Utilice este campo para ajustar la tipografía, el color y el relleno.
• Cursor elegante – Puedes 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 principio. Un ejemplo es –

Aplicando CSS

Al crear animaciones CSS en WordPress, mantenga lo siguiente cosas básicas pero importantes en mente:

• Establecer un nombre de animación correcto – Este es el nombre que se mostrará en un elemento cuando sea movido por 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 - Esta es la cantidad de segundos que tardará una animación en completarse. También puede configurar 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 sincronización de animación – Esto controla cómo el elemento se mueve 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 se apague, su elemento comenzará a moverse lentamente y luego se acelerará al final de su duración antes de comenzar nuevamente desde el principio.
• Retraso de animación – Este es un valor que especifica cuántos milisegundos se deben agregar después de que finaliza una animación antes de que comience nuevamente (por ejemplo, 1 s).
• Recuento de iteraciones de animación – Esta es la cantidad de tiempo que necesitas para reproducir la animación. Usando la propiedad CSS puedes contar esta iteración.
• Animaciones-dirección – Es el orden o dirección en la que se debe reproducir una animación. Puede ser normal, inverso, alterno y alterno-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.
• Conociendo @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: 

Ejemplo de @keyframes { 0% {color-fondo: rojo;} 25% {color-fondo: amarillo;} 50% {color-fondo: azul;} 100% {color-fondo: verde;} }

Generalmente, se utilizan porcentajes para indicar el tiempo de la animación. El fotograma clave anterior demuestra que el color de fondo del elemento se transformará en un 25 por ciento de rojo a amarillo a lo largo de la animación.

Sin embargo, Desde y hacia se puede utilizar en lugar de 0% y 100%, respectivamente.

¡Un segmento de 'línea de tiempo' juega un papel importante para captar la atención de los clientes e influir en ellos para que visiten su sitio web! Leer más 👉 ¡Aquí!

Creando un archivo animate.css

Primero debe crear un archivo separado con todas las propiedades necesarias en el editor de texto en el que trabaja. Puedes elegir el fotogramas clave para cualquier animación. A continuación, debe combinarlos con clases CSS particulares para aplicarlas 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 verse así:

```@keyframes MyAnimation { de { opacidad: 0; transformar: rotar (20 grados); duración de la animación: 3 s; } a {opacidad: 1;} transformar: rotar(0deg); } }

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

.MiAnimación { nombre-animación: MiAnimación; }

Puede encontrar todos los conocimientos básicos de animación CSS y practicar el códigos aquí!

Puedes repetir este procedimiento para crear tantas animaciones como sea posible según tus necesidades. Luego, guarde el archivo como animate.css. Alternativamente, puede descargar el archivo Animate.css. Es un archivo popular que contiene fotogramas clave y clases CSS para toneladas de diseños de animación populares. Además, el uso del archivo reducirá la molestia de codificar la animación compleja.

El código anterior animará el texto de su etiqueta h1 'Mi animación'. Puede cambiar la duración de la animación cambiando el “3s” a un valor diferente. También puedes 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 puedes cambiar el color de fondo y el tamaño del encabezado cambiando el archivo CSS.

Cargando 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

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

Paso 2

Accede a tu directorio public_html -> Navega a wp-content – > Temas -> Selecciona 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 funciones.php

Encontrará el archivo funciones.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'); función wpb_animate_styles() { wp_enqueue_style( 'animate-css', get_stylesheet_directory_uri() . '/css/animate.css', '3.5.0', 'todos'); }

Recordar, 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

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 la clase animada 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 más atractivo y visualmente atractivo. Al utilizar una de estas técnicas, puede agregar algo de movimiento e interés a sus páginas.

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