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

Las opciones adhesivas de Divi le permiten crear un montón de diseños diferentes para sus sitios web. La publicación de hoy agrega otro tutorial a la lista de cosas que puede lograr y, con suerte, ayudará a despertar la creatividad. Le mostraremos cómo crear una máscara de fondo adhesiva y hacer que esta máscara siga al visitante en el desplazamiento hasta el final de la sección. Este tutorial combina las opciones pegajosas de Divi con los modos de mezcla de filtros. ¡También podrá descargar el archivo JSON de forma gratuita!

Hagámoslo.

Avance

Antes de sumergirnos en el tutorial, echemos un vistazo rápido al resultado en diferentes tamaños de pantalla.

Escritorio

Móvil

Descarga The Layout GRATIS

Para poner sus manos en el diseño gratuito, primero deberá descargarlo usando el botón a continuación. Para obtener acceso a la descarga, deberá suscribirse a nuestra lista de correo electrónico Divi Daily mediante el formulario a continuación. ¡Como nuevo suscriptor, recibirás aún más bondad Divi y un paquete Divi Layout gratis todos los lunes! Si ya está en la lista, simplemente ingrese su dirección de correo electrónico a continuación y haga clic en descargar. No se le “volverá a suscribir” ni recibirá correos electrónicos adicionales.

Descarga los archivos

Descárgalo gratis

Únase al boletín de Divi y le enviaremos por correo electrónico una copia del último paquete de diseño de página de destino de Divi, además de toneladas de otros recursos, consejos y trucos increíbles y gratuitos de Divi. Síguelo y serás un maestro de Divi en poco tiempo. Si ya está suscrito, simplemente escriba su dirección de correo electrónico a continuación y haga clic en descargar para acceder al paquete de diseño.

DESCARGAR

Te has suscripto satisfactoriamente. ¡Verifique su dirección de correo electrónico para confirmar su suscripción y obtenga acceso a paquetes de diseño Divi semanales gratuitos!

1. Crear diseño en Divi

Agregar nueva sección

Imagen de fondo

Comience agregando una nueva sección a la página en la que está trabajando. Sube una imagen de fondo de tu elección.

• Tamaño de la imagen de fondo: Portada

Espaciado

Vaya a la pestaña de diseño de la sección y elimine todo el relleno superior e inferior predeterminado en la configuración de espaciado.

• Relleno superior: 0px
• Acolchado inferior: 0px

Desbordes

Oculte los desbordamientos de la sección en la pestaña avanzada a continuación.

• Desbordamiento horizontal: oculto
• Desbordamiento vertical: oculto

Agregar fila n. ° 1

Estructura de la columna

Continúe agregando una nueva fila usando la siguiente estructura de columnas:

Dimensionamiento

Sin agregar módulos, abra la configuración de fila y cambie la configuración de tamaño en consecuencia:

• Ancho: 100%
• Ancho máximo: 100%

Espaciado

Elimine también todo el acolchado superior e inferior predeterminado.

• Relleno superior: 0px
• Acolchado inferior: 0px

Filtros

También estamos agregando un modo de fusión a esta fila. Este modo de fusión nos ayudará a crear una máscara más adelante en el tutorial.

• Modo de fusión: pantalla

Índice Z

Para asegurarnos de que esta fila permanezca debajo de la segunda fila que agregaremos a la sección, modificaremos el índice z en la pestaña avanzada.

• Índice Z: 9

Configuración de columna

A continuación, abriremos la configuración de la columna.

Color de fondo

Estamos usando 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 seguir con un color completamente blanco.

• Color de fondo: #ffffff

CSS del elemento principal

También estamos agregando un valor de altura al elemento principal en la pestaña avanzada. Una vez que volvamos la fila pegajosa, esta altura se asegurará de que la columna cubra toda la imagen de fondo de la sección en todo momento.

height: 100vh;

Agregar módulo de texto a la fila

Dejar el cuadro de contenido vacío

Una vez que haya completado la configuración de la fila, agregue un módulo de texto a su columna. Deje el cuadro de contenido vacío. En cambio, estamos usando este módulo para crear una forma que revela una parte de la imagen de fondo de la sección.

Color de fondo

Para permitir que el modo de fusión muestre una parte de la imagen de fondo de la sección, estamos usando un color de fondo más oscuro para este módulo.

• Color de fondo: # 0b3835

Dimensionamiento

