Cómo revelar una cuadrícula de imagen subyacente en tu héroe con las opciones pegajosas de Div

Crear una sección de héroes para atraer la atención de sus visitantes puede establecer el tono para el resto del sitio web. Si está buscando una forma creativa de usar las opciones pegajosas de Divi para ayudarlo a llegar allí, le gustará este tutorial. Hoy, le mostramos cómo revelar una cuadrícula de imagen subyacente en su héroe con las opciones pegajosas de Div. ¡Incluimos una transición muy fluida de predeterminada a Sticky y 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. Crear diseño de héroe Agregue un nuevo color 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 agregue un color de fondo.
Color de fondo: # 111111
Espacio ir a la pestaña de diseño de la sección y agregue un poco de relleno a continuación. Este siguiente llenado nos dará suficiente espacio para crear la experiencia en ejecución.

Revestimiento inferior: 120 VH
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, abrir la configuración de línea, acceder a la pestaña de diseño y cambiar la configuración de tamaño de la siguiente manera:

Use el ancho personalizado de la canaleta: sí
El ancho de la canaleta: 2
Ancho: 100%
Ancho máximo: 2580 PX
El espacio agregue algunos bordes receptivos superiores.

Margen superior:
Escritorio: 10 VH
Tableta y teléfono: 5vh
El índice Z y para garantizar que esta fila permanezca en la segunda fila que agregaremos a esta sección, luego usaremos un índice AZ de 10 en la pestaña avanzada.

IND ÍNDICE: 10
Todas las configuraciones de la columna Una vez que se realizan la configuración promedio general, abra cada una de las columnas individualmente.

El elemento CSS principal En cada una de las columnas, aplique las siguientes líneas de código CSS en el teléfono: Solo teléfono: Ancho: ¡50%! Importante;

Margen: 0! IMPORTANTE;
Configuración Columna 2 Luego abra la configuración de la columna 2.

IND índice y aumentar el índice Z a 12. Esto colocará esta columna por encima de la tercera columna. Indica z: 12

Agregue el módulo de imagen a la columna 1 Cargue la imagen es hora de agregar módulos, comenzando con un módulo de imagen en la columna 1. Cargue una imagen de su elección.
Espacio ir a la pestaña Diseño del módulo y cambie la configuración de espaciado de la siguiente manera:

Margen inferior:

Tableta y teléfono: 10 px
Margen derecho:
Tableta y teléfono: 2%
Clone el módulo de imagen tres veces y coloque los duplicados en las columnas restantes después de haber completado la configuración del módulo, puede clonar todo el módulo tres veces y puede colocar los duplicados en las columnas restantes de la fila.
Cambie las imágenes para asegurarse de cambiar la imagen de cada módulo duplicado.

Cambie el espacio del módulo de imagen no. 2 y # 4 luego abra la configuración de los módulos de imagen en la columna 2 y 4 y aplique los siguientes valores de espaciado:

Margen inferior:

Tableta y teléfono: 10 px
Borde izquierdo:
Tableta y teléfono: 2%
Margen derecho: /
Agregue la estructura de la columna de la fila # 2 Continuar agregando una nueva línea a la sección utilizando la siguiente estructura de columnas:
Fondo de gradiente Abra la configuración de la fila y aplique el siguiente fondo de gradiente:


Color 1: # 111111

Color 2: RGBA (255,255,255.0)
La dimensión cambia la configuración de dimensionamiento adicional.
Ancho: 100%


Ancho máximo: 2580 PX
El espacio luego aplique un poco de relleno superior e inferior.
Revestimiento superior: 20VH

Revestimiento inferior: 20 VH
Posición para colocar esta fila sobre la rejilla de imagen Utilizaremos la configuración de posición en consecuencia:
Posición: Absoluto

Ubicación: el centro superior
IND ÍNDICE: 12
Agregue un módulo de texto a la columna Agregar contenido H1 Agregue un primer módulo de texto a esta fila usando un contenido H1. Los conjuntos de texto H1 pasan a la pestaña Diseño del módulo y cambie la configuración de texto H1 en consecuencia:
Font Antet: Kumbh Sans

