Tu título es una de las partes más importantes de tu página de inicio. Esto suele ser lo que ves primero y, por tanto, lo que determina la primera impresión. Como cualquier otra primera impresión, quieres que sea buena. Ahora, si está buscando una forma creativa de presentar su título, disfrutará de este tutorial, ya que le mostraremos cómo agregar animaciones de bloques de texto CSS a su título y también puede descargar el archivo JSON de diseño de forma gratuita.
vista
Antes de sumergirnos en el tutorial, echemos un vistazo al resultado en diferentes tamaños de pantalla.
Empecemos el diseño
Agregar sección # 1
Fondo degradado
Comience agregando una sección normal a una nueva página 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: # f0f2b
- Color 2: # c10b1a
- Tipo de gradiente: lineal
- Dirección gradiente: 63deg
espaciamiento
Cambie 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
Agregue también un borde a la sección.
- Ancho del borde: 2vw (arriba, izquierda, derecha)
- Ancho del borde inferior: 0vw
- Color del borde: #ffffff
Añadir una nueva linea
Estructura de la columna
Continúe agregando una nueva línea a la sección utilizando la siguiente estructura de columnas:
apresto
Abra los parámetros de línea y modifique los parámetros de dimensionamiento en consecuencia:
- Ancho: 100%
- Ancho máximo: 100%
Agregar un 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.
Agregue etiquetas Div a cada palabra en el título H1
Cambie a la pestaña de texto de su copia del título y agregue un div diferente a cada palabra en su título. El ID de CSS debe ser diferente para cada palabra.
Listo
a
Construir
Hermoso
Sitios web?
Configuraciones de texto H1
Cambie a la pestaña de diseño del módulo y cambie la configuración del texto H1 en consecuencia:
- Fuente del título: Work Sans
- Peso de la fuente del título: 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 la cabeza: 1,4 em
espaciamiento
Luego, cambie 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 un 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 este 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>
espaciamiento
Cambie a la pestaña de diseño del módulo y elimine todo el acolchado inferior predeterminado.
- Margen inferior: 0px
Agregar un módulo de botón a la columna
Añadir una copia
El siguiente módulo que necesitamos es un módulo de botones. Ingrese una copia de su elección.
Configuraciones de botones
Cambie a la pestaña de diseño del módulo y cambie la configuración de los botones en consecuencia:
- Use estilos personalizados para el botón: Sí
- Tamaño del texto del botón: 1vw (escritorio), 2vw (tableta), 3vw (teléfono)
- Color de 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
espaciamiento
Luego, vaya a la configuración de espaciado y aplique valores de margen y relleno personalizados en diferentes tamaños de pantalla.
- Margen superior: 3vw (oficina),
- 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)
- Relleno 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 la animación: abajo
- Retardo de animación: 2000 ms
- Intensidad de animación: 100%
- Opacidad de inicio de la animación: 100%
- Curva de velocidad de animación: facilidad de entrada y salida
- Repetición de animación: una vez
Agregar sección # 2
Continúe agregando una nueva sección regular justo debajo de la anterior.
espaciamiento
Abra la configuración de la sección y elimine el relleno superior predeterminado.
- Relleno superior: 0px
Añadir una nueva linea
Estructura de la columna
Continúe agregando una nueva fila utilizando la siguiente estructura de columnas:
apresto
Sin agregar más módulos, abra los parámetros de la línea y deje que la línea ocupe todo el ancho del contenedor de la sección.
- Ancho: 100%
- Ancho máximo: 100%
Agregar un módulo de texto a la columna
Agregar contenido
A continuación, agregue un módulo de texto con un contenido descripción de su elección.
Color de fondo
Agrega un color de fondo blanco.
- Color de fondo: #ffffff
Configuraciones de texto
Cambie a la pestaña de diseño del módulo y cambie 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
espaciamiento
También agregue 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)
Caja de sombra
Y complete la configuración del módulo aplicando una sombra de cuadro sutil. ¡Eso es!
- Fuerza de desenfoque de sombra de caja: 50 px
- Color de sombra: rgba (0,0,0,0,1)
vista
Ahora que hemos seguido todos los pasos, echemos un vistazo final a cómo se ve en diferentes tamaños de pantalla.
Consideraciones finales
En este artículo, 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 animación a su título definitivamente puede ayudar! También pudo descargar el archivo JSON de 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.
Traducido de: Temas elegantes
