Cómo crear una máscara de fondo pegajosa con div Div

Las opciones adhesivas de Divic le permiten crear muchos modelos diferentes para sus sitios web. La publicación de hoy agrega otro tutorial a la lista de cosas que puede hacer y, con suerte, ayudará a estimular la creatividad. Le mostraremos cómo crear una máscara de fondo pegajosa y pedirle a esta máscara que siga al visitante en progreso hasta el final de la sección. Este tutorial combina las opciones pegajosas de Divi con los modos de mezcla de filtros. ¡Podrá descargar el archivo JSON de forma gratuita! 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 el aspecto gratuito para poner su mano en el aspecto gratuito, primero deberá descargarlo usando 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.
Te has suscripto satisfactoriamente. ¡Consulte su correo electrónico para confirmar su suscripción y obtener acceso a paquetes de diseño semanales gratuitos! 1. Cree el diseño en Div Agregue una nueva imagen de fondo Iniciar agregando una nueva sección a la página en la que trabaja. Sube una imagen de fondo de tu elección.
Tamaño de la imagen de fondo: portada
Espacio ir a la pestaña de diseño de sección y eliminar todos los rellenos predeterminados e inferiores de la configuración de espaciado.

SUS Lingo: 0 PX
Finamiento inferior: 0 PX
Las opensiones esconden los derrames de la sección en la siguiente pestaña Advance.

Desbordamiento horizontal: oculto
Desbordamiento verticalmente: oculto
Agregue la estructura de la columna de la fila # 1 Continuar agregando una nueva fila 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 en consecuencia:

Ancho: 100%
Ancho máximo: 100%
Espacio eliminar y todo el revestimiento predeterminado, superior e inferior.

SUS Lingo: 0 PX
Finamiento inferior: 0 PX
Los filtros también agregan un modo de mezcla a esta fila. Este modo de mezcla nos ayudará a crear una máscara más adelante en el tutorial.

Modo de mezcla: pantalla
El índice Z para garantizar que esta fila permanezca en la segunda fila que agregaremos a la sección, cambiamos el índice z en la pestaña avanzada.

ÍNDICE Z: 9
Configuración de la columna Entonces, abriremos la configuración de la columna.

El color de fondo usamos un color de fondo completamente blanco. Cualquier otro color que use aquí se mostrará a través de la imagen de fondo de la sección, por lo que es importante permanecer con un color completamente blanco.

Color de fondo: #ffffff
El elemento principal CSS también agrega un valor de altura al elemento principal en la pestaña avanzada. Una vez que devolvamos la fila pegajosa, esta altura asegurará que la columna siempre cubra la imagen de fondo de la sección. Heigt: 100VH;

Agregue un módulo de texto en una fila Deje el cuadro de contenido después de haber completado la configuración de la fila, agregue un módulo de texto a su columna. Deja el cuadro de contenido vacío. En cambio, usamos este módulo para crear una forma que revele una parte del fondo de la sección.
Color de papel tapiz Para permitir que el modo de mezcla muestre parte de la imagen de fondo de la sección, usamos un color de fondo más oscuro para este módulo.

Color de fondo: # 0b3835

Dimensión Entonces, exploraremos la pestaña de diseño y cambiaremos la configuración de tamaño de la siguiente manera:
Ancho:


Escritorio: 20 VW
Tableta y teléfono: 70VW
Altura:
Escritorio: 30 VH
Tableta y teléfono: 10 VH
Espacio agregamos algunos márgenes superiores.
Margen superior: 3VH

Borde e incluiremos algunas esquinas redondeadas.
Todas las esquinas: 15 PX

Agregue la estructura de la columna de la fila # 2 Continuar agregando otra fila a la sección utilizando la siguiente estructura de columnas:
Dimensión sin agregar módulos, abra la configuración de la fila y realice los siguientes cambios en la configuración del tamaño:

Ancho: 100%

Ancho máximo: 100%
El índice Z también aumenta el índice Z de la fila. Esto asegurará que el contenido de la fila permanezca en la parte superior de la fila anterior.
IND ÍNDICE: 12

Agregue un módulo de texto en una fila Agregar contenido H2 es hora de agregar módulos, comenzando con un primer módulo de texto que contiene un contenido H2.
TEXTO H2 Configuración Estille

Título 2 Alineación de texto: Centro

Rúbrica 2 Color de texto: # 0b3835
Rúbrica 2 Dimensión de texto:
Escritorio: 150 PX
Tableta y teléfono: 45 PX
Título 2 Altura de la línea: 1.2em
Dimensión Entonces, explore la configuración de tamaño y aplique la siguiente configuración:
Ancho máximo: 980 PX
Alineación del módulo: centro

El espacio incluye algunos márgenes superiores negativos.
Agregue el módulo de botón en una fila Agregue una copia a continuación y el último módulo que necesitamos en esta fila es un módulo de botón. Agregue una copia de su elección.
Alineación de botones Vaya a la pestaña Diseño del módulo y cambie la alineación de los botones.

Alineación de botones: centro

Botón de configuración Luego, acceda a la configuración del botón y aplique los siguientes estilos:

Use estilos personalizados para el botón: Sí
Botón de tamaño de texto: 15 PX

El color del texto del botón: #ffffff
El color de fondo del botón: # 000000
El ancho del nudo del botón: 0 PX
Botón Raza: 100 PX
Botón de fuente: Montserrat
Peso de fuente de fuente: semi audac.
El estilo de la fuente del botón: mayúscula

Espacio agregamos algunos valores marginales de margen y llenado a la configuración de espaciado.
Margen inferior: 60 VH
Revestimiento superior: 15 px

Revestimiento inferior: 15 PX
Junta izquierda: 40 PX
Revestimiento derecho: 40 PX
2. Aplicar efectos adhesivos Abra el turno # 1 ahora que hemos construido nuestra base de diseño, es hora de aplicar estilos adhesivos. Abra la configuración de la primera fila.
Aplicar opciones adhesivas navegue a la pestaña avanzada y aplique la siguiente configuración adhesiva:
Posición pegajosa: adhiérase a la parte superior

Pequeño límite inferior: sección

Gap de los elementos circundantes adhesivos: transición predeterminada y dastils pegajosos: sí
Opciones de aterrizaje para el módulo de texto Ahora que la fila se ha transformado pegajoso, podemos aplicar estilos adhesivos al módulo de texto dentro de la fila. Abra la configuración del módulo.
El dimensionamiento de la palanca luego, navegue por la configuración del tamaño y aplique los siguientes valores de dimensionamiento adhesivo:
Ancho pegajoso: 80VW
Altura pegajosa: 90VH

La duración de la transición por última vez, pero no menos importante, explore la pestaña avanzada y aumente la duración de la transición. ¡Eso es todo!

Duración de la transición: 500 ms
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, te mostré una vez más cómo ser creativo con las opciones pegajosas de Div. Específicamente, le mostré cómo combinar la configuración de los filtros de la división y las opciones pegajosas para crear un fondo pegajoso. Puede descargar el archivo JSON de forma gratuita. Si tiene alguna pregunta o sugerencia, no dude en dejar un comentario en la sección de comentarios a continuación. Si está ansioso por obtener más información sobre Divi y obtener más regalos de la Divicidad, asegúrese de suscribirse a nuestro boletín de correo electrónico y al canal de YouTube para que siempre sea una de las primeras personas en conocer y obtener beneficios de este contenido gratuito.