Divi y sus opciones adhesivas le permiten crear una tonelada 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.
Antes de sumergirnos en el tutorial, echemos un vistazo rápido al resultado en diferentes tamaños de pantalla.
Escritorio
Móvil
Descarga el diseño 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 nuestro boletín utilizando 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 será «resuscrito» ni recibirá correos electrónicos adicionales.
Descárgalo gratis
Únase al boletín informativo 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 muchos otros recursos, consejos y trucos increíbles y gratuitos de Divi. Síguenos y serás un maestro 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.
You have successfully subscribed. Please check your email address to confirm your subscription and get access to free weekly Divi layout packs!
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. Cargue una imagen de fondo de su elección.
- Tamaño de la imagen de fondo: Portada
Espaciado
Pase 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
- Relleno inferior: 0px
desbordamientos
Oculte los desbordamientos de la sección en la pestaña avanzada a continuación.
- Desbordamiento horizontal: oculto
- Desbordamiento vertical: oculto
Añadir Fila #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 la fila y cambie la configuración de tamaño en consecuencia:
- Ancho: 100%
- Ancho máximo: 100%
Espaciado
Elimine también todo el relleno superior e inferior predeterminado.
- Relleno superior: 0px
- Relleno 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, estamos modificando 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 ceñirse a un color completamente blanco.
- Color de fondo: #ffffff
Elemento principal CSS
También estamos agregando un valor de altura al elemento principal en la pestaña avanzada. Una vez que convertimos la fila en pegajosa, esta altura asegurará que la columna cubra toda la imagen de fondo de la sección en todo momento.
|
01
|
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 revele 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
Borde
E incluiremos algunas esquinas redondeadas.
- Todas las esquinas: 15px
Añadir Fila #2
Estructura de la columna
Continúe agregando otra fila a la sección utilizando la siguiente estructura de columnas:
Dimensionamiento
Sin agregar módulos todavía, abra la configuración de la 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 encima 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 algo de contenido H2 de su elección.
Configuración de texto H2
Diseñe la configuración de texto H2 de la siguiente manera:
- Título 2 Fuente: Playfair Display
- Encabezado 2 Alineación de texto: Centro
- Título 2 Color del texto: #0b3835
- Título 2 Tamaño del texto:
- Escritorio: 150px
- Tableta y teléfono: 45px
- Encabezado 2 Altura de línea: 1,2 em
Dimensionamiento
Luego, navegue a 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 algún margen superior negativo.
Agregar copia
El siguiente y último módulo que necesitamos en esta fila es un módulo de botones. Agregue alguna copia de su elección.
Alineación de botones
Pase 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: 100px
- 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 márgenes personalizados y valores de relleno a la configuración de espaciado.
- Margen inferior: 60vh
- Relleno superior: 15px
- Relleno inferior: 15px
- Relleno izquierdo: 40px
- Relleno derecho: 40px
2. Aplicar efectos pegajosos
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 fija:
- Posición pegajosa: Stick to Top
- Límite pegajoso inferior: Sección
- Desplazamiento de los elementos pegajosos circundantes: Sí
- Estilos predeterminados y fijos de transición: Sí
Opciones adhesivas del módulo de texto
Ahora que la fila se ha convertido en fija, podemos aplicar estilos fijos al módulo de texto dentro de la fila. Abra la configuración del módulo.
Tamaño pegajoso
Luego, navegue a la configuración de tamaño y aplique los siguientes valores de tamaño fijo:
- Ancho pegajoso: 80vw
- Altura pegajosa: 90vh
Duración de la transición
Por último, pero no menos importante, navegue a la pestaña avanzada y aumente la duración de la transición. ¡Eso es todo!
- Duración de la transición: 500ms
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 adhesivas de Divi. Más específicamente, le mostramos cómo combinar la configuración de 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 regalos de Divi, 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 los beneficios de este contenido gratuito.