Cómo crear una sección de héroe móvil con un contenido dividido animado con Div

Crear una sección de héroe para destacar es realmente importante. Y no solo debería destacarse, sino que también debe dividirse en varios elementos que empoderarán el llamado a la acción. La estructura fácil de entender de las secciones de héroes con contenido dividido los hace muy populares y se usa con frecuencia en diferentes tipos de sitios web. Y, aunque la creación de secciones de héroe con escritorio dividido es simple, es posible que no las haga para dimensiones de pantalla más pequeñas. Desde aquí, este tutorial será útil. Recrearemos una sección de héroes extremadamente interactivos, divididos por Mobile, que no solo se verá bien en los dispositivos móviles, sino en todas las diferentes dimensiones de la pantalla. También combinamos algunas animaciones excelentes para que el estilo de diseño se ajuste perfectamente con 2019. Esperamos que este tutorial lo inspire a crear sus propias secciones con un contenido dividido móvil.
¡Vamos a eso! Vista previa antes de arrojar nuestras cabezas en el tutorial, para echar un vistazo al resultado en diferentes tamaños de pantalla. Móvil

Escritorio

¡Comencemos a recrear! Agregue una nueva sección de espaciado, comience creando una nueva página o abriendo una existente. Agregue una nueva sección habitual, acceda a la configuración de espaciado y elimine todos los rellenos predeterminados e inferiores.
SUS Lingo: 0 PX
Finamiento inferior: 0 PX

Agregue una nueva estructura de columna de fila Continuar agregando una nueva línea utilizando la siguiente estructura de columnas:

El color de fondo sin agregar módulos, abra la configuración de la fila y agregue un color de fondo completamente negro.
Color de fondo: # 000000

Columna 1 Color de fondo Agregue un color de fondo negro a la primera columna. Columna 1 Color de fondo: # 000000
Columna 2 Color de fondo lo mismo para la segunda columna.

Columna 2 Color de fondo: # 000000
Dimensión Luego, acceda a la configuración de dimensionamiento y permita que su giro y columnas ocupen todo el ancho de la pantalla.

Haga esta fila ancho completo: sí
Use el ancho personalizado de la canaleta: sí
El ancho de la canaleta: 1
Igualar las alturas de la columna: sí
El espacio también elimina todos los valores predeterminados hacia arriba e inferior de la fila.

SUS Lingo: 0 PX
Finamiento inferior: 0 PX
Junta derecha: 1 VW
Por último, pero no menos importante, nos aseguraremos de que ambas columnas aparezcan una al lado de la otra y en las dimensiones de pantalla más pequeñas. Para hacer esto, tendremos que agregar una sola línea de código CSS a la pestaña de fila avanzada. Pantalla: Flex;

Agregue el módulo de imagen a la columna 1, deje que el cuadro de imagen vacío es el momento de agregar todos los módulos que necesitamos. Comience con el módulo de imagen en la primera columna. En lugar de cargar una imagen en el cuadro de imagen, cargaremos la imagen en la configuración de fondo en los siguientes pasos. Esto nos permitirá jugar con cómo se coloca la imagen y cuánto espacio ocupa.

Agregue un color de fondo para acceder a la configuración de fondo del módulo de imagen y agregue un color de fondo. En el siguiente paso, combinaremos este color de fondo y una imagen de fondo utilizando un efecto de mezcla para oscurecer la imagen.

Color de fondo: # 686868
Agregue una imagen de fondo Agregue una imagen de fondo a su elección y cambie la configuración de fondo en consecuencia:

Tamaño de la imagen de fondo: coperidad de la imagen de fondo: centro
Repetir la imagen de fondo: sin repetición
Mezcla de imagen de fondo: multiplicar
Dimensión Usé dos columnas de tamaños iguales para el giro que trabajamos, pero el resultado no se ve. Cambiaremos manualmente el tamaño de cada módulo que agregamos para que parezca usar una estructura de columna diferente. La razón por la que hacemos esto (en lugar de elegir solo otra estructura de columna) es hacer todo para verse bien y responder a las dimensiones de pantalla más pequeñas. Acceda a la configuración de tamaño del módulo de imagen y modifique el ancho.
Ancho: 88%

Alineación del módulo: izquierda
Espacio ahora podemos decidir el tamaño de nuestra imagen en la configuración del espacio. También utilizamos una unidad de visualización para estos valores para garantizar que nuestro diseño permanezca completamente receptivo en todas las dimensiones de la pantalla.
Revelaje superior: 26.3VW (escritorio), 48VW (tableta), 72VW (teléfono)

