La animación se ha convertido en una parte común de la experiencia del usuario en los sitios web modernos. Aparte del hecho de que se ve genial, también puede agregar un elemento interactivo sutil que atraiga al usuario al darle vida al contenido. Divi y sus efectos de animación integrados te permiten animar casi cualquier elemento de una página con diferentes estilos de animación.
En este tutorial, te 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 demoras que harán que el contenido se destaque de 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 te permiten compartir tu historia con los usuarios de una manera sorprendente.
Empecemos.
Descargue el diseño de ejemplos de diseño de animación de letras GRATIS
Para tener en sus manos 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 nuestro boletín utilizando 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 será «resuscrito» ni recibirá correos electrónicos adicionales.

Descárgalo gratis
Únase al boletín informativo 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 muchos otros recursos, consejos y trucos increíbles y gratuitos de Divi. Síguenos y serás un maestro 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.
You have successfully subscribed. Please check your email address to confirm your subscription and get access to free weekly Divi layout packs!
Para importar el diseño a su página, simplemente extraiga el archivo zip y arrastre el archivo json a Divi Builder.
Vayamos al tutorial, ¿de acuerdo?
Empezando
Para este tutorial, todo lo que necesitas es Divi. Construiremos los diseños desde cero utilizando el constructor Divi en la parte delantera. 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 delantera.
¡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 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 prefabricado de la página de destino de Investment Company.
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 queremos 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 del texto: Rubik
- Estilo de fuente de texto: TT
- Texto Color del texto: #ffffff
- Texto Tamaño del texto: 80 px (escritorio), 50 px (tableta), 30 px (teléfono)
- Altura de línea de texto: 1,6 em
- 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
- Retardo de animación: 100ms
- Opacidad inicial de 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:
- Retardo de animación: 200ms
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.
- Retardo de animación: 300ms
Duplica el módulo de texto y actualiza el contenido con la letra “i”. Luego aumente el retraso de la animación a 400ms.
- Retardo de animación: 400ms
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:
01
|
|
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.
- Retardo de animación: 500ms
Continúe con el proceso de duplicación del módulo de texto y aumente el retraso de la animación en 100 ms para cada una de las letras restantes que forman la palabra «diseño».
- Letra «e»: retraso de animación 600ms
- Letra «s»: retraso de animación 700ms
- Letra «i»: retraso de animación 800ms
- Letra «g»: retraso de animación 900ms
- Letra «n»: retraso de animación 1000ms
Así es como se ve el diseño hasta ahora.
Agregar propiedad Flex para alinear módulos horizontalmente
Todavía no es el resultado que estamos buscando. Pero todo lo que necesitamos hacer mágicamente para juntar 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.
01
|
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 medianil personalizado para sacar el margen inferior debajo de las letras y agregar un poco de relleno superior e inferior a la fila para que las letras tengan espacio para animarse.
- Ancho del canalón: 1
- Acolchado personalizado: 5vw arriba, 5vw abajo
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 de elementos que le permitirá actualizar la configuración de 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 maneras para crear resultados completamente únicos.
Sugiero duplicar la sección antes de probar una nueva animación para que pueda 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 de onda rodante
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: Girar
- 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: Voltear
- 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 columna principal en la configuración de fila.
Elemento CSS de la columna principal:
01
|
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.
Aquí está cómo hacerlo.
Primero, duplique una de las secciones que construimos anteriormente 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».
Ajustes de 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:
01
|
overflow : hidden ; |
Esto mantendrá las letras ocultas hasta que entren en la sección.
Configuración de fila
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:
01
02
|
display : flex ; justify-content : center ; |
Configuración común del módulo de texto
Con la 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: 1px
- Color del borde: #ffffff
- Estilo de animación: Diapositiva
- Duración de la animación: 2000ms
- Retardo de animación: 100ms
- Intensidad de animación: 300%
Eso se ocupa de la configuración básica de animación que será común a todos los módulos de texto. Ahora podemos ajustar la configuración de animación para ellos individualmente.
Ajustes individuales del módulo de texto
En este punto, podemos divertirnos ajustando 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 y la intensidad de la animación de la siguiente manera:
- Dirección de animación de la letra D
: 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% - Dirección de la animación de la letra G
: Abajo - Dirección de animación de la letra 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 diversión.
Espero escuchar de usted en los comentarios.
¡Salud!