Cómo crear un efecto de texto animado en WordPress

En la caja de herramientas del diseño web, no hay nada como una animación bien colocada para agregar un toque de magia a una página o publicación. Es fácil ver por qué: la animación puede dar vida a elementos que de otro modo serían estáticos, como el texto. Las cosas que se mueven tienen una forma de llamar nuestra atención, por lo que la animación es una excelente manera de llamar la atención de los espectadores hacia algo. Siempre que se haga con buen gusto, mesura y sentido de la composición, la animación puede ser de gran ayuda para su sitio web.

El texto es un gran ejemplo de lo útil que puede ser la animación. Los párrafos pueden aparecer en una página de cierta manera. Las palabras individuales también pueden hacerlo; incluso puede configurar oraciones completas para que aparezcan una letra a la vez, creando un elegante efecto de escritura. Y aunque ciertamente es posible agregar esos efectos usando HTML y CSS, hemos creado una forma más fácil de agregar texto animado a su sitio web.

Nuestro complemento Qi Addons para Elementor, un paquete de sesenta complementos Elementor personalizados, contiene justo lo que necesita. El complemento se llama widget de texto animado y es una pequeña herramienta excelente para agregar texto animado en WordPress. En este artículo te mostraremos:

Si prefiere ver videos a leer artículos, también tenemos un video tutorial para el widget.

Cómo agregar texto animado en WordPress

Texto animado

Porque Complementos Qi para Elementor es una colección de widgets para Elementor, su sitio web debe tener Elementor instalado y activado antes de instalar y activar el complemento. El creador de sitios web viene en versiones gratuitas y pro pagas. Nuestro complemento no requiere la versión pro. Una instalación gratuita regular es todo lo que necesita para disfrutar de todos los beneficios de Qi Addons para Elementor.

Una vez que Qi Addons para Elementor esté instalado y activado, notará un nuevo conjunto de elementos y widgets en su panel de elementos de Elementor. Para comenzar a crear su efecto de texto animado, busque «texto animado» en el panel lateral izquierdo para que aparezca el widget.

Widget de texto animado

El siguiente paso debería ser simplemente arrastrar el widget a una sección de la página. Dependiendo del diseño de su página, puede agregarlo a una columna en una sección de varias columnas. El diseño de sección que usamos fue el predeterminado de una sola columna.

En relación :  ¿Qué es un Gravatar y cómo conseguir uno?

Cómo editar el contenido y la animación

Después de arrastrar el widget a una sección, la pestaña Contenido del complemento se abrirá en la sección Opciones generales. Aquí es donde puede cambiar el texto predeterminado del widget y agregar el suyo. Puede agregar palabras, frases, oraciones o párrafos completos, sea cual sea el texto que desee animar.

Para nuestro ejemplo, usamos la oración «Elija su estilo de animación».

Título de texto animado

La siguiente opción es la más grande: aparecer animación. Es donde puede elegir qué partes del texto (palabras, letras o el texto completo) se moverán juntas en la animación. También puede elegir la dirección desde la que aparecerá el texto en la página y establecer el retraso de aparición: cuánto tiempo después de que el visitante llega a la sección de texto animado comenzará la animación.

Las opciones que elegimos incluyeron dividir el título por letra, hacer que las letras aparezcan desde la parte superior y que la animación aparezca con un retraso de 200 milisegundos.

Texto animado desde arriba

Puede combinar diferentes tipos de divisiones y animaciones para crear el efecto deseado. Por ejemplo, si busca un efecto de escritura, establecerá la división «por letra» y una animación «desde la derecha».

Una vez que se haya decidido por el título y las opciones de animación, puede continuar con el estilo del texto animado.

Cómo dar estilo al texto animado

Las opciones de estilo en el widget son bastante sencillas y fáciles de navegar. Para empezar, algunas opciones le permiten elegir la alineación y la etiqueta del título del texto. Para En esta demostración, elegimos la alineación central y la etiqueta de título H3.

Alineación de texto animado y etiqueta H

Las siguientes opciones tratan con el color del texto y la tipografía (familia de fuentes, tamaño, peso, estilo, transformación de texto, decoración, así como la altura de línea y el espaciado de letras). No cambiamos el color del texto, pero hicimos un par de cambios en las opciones de tipografía. Cambiamos el tamaño de las letras a 70 píxeles y el peso a 400.

Tipografía de texto animado

Elegimos no cambiar las opciones de relleno del título porque no queríamos aumentar el espacio alrededor de nuestro texto. Entonces, nuestro texto animado de muestra estaba listo para ser mostrado. En general, solo tomó un par de minutos crearlo y los resultados se vieron geniales.

¡Vamos a envolverlo!

Cuando se trata de opciones de diseño a las que tiene acceso al crear páginas web, más es mejor. No ocurre lo mismo con su uso, ya que muchas opciones funcionan mejor cuando se consideran cuidadosamente y se agregan de una manera que maximiza su efecto.

En relación :  Cómo cambiar los agentes de usuario en los navegadores Chrome, Firefox y Edge

Para la animación de texto, esto significa dejar que haga lo que mejor sabe hacer: llamar la atención sobre fragmentos de texto que de otro modo serían estáticos. Ya sea que lo esté usando para desvanecer párrafos completos de texto o para crear oraciones usando el efecto de escritura, Qi Addons para Elementor y el widget de Texto animado serán las herramientas perfectas para agregar texto animado en WordPress.