Cómo agregar animaciones de bloques de texto CSS a su título con Divi
Publicado: 2020-01-25Su título es una de las partes más importantes de su página de inicio. Por lo general, es la primera copia que la gente lee, lo que la convierte en su primera impresión. Como cualquier otra primera impresión, quieres que sea buena. Ahora, si está buscando una forma creativa de mostrar su titular, disfrutará de esta publicación. En este tutorial, le mostraremos cómo agregar animaciones de bloques de texto CSS a su título y también podrá descargar el archivo JSON del diseño de forma gratuita.
Hagámoslo.
Avance
Antes de sumergirnos en el tutorial, echemos un vistazo rápido al resultado en diferentes tamaños de pantalla.
Escritorio
Móvil
Descargue el diseño de animación del bloque de texto GRATIS
Para poner sus manos en el diseño de animación de bloque de texto gratuito, 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.
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.
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!
¡Empecemos a recrear!
Agregar la sección n. ° 1
Fondo degradado
Comience agregando una sección normal a una nueva página o la página en la que está trabajando. Abra la configuración de la sección y aplique el siguiente fondo degradado:
- Color 1: # ff0f2b
- Color 2: # c10b1a
- Tipo de degradado: lineal
- Dirección del gradiente: 63 grados
Espaciado
Vaya a la pestaña de diseño de la sección y aplique los siguientes valores de relleno superior e inferior personalizados en diferentes tamaños de pantalla:
- Acolchado superior: 7vw (escritorio), 20vw (tableta), 25vw (teléfono)
- Acolchado inferior: 7vw (escritorio), 20vw (tableta), 25vw (teléfono)
Frontera
Agrega un borde a la sección también.
- Ancho del borde: 2vw (superior, izquierda, derecha)
- Ancho del borde inferior: 0vw
- Color del borde: #ffffff
Agregar nueva fila
Estructura de la columna
Continúe agregando una nueva fila a la sección usando la siguiente estructura de columnas:
Dimensionamiento
Abra la configuración de la fila y cambie la configuración de tamaño en consecuencia:
- Ancho: 100%
- Ancho máximo: 100%
Agregar módulo de texto a la columna
Agregar contenido H1
Luego, agregue un módulo de texto con un título H1 de su elección.
Agregue etiquetas Div a cada palabra en el título H1
Cambie a la pestaña de texto de la copia de su título y agregue un div diferente a cada palabra de su título. El ID de CSS debe ser diferente para cada palabra.
<h1><div id="word-1" class="display-state">Ready</div> <div id="word-2" class="display-state">to</div> <div id="word-3" class="display-state">Build</div> <div id="word-4" class="display-state">Beautiful</div> <div id="word-5" class="display-state">Websites?</div></h1>
Configuración de texto H1
Vaya a la pestaña de diseño del módulo y modifique la configuración del texto H1 en consecuencia:
- Fuente de encabezado: Work Sans
- Peso de la fuente del encabezado: Medio
- Color del texto del encabezado: #ffffff
- Tamaño del texto del encabezado: 4vw (escritorio), 5vw (tableta), 6vw (teléfono)
- Altura de la línea de rumbo: 1.4em
Espaciado
Luego, modifique los valores de los márgenes en diferentes tamaños de pantalla.
- Margen izquierdo: 20vw (escritorio y tableta), 15vw (teléfono)
- Margen derecho: 35vw (escritorio), 20vw (tableta), 15vw (teléfono)
Agregar módulo de código a la columna
Insertar código CSS
Para que la animación del bloque de texto se aplique a nuestro título, necesitaremos algo de código CSS. Agregaremos ese código CSS a un nuevo módulo de código.
<style>
.display-state {
display: inline !important;
}
#word-1 {
-webkit-animation: slide-right 0.5s linear 0.3s both;
animation: slide-right 0.5s linear 0.3s both;
}
#word-2 {
-webkit-animation: slide-right 0.5s linear 0.6s both;
animation: slide-right 0.5s linear 0.6s both;
}
#word-3 {
-webkit-animation: slide-right 0.5s linear 0.9s both;
animation: slide-right 0.5s linear 0.9s both;
}
#word-4 {
-webkit-animation: slide-right 0.5s linear 1.2s both;
animation: slide-right 0.5s linear 1.2s both;
}
#word-5 {
-webkit-animation: slide-right 0.5s linear 1.5s both;
animation: slide-right 0.5s linear 1.5s both;
}
@-webkit-keyframes slide-right {
0% {
background-color: #000;
opacity: 0.5;
color: transparent;
}
1% {
opacity: 1;
}
}
</style>
Espaciado
Vaya a la pestaña de diseño del módulo y elimine todo el relleno inferior predeterminado.
- Margen inferior: 0px
Agregar módulo de botones a la columna
Agregar copia
El siguiente módulo que necesitamos es un módulo de botones. Ingrese alguna copia de su elección.
Configuración de botones
Vaya a la pestaña de diseño del módulo y cambie la configuración de los botones en consecuencia:
- Usar estilos personalizados para el botón: Sí
- Tamaño del texto del botón: 1vw (escritorio), 2vw (tableta), 3vw (teléfono)
- Color del texto del botón: #ffffff
- Color de fondo del botón: # 000000
- Ancho del borde del botón: 0px
- Fuente del botón: Work Sans
Espaciado
Luego, vaya a la configuración de espaciado y aplique algunos valores de margen y relleno personalizados en diferentes tamaños de pantalla.
- Margen superior: 3vw (escritorio),
- Margen izquierdo: 20vw (escritorio y tableta), 15vw (teléfono)
- Acolchado superior: 1.2vw (escritorio), 2vw (tableta), 4vw (teléfono)
- Acolchado inferior: 1.2vw (escritorio), 2vw (tableta), 4vw (teléfono)
- Acolchado izquierdo: 1.8vw (escritorio), 3vw (tableta), 6vw (teléfono)
- Relleno derecho: 1.8vw (escritorio), 3vw (tableta), 6vw (teléfono)
Animación
Personalice también la configuración de la animación.
- Estilo de animación: Flip
- Dirección de animación: Abajo
- Retraso de animación: 2000 ms
- Intensidad de animación: 100%
- Opacidad inicial de la animación: 100%
- Curva de velocidad de animación: Ease-In-Out
- Repetición de animación: una vez
Agregar sección n. ° 2
Continúe agregando una nueva sección regular justo debajo de la anterior.
Espaciado
Abra la configuración de la sección y elimine el relleno superior predeterminado.
- Relleno superior: 0px
Agregar nueva fila
Estructura de la columna
Continúe agregando una nueva fila usando la siguiente estructura de columnas:
Dimensionamiento
Sin agregar ningún módulo todavía, abra la configuración de la fila y permita que la fila ocupe todo el ancho del contenedor de la sección.
- Ancho: 100%
- Ancho máximo: 100%
Agregar módulo de texto a la columna
Agregar contenido
Luego, agregue un módulo de texto con algún contenido descriptivo de su elección.
Color de fondo
Agrega un color de fondo blanco.
- Color de fondo: #ffffff
Configuración de texto
Vaya a la pestaña de diseño del módulo y modifique la configuración del texto en consecuencia:
- Fuente de texto: Work Sans
- Color del texto: # 9b9b9b
- Tamaño del texto: 1vw (escritorio), 2vw (tableta), 3vw (teléfono)
- Altura de la línea de texto: 2.6em
Espaciado
Agregue también algunos valores de espaciado personalizados en diferentes tamaños de pantalla.
- Margen superior: -5vw (escritorio), -20vw (tableta), -27vw (teléfono)
- Margen izquierdo: 20vw (escritorio), 13vw (tableta), 8vw (teléfono)
- Margen derecho: 20vw (escritorio), 13vw (tableta), 8vw (teléfono)
- Acolchado superior: 5vw (escritorio), 7vw (tableta y teléfono)
- Acolchado inferior: 5vw (escritorio), 7vw (tableta y teléfono)
- Acolchado izquierdo: 3vw (escritorio), 5vw (tableta), 6vw (teléfono)
- Relleno derecho: 3vw (escritorio), 5vw (tableta), 6vw (teléfono)
Sombra de la caja
Y complete la configuración del módulo aplicando una sombra de cuadro sutil. ¡Eso es todo!
- Fuerza de desenfoque de sombra de caja: 50px
- Color de sombra: rgba (0,0,0,0.1)
Avance
Ahora que hemos seguido todos los pasos, echemos un vistazo final al resultado en diferentes tamaños de pantalla.
Escritorio
Móvil
Pensamientos finales
En esta publicación, le mostramos cómo agregar animaciones de bloques de texto CSS a su título. Es importante asegurarse de que su título sea visible y leído desde el principio, ¡agregar una animación a su título sin duda puede ayudar con eso! También pudo descargar el archivo JSON del diseño de forma gratuita. Si tiene alguna pregunta o sugerencia, no dude en dejar un comentario en la sección de comentarios a continuación.
Si está ansioso por aprender más sobre Divi y obtener más obsequios de Divi, asegúrese de suscribirse a nuestro boletín por correo electrónico y al canal de YouTube para que siempre sea una de las primeras personas en conocer y obtener beneficios de este contenido gratuito.