Cómo animar letras para diseños de texto únicos en Divi


La animación se ha convertido en una parte común de la experiencia del usuario en los sitios web modernos. Además del hecho de que se ve genial, también puede agregar un elemento interactivo sutil que atrae al usuario al darle vida al contenido. Los efectos de animación integrados de Divi te permiten animar casi cualquier elemento de una página con diferentes estilos de animación.

En este tutorial, le mostraré cómo animar letras para algunos diseños de texto únicos en Divi. Al poner letras individuales en un módulo de texto, puede orientar la animación de cada letra con diferentes estilos de animación, duración y retrasos que harán que el contenido se destaque de una manera creativa. Esta técnica es puramente con fines de diseño, ya que las letras que componen el contenido no serán muy amigables con el SEO. Sin embargo, las letras animadas le permiten compartir su historia con los usuarios de una manera sorprendente.

Empecemos.

Vistazo

animar letras en divi

animar letras en divi

animar letras en divi

animar letras en divi

animar letras en divi

animar letras en divi

Descargue GRATIS el diseño de ejemplos de diseño de animación de letras

Para poner sus manos sobre los diseños de animación de letras de este tutorial, primero deberá descargarlo usando el botón a continuación. Para obtener acceso a la descarga, deberá suscribirse a nuestra lista de correo electrónico Divi Daily mediante el formulario a continuación. ¡Como nuevo suscriptor, recibirás aún más bondad Divi y un paquete Divi Layout gratis todos los lunes! Si ya está en la lista, simplemente ingrese su dirección de correo electrónico a continuación y haga clic en descargar. No se le “volverá a suscribir” ni recibirá correos electrónicos adicionales.

Para importar el diseño a su página, simplemente extraiga el archivo zip y arrastre el archivo json al Divi Builder.

Vayamos al tutorial, ¿de acuerdo?

Empezando

Para este tutorial, todo lo que necesita es Divi. Construiremos los diseños desde cero usando el constructor Divi en la parte frontal. Para comenzar, cree una nueva página, asigne un título a su página e implemente haga clic para usar Divi Builder. Luego, elija la opción "construir desde cero" y haga clic para construir en la interfaz.

¡Ahora estás listo para diseñar!

Construyendo el diseño para animar letras

Agregar la sección, la fila y la columna

Continúe y cree una nueva sección regular con una fila de una columna.

animar letras en divi

Antes de comenzar a agregar nuestros módulos de texto (que contendrán letras blancas), agreguemos una imagen de fondo oscuro a la sección. Abra la configuración de la sección y agregue una imagen de fondo. Estoy usando una imagen de fondo abstracta del diseño prediseñado de la página de destino de la empresa de inversión.

animar letras en divi

Creación de bloques de letras individuales con módulos de texto