Título Fuente de peso: Bold

Estilo de fuente de título: mayúscula
Alineación del texto del encabezado: Centro
Encabezado de texto en color: #ffdbaa
Encabezado de texto de tamaño:
Escritorio: 120 PX
Tableta: 60 PX
Teléfono: 40 PX
La distancia entre letras
Escritorio: -3px
Tableta y teléfono: 0 PX
La sombra del texto del encabezado:
Seleccionar: tercera opción
Color Shadow Text Header: RGBA (0.0,0,0.4)
La dimensión cambia la configuración de dimensionamiento adicional.
Ancho máximo: 900 PX
Alineación del módulo: centro

Agregue un módulo de botón a la columna 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 y cambie la alineación del botón.
Alineación de botones: centro

Establece el botón y luego estiliza el botón.

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

Escritorio: 20 PX
Tableta: 16 PX
Teléfono: 14 PX
Tamaño de texto de texto: # 111111
El color del fondo del botón: #ffffff
El ancho del nudo del botón: 0 PX
Botón Raza: 100 PX
Botón de fuente: Kumbh Sans
Botón de peso de fuente de fuente: en negrita
Espaciado y use algunos valores de llenado receptivo en la configuración de espaciado.

Revestimiento superior:
Escritorio y tableta: 20 PX

Teléfono: 15 PX
Levante inferior:
Escritorio y tableta: 20 PX
Teléfono: 15 PX
Forro izquierdo:
Escritorio y tableta: 50 PX
Teléfono: 40 PX
Junta derecha:
Escritorio y tableta: 50 PX
Teléfono: 40 PX
2. Aplicar configuraciones adhesivas transforma # 1 Sticky ahora, que tenemos todos los elementos en nuestro lugar, podemos centrarnos en la configuración pegajosa. Abra la configuración de la primera fila y aplique la siguiente configuración adhesiva: Posición pegajosa: Stick desde arriba
Pequeño límite inferior: sección
Brecha de los elementos circundantes adhesivos: sí

Transición predeterminada y estilos adhesivos: sí
Opacidad pegajosa Entonces, cambie la opacidad en la configuración del filtro.
Valor predeterminado: 20%
Sticky: 100%
Módulo de imagen # 1 Configuración de espaciado adhesivo y luego, abra la configuración del módulo de imagen en la columna 1. Pase a la pestaña de diseño y agregue algunos bordes adhesivos adhesivos.


Margen superior lipic: -20%
Margen derecho de palo: -20%
Aumento de la transición y duración de la transición.


Duración de transición: 700 ms
Módulo de imagen # 2 Espaciado de espaciado pegajoso Vaya al módulo de imagen en la columna 2 y use la siguiente configuración de espaciado adhesivo:
Margen superior lipic: 20%

Aterrgación del margen izquierdo: -30%
La transición aumentó y la duración de la transición aquí.

Duración de la transición: 1000 ms
Módulo de imagen # 3 Espacio adhesivo Además, tenemos el módulo de imagen en la columna 3. Use los siguientes valores de espaciado adhesivo:
Margen superior lipic: -10%

Margen izquierdo de palo: -25%
Margen derecho de palo: -25%

Cambio de transición La duración de la transición según:
Duración de transición: 700 ms
Módulo de imagen # 4 espaciado de espaciado adhesivo y finalmente abra el módulo de imagen en la columna 4. Aplique los siguientes valores de espaciado adhesivo:
Margen superior lipic: -20%

Aterrgación del margen izquierdo: -30%
Transición Complete la configuración del módulo y este tutorial, aumentando la duración de la transición. ¡Eso es todo! Guardar y salir de la página para ver el resultado. Duración de la transición: 1000 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é cómo ser creativo con la sección Hero del Div. Específicamente, le mostré cómo revelar una cuadrícula de imagen de desplazamiento usando las secciones pegajosas de Div. 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.