Cómo usar los módulos de imagen colocados absolutamente como fondos paralelos con división

Cuando se usa una imagen de fondo en su sección, hay algunas formas de estilizar esa imagen en el bate. Puede usar modos de mezcla, superposiciones de fondo de gradiente y activar los efectos de paralaje. Ahora, con los nuevos efectos de la división, puede llevar la animación un paso más allá y puede combinar maravillosamente una disminución con el efecto de paralaje para aumentar otro tipo de tamaño en su diseño web. Para hacer esto, utilizaremos módulos de imagen absolutamente posicionados y la unidad de ancho de la ventana. En este tutorial, lo guiaremos a través del proceso recreando un hermoso proyecto de estudio de caso CTA que puede descargar gratis.
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

Descargue la aparición de módulos de posicionamiento absoluto de forma gratuita para poner su mano en el aspecto gratuito de los módulos de posición absoluta, primero deberá descargarlo con el botón a continuación. Para tener acceso a la descarga, deberá suscribirse a nuestra lista diaria de correo electrónico utilizando el formulario a continuación. ¡Como nuevo suscriptor, recibirá más buenas divisiones y un paquete Divaut gratuito todos los lunes! Si ya está en la lista, simplemente ingrese la dirección de correo electrónico a continuación y haga clic en Descargar. No será “reubicado” y no recibirá correos electrónicos adicionales.
Descargar archivos

Descargue el registro gratuito para el Boletín Informativo Divic y le enviaremos una copia de la página de la página de la página final, además de muchos otros recursos, consejos y consejos para Div gratis. Sigue a ti mismo y serás una división maestra en el menor tiempo. Si ya está suscrito, simplemente ingrese el correo electrónico a continuación y haga clic en Descargar para acceder al paquete de apariencia. Se ha suscrito correctamente. ¡Consulte su correo electrónico para confirmar su suscripción y obtener acceso a paquetes de diseño semanales gratuitos!
¡Comencemos a recrear! Agregue una nueva sección de fondo. Comience agregando una nueva sección a la página en la que trabaja. Abra la configuración de la sección y cambie el color de fondo.
Color de fondo: # 000000
Dimension Switch a la pestaña de diseño de la sección y cambie el ancho en la configuración de tamaño.

Ancho: 95%
Alineación de la sección: Centro
Sparto agregue algunos valores de espaciado personalizados.

Margen superior: 5%
Margen inferior: 5%
SUS Lingo: 0 PX
Finamiento inferior: 0 PX
Outs y asegúrese de ocultar las chispas de la sección. Este es un paso importante para que el tutorial funcione. Al ocultar los derrames, nos aseguraremos de que nada vaya más allá del contenedor de la sección.

Desbordamiento horizontal: oculto
Desbordamiento verticalmente: oculto
Agregue una nueva estructura de columna de fila Continuar agregando una nueva línea a su sección utilizando la siguiente estructura de columna:

Dimensión sin agregar módulos, abra la configuración de la fila y cambie la configuración de tamaño de la siguiente manera:

Use el ancho personalizado de la canaleta: sí
El ancho de la canaleta: 1 -lime: 100%
Ancho máximo: 100%
El espacio elimina todas las deflantes predeterminadas y sin fondo.
SUS Lingo: 0 PX

Finamiento inferior: 0 PX
Agregue el módulo de texto no. 1 En la columna, agregue el contenido H2, agregue un primer módulo de texto con un contenido H2 de su elección.
Configuración de texto H2 Cambiar a la pestaña Diseño del módulo y cambiar la configuración de texto H2 en consecuencia:

2 Sección de fuentes: Lato

Sección 2 Peso de la fuente: luz
Rúbrica 2 color de texto: #ffffff
2 Tamaño de texto: 4VW (escritorio), 8VW (tableta y teléfono)
Rúbrica 2 Espaciación de litros: 1 PX
Espacio agregaremos algunos valores de espaciado personalizados.
Margen superior: 25VW (escritorio), 50VW (tableta y teléfono)

