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 leen las personas, 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 bloque de texto CSS a su título y también podrá descargar el archivo JSON del diseño de forma gratuita.

Descargar el tutorial GRATIS

Para descargar el fichero JSON de este tutorial, será necesario descargarlo usando el botón de descarga, suscribiendose a nuestra lista de correo electrónico mediante el siguiente formulario. 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 «volverá a suscribir» ni recibirá correos electrónicos adicionales.

Avance

Antes de sumergirnos en el tutorial, echemos un vistazo rápido al resultado en diferentes tamaños de pantalla.

Escritorio

animaciones de bloque de texto

Móvil

animaciones de bloque de texto

¡Comencemos a recrear!

Agregar sección # 1

Fondo degradado

Comience agregando una sección regular 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 de degradado: 63 grados

animaciones de bloque de texto

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:

  • Relleno superior: 7vw (escritorio), 20vw (tableta), 25vw (teléfono)
  • Acolchado inferior: 7vw (escritorio), 20vw (tableta), 25vw (teléfono)

animaciones de bloque de texto

Frontera

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

animaciones de bloque de texto

Agregar nueva fila

Estructura de columna

Continúe agregando una nueva fila a la sección utilizando la siguiente estructura de columnas:

animaciones de bloque de texto

Dimensionamiento

Abra la configuración de fila y cambie la configuración de tamaño en consecuencia:

  • Ancho: 100%
  • Ancho Máx .: 100%

animaciones de bloque de texto

Agregar módulo de texto a la columna

Añadir contenido H1

Luego, agregue un Módulo de texto con un título H1 de su elección.

animaciones de bloque de texto

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. La ID de CSS debe ser diferente para cada palabra.

<h1> <div id = ”word-1 ″ class =” display-state ”> Listo </div>
<div id =” word-2 ″ class = ”display-state”> a </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”> Sitios web? </div> </h1>

animaciones de bloque de texto

Configuraciones 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 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

animaciones de bloque de texto

Espaciado

Luego, modifique los valores de margen en diferentes tamaños de pantalla.

  • Margen izquierdo: 20vw (escritorio y tableta), 15vw (teléfono)
  • Margen derecho: 35vw (escritorio), 20vw (tableta), 15vw (teléfono)

animaciones de bloque de texto

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 años
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>

animaciones de bloque de texto

Espaciado

Pase a la pestaña de diseño del módulo y elimine todo el relleno inferior predeterminado.

  • Margen inferior: 0px

animaciones de bloque de texto

Agregar módulo de botón a columna

Agregar copia

El siguiente módulo que necesitamos es un Módulo de botones. Ingrese una copia de su elección.

animaciones de bloque de texto

Configuraciones 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

animaciones de bloque de texto

  • Fuente del botón: trabajo sin

animaciones de bloque de texto

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 (escritorio y tableta), 15vw (teléfono)
  • Relleno 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)

animaciones de bloque de texto

Animación

Personaliza la configuración de animación también.

  • Estilo de Animación: Flip
  • Dirección de animación: abajo
  • Retraso de animación: 2000 ms
  • Intensidad de animación: 100%
  • Opacidad de inicio de animación: 100%
  • Curva de velocidad de animación: facilidad de entrada y salida
  • Repetición de animación: una vez

animaciones de bloque de texto

Agregar Sección # 2

Continúe agregando una nueva sección regular justo debajo de la anterior.

animaciones de bloque de texto

Espaciado

Abra la configuración de la sección y elimine el relleno superior predeterminado.

  • Relleno superior: 0px

animaciones de bloque de texto

Agregar nueva fila

Estructura de columna

Continúe agregando una nueva fila utilizando la siguiente estructura de columnas:

animaciones de bloque de texto

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áx .: 100%

animaciones de bloque de texto

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.

animaciones de bloque de texto

Color de fondo

Agrega un color de fondo blanco.

  • Color de fondo: #ffffff

animaciones de bloque de texto

Configuraciones de texto

Pase a la pestaña de diseño del módulo y modifique la configuración de 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

animaciones de bloque de texto

Espaciado

Agregue algunos valores de espaciado personalizados en diferentes tamaños de pantalla también.

  • 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)
  • Relleno 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)

animaciones de bloque de texto

Sombra de la caja

Y complete la configuración del módulo aplicando una sombra de cuadro sutil. ¡Eso es!

  • Caja Shadow Blur Fuerza: 50px
  • Color de sombra: rgba (0,0,0,0.1)

animaciones de bloque de texto

Por Prunaestudio

Por Prunaestudio

Prunaestudio es un estudio de diseño web ubicado en Valencia (España). Estamos especializados en el diseño web basado en WordPress con la plantilla premium de Elegantthemes, Divi.

* Todos el contenido pertenece y se ha traducido del blog de Elegantthemes (Divi Resources)

Nuestras últimas entradas

You have Successfully Subscribed!