Cómo hacer que tu título aparezca con Div

Su título suele ser lo primero que la gente lee al visitar su sitio web. Además de tener un muy buen título, también es importante hacer que las personas observen y lean todo lo que les muestre. Los títulos no suelen pasar desapercibidos debido a su tamaño y posición central en la sección de héroes, pero si desea dar un paso más y literalmente tomar el título, este tutorial es para usted. Combinaremos la configuración de la división para crear un título Para destacar y atraer la atención de sus visitantes. Dividiremos el título en 5 piezas y crearemos un efecto flash que haga que sus visitantes quieran seguir el movimiento y leer lo que se comparte.
¡Vamos a eso! Vista previa antes de arrojar nuestras cabezas en el tutorial, para echar un vistazo rápido al resultado en diferentes tamaños de pantalla. Escritorio

Móvil

¡Comencemos a recrear! ¡Agregue un nuevo color de fondo para comenzar a crear! Cree una nueva página y agregue una sección normal. Abra la configuración de la sección y cambie el color de fondo.
El color del fondo: #ededed

Extienda luego, acceda a la configuración de espaciado de la sección y agregue algunos rellenos inferiores personalizados.
Revestimiento inferior: 10 VW

Agregue la estructura de la columna de la fila # 1 Continuar agregando una nueva fila utilizando la siguiente estructura de columna:

Color de fondo sin agregar módulos, abra la configuración de la fila y cambie el color de fondo de la fila.
Color de fondo: # C9C9C9

Dimensión Vaya a la siguiente configuración de tamaño y permita que la fila ocupe todo el ancho de la pantalla.
Haga esta fila ancho completo: sí
Use el ancho personalizado de la canaleta: el daño de la canaleta: 1
Espacio eliminar y el llenado predeterminado e inferior de la fila.

SUS Lingo: 0 PX
Finamiento inferior: 0 PX
Agregue el módulo de texto no. 1 Agregar contenido es hora de comenzar a agregar módulos. El primer módulo que necesitamos es un módulo de texto. Ingrese la primera parte del título en el cuadro de contenido utilizando el estilo de texto del párrafo.

El color de fondo luego accede a la configuración de fondo del módulo y agregue un color de fondo.

Color de fondo: # C9C9C9
Configuración de texto Cambio y configuración de texto en la pestaña Diseño.

Fuente de texto: Didact Gothic
El peso de la fuente de texto: en negrita
Color de texto: # 000000
Tamaño del texto: 10 VW
La altura de la línea de texto: 0.9em
Orientación de texto: centro
Espacio y cree la forma que desee usando los rellenos superiores e inferiores personalizados.

Revestimiento superior: 10 VW
Revestimiento inferior: 3VW
Animación por último, pero no menos importante, agregaremos una animación. Es importante asegurarse de que la longitud de la animación y la opacidad inicial sean cero. Esto permitirá que el módulo de texto aparezca con un efecto flash.

Estilo de animación: Fade
Repita la animación: una vez
Duración de la animación: 0 ms
Animación de retraso: 1000 ms
Clone El módulo de texto x4 Después de haber terminado de cambiar el primer módulo de texto, puede continuar y clonar el módulo tantas veces como desee, dependiendo de la longitud del título. Para cada lado del título que desea mostrar con un efecto flash, necesitará un módulo de texto separado. Para este ejemplo, necesitaremos 4 módulos adicionales.

Cambie el contenido duplicado # 1 Cambie la copia del primer duplicado.

Color de fondo junto con el color de fondo.

Color de fondo: # 5900ff
El color del texto cambia el color del texto a blanco.

Color de texto: #ffffff
Animación y aumentar el retraso de la animación en la configuración de animación. Esto permitirá que sus visitantes tengan tiempo suficiente para leer el módulo de texto anterior antes de que aparezca.

Retraso de animación: 1500 ms
Cambie el duplicado # 2 Contenido Cambie el contenido del segundo duplicado a continuación.

Color de fondo junto con el color de fondo.

Color de fondo: # FFB200
El color del texto y el color del texto.

Color de texto: #ffffff
Animación nuevamente, nos aseguraremos de que el retraso de la animación sea mayor que el retraso de la animación que se ha utilizado para los dos módulos anteriores. Dejamos 500 ms entre cada uno de ellos para dar a las personas el tiempo suficiente para leer.

Retraso de animación: 2000 ms
Cambie el duplicado no. 3 Contenido Continúe cambiando el contenido del tercer duplicado.

Animación junto con el retraso de la animación.

Retraso de animación: 2500 ms
Cambie el interruptor de contenido # 4 duplicado al siguiente y el último duplicado. Cambiar el contenido.

Color de fondo junto con el color de fondo.


