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 incorporados de Divi le permiten animar casi cualquier elemento en 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 colocar 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

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.

Descarga los archivos

Descárgalo gratis

Únase al boletín de Divi y le enviaremos por correo electrónico una copia del último paquete de diseño de página de destino de Divi, además de toneladas de otros recursos, consejos y trucos increíbles y gratuitos de Divi. Síguelo y serás un maestro de Divi en poco tiempo. Si ya está suscrito, simplemente escriba su dirección de correo electrónico a continuación y haga clic en descargar para acceder al paquete de diseño.

DESCARGAR

Te has suscripto satisfactoriamente. ¡Verifique su dirección de correo electrónico para confirmar su suscripción y obtenga acceso a paquetes de diseño Divi semanales gratuitos!

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 parte frontal.

¡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.

Antes de comenzar a agregar nuestros módulos de texto (que contendrán letras blancas), agreguemos una imagen de fondo oscura 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.

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.

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

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

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: 600ms
• Retraso de animación: 100 ms
• Opacidad inicial de la animación: 100%

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

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

• Retraso de animación: 300 ms

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

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

Continúe con 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 la 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.

Adición de la propiedad Flex para alinear módulos horizontalmente

Aún 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;

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

Aquí esta el resultado final.

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.

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 de 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%

Aquí esta el resultado final.

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%

Aquí esta el resultado final.

Animación de texto de dominó

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%

Aquí esta el resultado final.

Animación de texto de pie

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: Doblar
• Dirección de animación: Arriba
• Intensidad de animación: 100%

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

CSS del elemento de columna principal:

perspective: 1000px;

Aquí esta el resultado final.

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".

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;

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;

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

Usando 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

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

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 la animación: 80%
• Letra i
  Dirección de animación: Derecha
  Intensidad de la 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.

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

Pensamientos finales

Creo que es seguro decir que Divi tiene muchas formas de animar letras una vez que tienes la configuración adecuada. Y debo 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!