Margen izquierdo: 5%
Marja derecha: 5%
Agregue el módulo de texto no. 2 En la columna agrega contenido, la siguiente forma en que necesitamos es otro módulo de texto. Agregue un contenido de descripción a su elección.
Configuración de texto Vaya a la pestaña Diseño del módulo y cambie la configuración de texto de la siguiente manera:

Texto de fuente: Lato


Color de texto: #ffffff
Tamaño de texto: 0.8VW (escritorio), 2VW (tableta), 3VW (teléfono)
La altura de la línea de texto: 2.1em
Dimensión Cambie el ancho en diferentes tamaños de pantalla a continuación.
Ancho: 800 PX (escritorio), 80% (tableta), 90% (teléfono)

Espacio y complete la configuración del módulo agregando valores de margen personalizados a la configuración de espaciado.
Margen superior: 2%

Margen inferior: 2%
Margen izquierdo: 5%
Marja derecha: 5%
Agregue un módulo de botón a la columna Agregue una copia Pase al siguiente módulo, que es un módulo de botón. Agregue una copia de su elección.
Botón de configuración Luego, cambie a la pestaña de diseño y estilice el botón de acuerdo con: Use estilos personalizados: Sí

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

El color del texto del botón: #ffffff
Color degradado 1: RGBA (255,255,255.0)
Color de gradiente 2: #ffffff
Tipo de gradiente: lineal
Posición inicial: 98%
Posición final: 98%
El ancho del nudo del botón: 0 PX
Botón de fuente: Lato
Peso de fuente de fuente: duro

Muestra el icono del botón: Sí
Icono de botón de colocación: izquierda
Muestre el icono solo en el cursor para el botón: no
Espacio también utilizamos algunos valores de espaciado personalizados en diferentes tamaños de pantalla.
Margen inferior: 7VW (escritorio), 20VW (tableta), 25VW (teléfono)
Margen izquierdo: 5%

Marja derecha: 5%
Agregue el módulo de imagen a la parte superior de la columna después de haber completado los primeros tres módulos en la columna de su turno, es hora de agregar el módulo posicionado absoluto y usarlo como un fondo reducido. El primer paso para hacer esto es agregar un nuevo módulo de imagen en la parte superior de la columna.
Deje el cuadro de imagen vacío Deje el cuadro de imagen en blanco.
Imagen de fondo y use una imagen de fondo de Paralax en su lugar. Puede usar cualquier imagen que desee, pero si desea recrear exactamente el mismo resultado, puede encontrar las imágenes que se han utilizado en este tutorial descargando la carpeta desde el comienzo de este tutorial.

Use el efecto de paralaje: sí

Método de paralaje: CSS

Dimension Switch a la pestaña Diseño del módulo y forzar el ancho completo.
Fuerza el ancho completo: si
Espaciado Agregue algunos rellenos personalizados en la parte superior e inferior en diferentes tamaños de pantalla. Habitación más alta: 27 VW (escritorio), 54VW (tableta), 68VW (teléfono)

Bajo forro: 27 VW (escritorio), 54VW (tableta), 68VW (teléfono)
Posicione ahora, para garantizar que el módulo no ocupe espacio para el contenedor en nuestra columna, reposicionaremos todo el módulo en la pestaña avanzada.

Posición: Absoluto
Ubicación: superior izquierda
Efecto efectivo hacia arriba y hacia abajo y completaremos la configuración del módulo agregando una arriba y abajo.

Active la escala hacia arriba y hacia abajo: sí
Escala de inicio: 150% (al 30%)
Escala promedio: 150% (al 45%)

Escala de conclusión: 100% (al 55%)
El desencadenante del efecto de movimiento: el medio del elemento
Clonar toda la sección siempre que sea necesario después de haber completado la primera sección, puede clonarla tantas veces como desee.
Cambie la copia para cada sección duplicada Asegúrese de cambiar la copia para cada duplicado.
Cambie la imagen de fondo del módulo de imagen para cada sección duplicada con la imagen de fondo del módulo de imagen y ¡está listo!
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