Su título es una de las partes más importantes de su página de inicio. Por lo general, es la primera copia que lee la gente, 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 título, disfrutará de esta publicación. En este tutorial, le mostraremos cómo agregar animaciones de bloque de texto CSS a su título y también podrá descargar el archivo JSON del diseño de forma gratuita.
Hagámoslo.
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 de 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 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!
¡Empecemos a Recrear!
Añadir Sección #1
Fondo degradado
Comience agregando una sección normal a una página nueva o a 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 gradiente: lineal
- Dirección del gradiente: 63 grados
Espaciado
Pase 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)
Borde
Agregue 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 utilizando 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.
|
01
02
03
04
05
|
<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
Pase a la pestaña de diseño del módulo y modifique la configuración de texto H1 en consecuencia:
- Fuente del título: Work Sans
- Peso de la fuente del encabezado: Medio
- Color del texto del título: #ffffff
- Tamaño del texto del encabezado: 4vw (escritorio), 5vw (tableta), 6vw (teléfono)
- Altura de la línea de encabezado: 1,4 em
Espaciado
Luego, modifique los valores de margen en diferentes tamaños de pantalla.
- Margen izquierdo: 20vw (computadora de 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 un código CSS. Agregaremos ese código CSS a un nuevo módulo de código.
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
dieciséis
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
|
<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
Pase a la pestaña de diseño del módulo y elimine todo el relleno inferior predeterminado.
- Margen inferior: 0px
Agregar copia
El siguiente módulo que necesitamos es un módulo de botones. Introduzca alguna copia de su elección.
Configuración de botones
Pase a la pestaña de diseño del módulo y cambie la configuración del botón 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 márgenes personalizados y valores de relleno en diferentes tamaños de pantalla.
- Margen superior: 3vw (escritorio),
- Margen izquierdo: 20vw (computadora de 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)
- Relleno izquierdo: 1.8vw (escritorio), 3vw (tableta), 6vw (teléfono)
- Relleno derecho: 1.8vw (escritorio), 3vw (tableta), 6vw (teléfono)
Animación
Personaliza también la configuración de la animación.
- Estilo de animación: Voltear
- Dirección de animación: Abajo
- Retardo de animación: 2000ms
- Intensidad de animación: 100%
- Opacidad inicial de animación: 100%
- Curva de velocidad de animación: Facilidad de entrada y salida
- Repetición de animación: una vez
Añadir Secció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 de descripción de su elección.
Color de fondo
Agregue un color de fondo blanco.
- Color de fondo: #ffffff
Configuración de texto
Pase a la pestaña de diseño del módulo y modifique la configuración del texto en consecuencia:
- Fuente del texto: Work Sans
- Color del texto: #9b9b9b
- Tamaño de texto: 1vw (escritorio), 2vw (tableta), 3vw (teléfono)
- Altura de línea de texto: 2,6 em
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)
- Relleno 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 sutil sombra de cuadro. ¡Eso es todo!
- Fuerza de desenfoque de sombra de cuadro: 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 bloque 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 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 regalos de Divi, asegúrese de suscribirse a nuestro boletín de correo electrónico y al canal de YouTube para que siempre sea una de las primeras personas en conocer y obtener los beneficios de este contenido gratuito.