Luego, navegaremos a la pestaña de diseño y cambiaremos la configuración de tamaño de la siguiente manera:

• Ancho:
  • Escritorio: 20vw
  • Tableta y teléfono: 70vw
• Altura:
  • Escritorio: 30vh
  • Tableta y teléfono: 10vh

Espaciado

También estamos agregando un margen superior.

• Margen superior: 3vh

Frontera

E incluiremos algunas esquinas redondeadas.

• Todas las esquinas: 15px

Agregar fila n. ° 2

Estructura de la columna

Continúe agregando otra fila a la sección usando la siguiente estructura de columnas:

Dimensionamiento

Sin agregar módulos todavía, abra la configuración de fila y realice los siguientes cambios en la configuración de tamaño:

• Ancho: 100%
• Ancho máximo: 100%

Índice Z

Aumente también el índice z de la fila. Esto ayudará a garantizar que el contenido de la fila permanezca en la parte superior de la fila anterior.

• Índice Z: 12

Agregar módulo de texto a la fila

Agregar contenido H2

Es hora de agregar módulos, comenzando con un primer módulo de texto que contenga contenido H2 de su elección.

Configuración de texto H2

Diseñe la configuración del texto H2 de la siguiente manera:

• Fuente del título 2: Playfair Display
• Alineación del texto del encabezado 2: centro
• Color del texto del encabezado 2: # 0b3835
• Tamaño del texto del encabezado 2:
  • Escritorio: 150px
  • Tableta y teléfono: 45px
• Altura de línea de rumbo 2: 1.2em

Dimensionamiento

Luego, navegue hasta la configuración de tamaño y aplique la siguiente configuración:

• Ancho máximo: 980px
• Alineación del módulo: centro

Espaciado

Incluya también un margen superior negativo.

Agregar módulo de botones a la fila

Agregar copia

El siguiente y último módulo que necesitamos en esta fila es un módulo de botones. Agregue una copia de su elección.

Alineación de botones

Vaya a la pestaña de diseño del módulo y cambie la alineación de los botones.

• Alineación de botones: centro

Configuración de botones

Luego, vaya a la configuración del botón y aplique los siguientes estilos:

• Usar estilos personalizados para el botón: Sí
• Tamaño del texto del botón: 15px
• Color del texto del botón: #ffffff
• Color de fondo del botón: # 000000
• Ancho del borde del botón: 0px
• Radio del borde del botón: 100 px

• Fuente del botón: Montserrat
• Peso de la fuente del botón: Semi negrita
• Estilo de fuente del botón: mayúsculas

Espaciado

También estamos agregando algunos valores de margen y relleno personalizados a la configuración de espaciado.

• Margen inferior: 60vh
• Acolchado superior: 15px
• Acolchado inferior: 15px
• Relleno izquierdo: 40px
• Relleno derecho: 40px

2. Aplicar efectos adhesivos

Fila abierta # 1

Ahora que hemos construido la base de nuestro diseño, es hora de aplicar los estilos pegajosos. 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 adhesiva: adherirse a la parte superior
• Límite inferior pegajoso: sección
• Desplazamiento de elementos pegajosos circundantes: Sí
• Transición de estilos predeterminados y pegajosos: Sí

Opciones fijas del módulo de texto

Ahora que la fila se ha vuelto pegajosa, podemos aplicar estilos pegajosos al Módulo de texto dentro de la fila. Abra la configuración del módulo.

Tamaño pegajoso

Luego, navegue hasta la configuración de tamaño y aplique los siguientes valores de tamaño fijos:

• Ancho pegajoso: 80vw
• Altura pegajosa: 90vh

Duración de la transición

Por último, pero no menos importante, navegue hasta la pestaña avanzada y aumente la duración de la transición. ¡Eso es todo!

• Duración de la transición: 500 ms

Avance

Ahora que hemos seguido todos los pasos, echemos un vistazo final al resultado en diferentes tamaños de pantalla.

Escritorio

Móvil

Pensamientos finales

En esta publicación, una vez más, le mostramos cómo ser creativo con las opciones pegajosas de Divi. Más específicamente, le mostramos cómo combinar la configuración de los filtros de Divi y las opciones adhesivas para crear una máscara de fondo adhesiva. También pudo 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 aprender más sobre Divi y obtener más obsequios de Divi, asegúrese de suscribirse a nuestro boletín por 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.