Antes de que podamos comenzar a agregar animación a las letras, primero debemos crear un módulo de texto separado para cada letra que queramos agregar. Para este ejemplo, vamos a crear el texto “Divi Design”. Dado que esta frase de texto incluye 11 espacios de caracteres (incluido el espacio entre las letras, necesitaremos agregar 11 módulos de texto diferentes.

Continúe y agregue un módulo de texto a la columna.

animar letras en divi

En el cuadro de contenido, agregue la primera letra de su texto que en este caso es la letra “d”.

animar letras en divi

Luego actualice la configuración de diseño de texto de la siguiente manera:

  • Fuente de texto: Rubik
  • Estilo de fuente de texto: TT
  • Color del texto del texto: #ffffff
  • Texto Tamaño del texto: 80 px (escritorio), 50 px (tableta), 30 px (teléfono)
  • Altura de la línea de texto: 1.6em
  • Orientación del texto: centro

animar letras en divi

A continuación, agregue una animación al módulo de texto de la siguiente manera:

  • Estilo de animación: diapositiva
  • Dirección de animación: Arriba
  • Duración de la animación: 600 ms
  • Retraso de animación: 100 ms
  • Opacidad inicial de la animación: 100%

animar letras en divi

Duplica el módulo de texto y actualiza el contenido con la letra “i”. Luego, aumente el retraso de la animación en 100 ms de la siguiente manera:

  • Retraso de animación: 200 ms

animar letras en divi

Duplique el módulo de texto y actualice el contenido con la letra “v”. Luego, aumente el retraso de la animación a 300 ms.

  • Retraso de animación: 300 ms

animar letras en divi

Duplica el módulo de texto y actualiza el contenido con la letra “i”. Luego, aumente el retraso de la animación a 400 ms.

  • Retraso de animación: 400 ms

animar letras en divi

Para este próximo módulo de texto queremos agregar un espacio en blanco. Duplique el módulo de texto y agregue el siguiente html al cuadro de contenido:

 

No es necesario actualizar el retraso de la animación para este.

Luego duplique el módulo de texto y actualice el contenido con la letra "d". Esta es la primera letra de la palabra "diseño". Luego, aumente el retraso de la animación a 500 ms.

  • Retraso de animación: 500 ms

animar letras en divi

Continúe el proceso de duplicar el módulo de texto y aumentar el retraso de la animación en 100 ms para cada una de las letras restantes que deletrean la palabra "diseño".

  • Letra "e": retraso de animación 600ms
  • Letra "s": retraso de la animación 700ms
  • Letra "i": retraso de la animación 800ms
  • Letra "g": retraso de la animación 900ms
  • Letra "n": retraso de la animación 1000ms

Así es como se ve el diseño hasta ahora.

animar letras en divi

Agregar la propiedad Flex para alinear módulos horizontalmente

Todavía no es el resultado que buscamos. Pero todo lo que necesitamos hacer mágicamente para unir el diseño es agregar un pequeño fragmento de CSS a la columna de la fila. Para hacer esto, abra la configuración de la fila y agregue el siguiente CSS personalizado al elemento principal de la columna.

display: flex;

animar letras en divi

La propiedad display: flex alinea todos los módulos horizontalmente en una tabla flexible que se ajustará maravillosamente a diferentes anchos de navegador. Y dado que los módulos están en una fila de una columna, el diseño no se romperá en tabletas o dispositivos móviles.

También necesitamos agregar un ancho de canalón personalizado para eliminar el margen inferior debajo de las letras y agregar algo de relleno superior e inferior a la fila para que las letras tengan algo de espacio para animarse.

  • Ancho de la canaleta: 1
  • Acolchado personalizado: 5vw superior, 5vw inferior

animar letras en divi

Aquí esta el resultado final.

animar letras en divi

Agregar diferentes estilos de animación

Con esta configuración, puede agregar fácilmente nuevos estilos de animación para obtener efectos completamente únicos. Para hacer esto, puede aprovechar la función de selección múltiple de Divi para actualizar todos los módulos a la vez. En la parte frontal, mantenga presionada la tecla Mayús y haga clic en el primer y último módulo de texto. Luego abra la configuración de uno de los módulos seleccionados.

animar letras en divi

Esto abrirá el modal de configuración del elemento que le permitirá actualizar la configuración para todos los módulos seleccionados. No queremos cambiar el retraso de la animación porque queremos mantener el efecto en cascada en cada una de las letras. Sin embargo, podemos actualizar las otras opciones de animación de diferentes formas para crear resultados completamente únicos.

Sugiero duplicar la sección antes de probar una nueva animación para que puedas conservar los ejemplos anteriores.

Aquí están algunos ejemplos.

Animación de texto con zoom inverso

Para animar letras con un efecto de zoom inverso, actualice la configuración del elemento (la configuración de todos los módulos) con lo siguiente:

  • Estilo de animación: Zoom
  • Dirección de animación: Centro
  • Intensidad de animación: 200%

animar letras en divi

Aquí esta el resultado final.

animar letras en divi

Animación de texto ondulado

Para animar letras con un efecto de onda rodante, actualice la configuración del elemento (la configuración de todos los módulos) con lo siguiente:

  • Estilo de animación: Rotar
  • Dirección de animación: Arriba
  • Intensidad de animación: 100%

animar letras en divi

Aquí esta el resultado final.

animar letras en divi

Animación de texto Domino

Para animar texto con un efecto dominó, actualice la configuración del elemento (la configuración de todos los módulos) con lo siguiente:

  • Estilo de animación: Flip
  • Dirección de animación: izquierda
  • Intensidad de animación: 100%

animar letras en divi

Aquí esta el resultado final.

animar letras en divi

Animación de texto stand-up

Para animar texto con un efecto dominó, actualice la configuración del elemento (la configuración de todos los módulos) con lo siguiente:

  • Estilo de animación: pliegue
  • Dirección de animación: Arriba
  • Intensidad de animación: 100%

animar letras en divi

Luego, agregue perspectiva para crear un elemento de diseño 3D agregando el siguiente CSS al Elemento de la columna principal en la configuración de la fila.

CSS del elemento de columna principal:

perspective: 1000px;

animar letras en divi

Aquí esta el resultado final.

animar letras en divi

Animar letras usando una combinación de direcciones de animación

Si desea ser más creativo, puede animar letras usando una combinación de efectos de animación. Para este ejemplo, usaré una combinación de direcciones de animación e intensidad para el estilo de diapositiva. Esto nos dará una presentación completamente única.

He aquí cómo hacerlo.

Primero, duplique una de las secciones que construimos previamente para que podamos comenzar con el proceso de diseño.

Luego, elimine los primeros 4 módulos de texto para que solo se muestre el texto "diseño".

animar letras en divi

Configuración de la sección

A continuación, dado que queremos que algunas de las letras de la animación comiencen fuera de la ventana gráfica de la sección, necesitaremos agregar un pequeño fragmento de CSS a la configuración de la sección de la siguiente manera:

overflow: hidden;

animar letras en divi

Esto mantendrá las letras ocultas hasta que entren en la sección.

Configuración de filas

Ahora, para asegurarnos de que nuestros módulos de texto (letras) permanezcan centrados, debemos agregar el siguiente CSS a la configuración de la fila:

display:flex;
justify-content: center;

animar letras en divi

Configuración común del módulo de texto

Mediante selección múltiple, actualice los seis módulos de texto con la siguiente configuración de elementos:

  • Margen personalizado: 3% a la izquierda, 3% a la derecha
  • Ancho del borde: 1 px
  • Color del borde: #ffffff

animar letras en divi

  • Estilo de animación: diapositiva
  • Duración de la animación: 2000ms
  • Retraso de animación: 100 ms
  • Intensidad de la animación: 300%

animar letras en divi

Eso se encarga de la configuración básica de animación que será común a todos los módulos de texto. Ahora podemos modificar la configuración de animación para ellos individualmente.

Configuración individual del módulo de texto

En este punto, podemos divertirnos modificando la configuración del módulo de texto individual para cambiar la dirección de la animación para cada uno. Esto nos permitirá animar letras de una manera completamente única. Para cada letra, actualice la dirección e intensidad de la animación de la siguiente manera:

  • Letra D

    Dirección de animación: Arriba

  • Letra e

    Dirección de animación: Abajo

  • Letra s

    Dirección de animación: izquierda
    Intensidad de animación: 80%

  • Letra i

    Dirección de animación: Derecha
    Intensidad de animación: 80%

  • Letra g

    Dirección de animación: Abajo

  • Letra n

    Dirección de animación: Arriba

Aquí está el diseño final.

animar letras en divi

Y así es como se ve en el móvil.

animar letras en divi

animar letras en divi

Pensamientos finales

Creo que es seguro decir que Divi tiene muchas formas de animar letras una vez que tienes la configuración adecuada. Y tengo que decir que fue bastante difícil dejar de jugar con la configuración de la animación al crear estos ejemplos. ¡Hay tantas variaciones posibles para probar! De todos modos, espero que esto te sirva de inspiración para tu próximo proyecto. En todo caso, es posible que desee construirlo solo por el gusto de hacerlo.

Espero tener noticias tuyas en los comentarios.

¡Salud!