Bajo revestimiento: 26.3VW (escritorio), 48VW (tableta), 72 VW (teléfono)
Por último, pero no menos importante, agregaremos una animación de diapositivas a nuestro módulo de imagen. Después de aplicar la animación, notará que la imagen comenzará a aparecer solo desde el momento en que ingresan a la primera columna. El color de fondo de la segunda columna permanece por encima del módulo de imagen mientras se desliza hacia la izquierda.
Estilo de animación: diapositiva

Repita la animación: una vez
Dirección de la animación: izquierda
Duración de la animación: 1450 ms
Intensidad de animación: 60%
Opacidad de animación para comenzar: 100%
Agregue el módulo de botón a la columna 1 Agregue una copia de la siguiente manera que necesitamos en la columna 1 es un módulo de botón. Ingrese una copia de su elección. Botón Luego, acceda a la pestaña de diseño y cambie la configuración del botón.
Use estilos personalizados para el botón: Sí


Tamaño de texto de texto: 1.5VW (escritorio), 2.5VW (tableta), 4VW (teléfono)

El color del texto del botón: #ffffff
El color de fondo del botón: # E02B20
El ancho del nudo del botón: 0 PX
Botón Raza: 1 PX
Botón de fuente: Poppins
Fuente de peso: duro
Difundir el cambio y los valores de espaciado.
Margen superior: -3.3VW (escritorio), -6VW (tableta), -9.1VW (teléfono)
Junta izquierda: 8VW


Junta derecha: 8VW
Box Sombra y agregue una sombra de un cuadro sutil para crear una cierta profundidad de la página.
Poder de poco claro de la sombra de la caja: 20 px
Color de la sombra: RGBA (0.0,0,0.27)

Agregue el módulo de texto no. 1 en la columna 2 Agregar contenido H1 ¡Pasamos a la segunda columna! El primer módulo que necesitamos es un módulo 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: Poppins

Encabezado de texto en color: #ffffff

Encabezado de texto de tamaño: 4VW (escritorio), 5VW (tableta), 6VW (teléfono)
Difundir el cambio y los valores de espaciado.
Margen superior: 12VW
Margen izquierdo: -20VW

Margen derecho: 17 VW (escritorio), 15VW (tableta), 1VW (teléfono)
Animación y agregue una animación sutil.
Estilo de animación: diapositiva
Repita la animación: una vez

Dirección de la animación: Down
Duración de la animación: 1450 ms
Intensidad de animación: 10%
Opacidad de animación para comenzar: 100%
Agregue el módulo divisor a la visibilidad de la columna 2 La siguiente manera que necesitamos en la segunda columna es un módulo divisor. Asegúrese de que se active la opción “Muestra el divisor”. Divisor: sí
Colorear luego acceda a la pestaña de diseño y cambie el color del separador.
Color: # E02B20

Animación Agregue una animación al siguiente módulo divisor.
Estilo de animación: diapositiva

Repita la animación: una vez
Dirección de la animación: correcto

Duración de la animación: 1450 ms
Intensidad de animación: 83%
Opacidad de animación para comenzar: 100%
Agregue el módulo de texto no. 2 en la columna 2 ¡Agregue contenido al siguiente y último módulo que necesitamos en la segunda columna! Agregue una descripción a su elección.
Configuración de texto luego acceda a la configuración de texto en la pestaña Diseño y realice algunos cambios en consecuencia:
Texto de fuente: Poppins
El peso de la fuente de texto: luz

Color de texto: # 919191

Tamaño de texto: 0.7VW (escritorio), 1.8VW (tableta), 2.2VW (teléfono)
Texto de la carta de espacio: 0.1VW
La altura de la línea de texto: 2.2em
Difundir el cambio y los valores de espaciado.
Margen superior: 9VW (escritorio), 19 VW (tableta), 23VW (teléfono)
Margen inferior: 12VW (escritorio), 19 VW (tableta), 23VW (teléfono)
Margen izquierdo: -3VW

Margen derecho: 20VW (escritorio), 6VW (tableta), 3VW (teléfono)
Animación por último, pero no menos importante, ¡agregue una animación de desenfoque al camino y termine!
Estilo de animación: Fade
Repita la animación: una vez
Duración de la animación: 1450 ms

Animación de retraso: 1000 ms
Opacidad de animación de inicio: 0%
Vista previa ahora que hemos dado todos los pasos, para echar un vistazo final al resultado en diferentes tamaños de pantalla. Móvil
Escritorio