Color de fondo: # 000000
El color del texto cambia y el color del texto.

Color de texto: # 3a3a3a
Animación y aumentar el retraso de la animación en la configuración de animación.

Animación de retraso: 3000 ms
Agregue el margen negativo a cada módulo de texto, excepto el primero después de haber terminado de personalizar todos los módulos de texto, puede ir más allá y puede crear una superposición. Para crear esta superposición, agregaremos un margen superior negativo a cada uno de los módulos de texto duplicados. En otras palabras, nos aseguramos de que todos los módulos que vienen después del primer módulo aparecen por encima del primer módulo de texto. Superior Marja: -21.98VW

Transforma de transformación Transformación Continúa transformando toda la fila, comenzando con la configuración de traducción de transformación.
Abajo: -35VW

Rotar la transformación Modifique los valores de rotación de la transformación.
Izquierda: 320 grados

¡Agregue la estructura de la fila # 2 de la columna por segundo! Ahora que tenemos el efecto del título, podemos comenzar a agregar los módulos restantes. Agregue una nueva fila usando la siguiente estructura de columna:
Dimensión sin agregar módulos, abra la configuración de la fila y permita que la fila ocupe todo el ancho de la pantalla en la configuración del tamaño:

Haga esta fila ancho completo: sí

Use el ancho personalizado de la canaleta: sí
El ancho de la canaleta: 1
Espacio Retire el revestimiento predeterminado de la siguiente fila.
SUS Lingo: 0 PX

Agregue el módulo de texto de título en la columna 2 Agregar contenido H1 ¡Es hora de comenzar a agregar módulos! El primer módulo que necesitamos es un modo de texto. Agregue contenido H1 a su elección.
Configuración de texto H1 Luego acceda a la pestaña de diseño y cambie la configuración de texto H1.

Fuente del título: Didact Gothic

Título Fuente de peso: Bold
Encabezado de texto de tamaño: 1.8VW (escritorio), 3.8VW (tableta), 4VW (teléfono)
El espacio agregue algunos valores de margen personalizados a la configuración de espaciado.
Margen superior: -4vwmarja inferior: 2VW

Margen izquierdo: 30 VW
Margen derecho: 30 VW (escritorio), 15 VW (tableta y teléfono)
Agregue el módulo divisor a la visibilidad de la columna 2 La siguiente forma en que necesitamos es un módulo divisor. Asegúrese de que se active la opción “Muestra el divisor”.
Divisor del espectáculo: si
Colorear luego acceda a la pestaña de diseño y cambie el color del separador.

Color: # 000000
Dimensión Modifique la configuración de tamaño.

Peso del divisor: 8 PX
Ancho: 7%

Espacio junto con la configuración del espacio.
Margen inferior: 1 VW
Margen izquierdo: 30 VW

Agregue el módulo de descripción de texto en la columna 2 agrega contenido El siguiente modo que necesitamos es otro módulo de texto. Ingrese un contenido de su elección.
Configuración de texto Entonces, cambie la configuración de texto en la pestaña Diseño.
Tamaño de texto: 0.8VW (escritorio), 1.3VW (tableta), 1.6VW (teléfono)

La altura de la línea de texto: 2.2em

El espacio agregue algunos valores de margen personalizados en la configuración de espaciado.
Margen inferior: 3VW
Margen izquierdo: 30 VW

Margen derecho: 30 VW (escritorio), 15 VW (tableta y teléfono)
Agregue un módulo de botón a la configuración del botón de la columna 2 Vaya al módulo siguiente y último, que es un módulo de botón. Agregue una copia de su elección y cambie la configuración del botón en consecuencia:
Use estilos personalizados para el botón: Sí
Tamaño de texto de texto: 1VW (escritorio), 1.5VW (tableta), 2VW (teléfono)

El ancho del nudo del botón: 0 PX
Botón de fuente: Poppins
Peso de fuente: en negrita
Estilo de fuente: mayúscula
Espacio Acceda a la configuración de espaciado y agregue algunos valores de margen y llenado personalizados y ¡está terminado!
Margen izquierdo: 30 VW
Revestimiento superior: 1VW


Revestimiento inferior: 1 VW
Junta izquierda: 3vwgaritura derecha: 3VW
Vista previa ahora que hemos dado todos los pasos, para echar un vistazo final al resultado en diferentes tamaños de pantalla.Escritorio
Móvil
Pensamientos finales En esta publicación, le mostré cómo hacer el título solo usando las opciones incorporadas del Div.Esta es una excelente técnica para atraer la atención de sus visitantes y comunicar su mensaje de manera original.Si tiene alguna pregunta o sugerencia, asegúrese de dejar un comentario en la sección de comentarios a continuación.