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

Crear una sección de héroe que capte la atención de sus visitantes puede marcar la pauta 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 encantará este tutorial. Hoy, le mostramos cómo revelar una cuadrícula de imagen subyacente en su héroe con las opciones adhesivas de Divi. Incluimos una transición muy suave de la configuración predeterminada a la permanente y 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. Crea un diseño de héroe

Agregar nueva sección

Color de fondo

Comience agregando una nueva sección a la página en la que está trabajando. Abra la configuración de la sección y agregue un color de fondo.

• Color de fondo: # 111111

Espaciado

Vaya a la pestaña de diseño de la sección y agregue algo de relleno en la parte inferior. Este acolchado inferior nos dará suficiente espacio para crear la experiencia de desplazamiento.

• Acolchado inferior: 120vh

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 todavía, abra la configuración de fila, vaya a la pestaña de diseño y cambie la configuración de tamaño de la siguiente manera:

• Usar ancho de canalón personalizado: Sí
• Ancho de la canaleta: 2
• Ancho: 100%
• Ancho máximo: 2580px

Espaciado

A continuación, agregue un margen superior receptivo.

• Margen superior:
  • Escritorio: 10vh
  • Tableta y teléfono: 5vh

Índice Z

Y para asegurarnos de que esta fila permanezca debajo de la segunda fila que agregaremos a esta sección, más adelante usaremos un índice az de 10 en la pestaña avanzada.

• Índice Z: 10

Todas las configuraciones de columna

Una vez realizada la configuración general de la fila, abra cada una de las columnas individualmente.

CSS del elemento principal

En cada una de las columnas, aplique las siguientes líneas de código CSS al elemento principal en el teléfono:

Solo teléfono:

width: 50% !important;
margin: 0 !important;

Configuración de la columna 2

Luego, abra la configuración de la columna 2.

Índice Z

Y aumente el índice Z a 12. Esto colocará esta columna sobre la tercera columna.

• Índice Z: 12

Agregar módulo de imagen a la columna 1

Cargar 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.

Espaciado

Vaya a la pestaña de diseño del módulo y cambie la configuración de espaciado de la siguiente manera:

• Margen inferior:
  • Tableta y teléfono: 10px
• Margen derecho:
  • Tableta y teléfono: 2%

Clonar el módulo de imagen tres veces y colocar duplicados en las columnas restantes

Una vez que haya completado la configuración del módulo, puede clonar el módulo completo tres veces y colocar los duplicados en las columnas restantes de la fila.

Cambiar imágenes

Asegúrese de cambiar la imagen en cada módulo duplicado.

Cambiar el espaciado de los módulos de imagen n. ° 2 y n. ° 4

Luego, abra la configuración de los Módulos de imagen en las columnas 2 y 4, y aplíqueles los siguientes valores de espaciado:

• Margen inferior:
  • Tableta y teléfono: 10px
• Margen izquierdo:
  • Tableta y teléfono: 2%
• Margen derecho: /

Agregar fila n. ° 2

Estructura de la columna

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

Fondo degradado

Abra la configuración de la fila y aplique el siguiente fondo degradado:

• Color 1: # 111111
• Color 2: rgba (255,255,255,0)

Dimensionamiento

A continuación, modifique la configuración de tamaño.

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

Espaciado

Luego, aplique un poco de relleno superior e inferior.

• Acolchado superior: 20vh
• Acolchado inferior: 20vh

Posición

Para colocar esta fila en la parte superior de la cuadrícula de la imagen, usaremos la configuración de posición en consecuencia:

• Posición: Absoluto
• Ubicación: Top Center
• Índice Z: 12

Agregar módulo de texto a la columna

Agregar contenido H1

Agregue un primer módulo de texto a esta fila usando algún contenido H1 de su elección.

Configuración de texto H1

Vaya a la pestaña de diseño del módulo y cambie la configuración de texto H1 en consecuencia:

• Fuente de encabezado: Kumbh Sans
• Peso de la fuente del encabezado: negrita
• Estilo de fuente de encabezado: mayúsculas
• Alineación del texto del encabezado: centro
• Color del texto del encabezado: #ffdbaa
• Tamaño del texto del encabezado:
  • Escritorio: 120 px
  • Tableta: 60px
  • Teléfono: 40px
• Espaciado entre letras del encabezado
  • Escritorio: -3px
  • Tableta y teléfono: 0px
• Sombra del texto del encabezado:
  • Seleccionar: Tercera opción
  • Color de la sombra del texto del encabezado: rgba (0,0,0,0.4)

Dimensionamiento

A continuación, modifique la configuración de tamaño.

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

Agregar módulo de botones a la columna

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 y cambie la alineación de los botones.

• Alineación de botones: centro

Configuración de botones

Luego, estiliza el botón.

• Usar estilos personalizados para el botón: Sí
• Tamaño del texto del botón:
  • Escritorio: 20px
  • Tableta: 16px
  • Teléfono: 14px
• Tamaño del texto del botón: # 111111
• Color de fondo del botón: #ffffff
• Ancho del borde del botón: 0px
• Radio del borde del botón: 100 px

• Fuente del botón: Kumbh Sans
• Peso de la fuente del botón: negrita

Espaciado

Y use algunos valores de relleno sensibles en la configuración de espaciado.

• Acolchado superior:
  • Escritorio y tableta: 20px
  • Teléfono: 15px
• Acolchado inferior:
  • Escritorio y tableta: 20px
  • Teléfono: 15px
• Acolchado izquierdo:
  • Escritorio y tableta: 50px
  • Teléfono: 40px
• Acolchado derecho:
  • Escritorio y tableta: 50px
  • Teléfono: 40px

2. Aplicar ajustes fijos

Gire la fila n. ° 1 pegajosa

Ahora que tenemos todos los elementos en su lugar, podemos concentrarnos en la configuración adhesiva. Abra la configuración de la primera fila 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í

Opacidad pegajosa

Luego, cambie la opacidad en la configuración de los filtros.

• Por defecto: 20%
• Pegajoso: 100%

Configuración adhesiva del módulo de imagen n. ° 1

Espaciado

A continuación, abra la configuración del Módulo de imagen en la columna 1. Vaya a la pestaña de diseño y agregue un margen superior y derecho adhesivo.

• Margen superior fijo: -20%
• Margen derecho fijo: -20%

Transición

Aumente también la duración de la transición.

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

Espacio fijo del módulo de imagen n. ° 2

Espaciado

Pase al Módulo de imagen en la columna 2 y use la siguiente configuración de espaciado fijo:

• Margen superior fijo: 20%
• Margen izquierdo fijo: -30%

Transición

Aumente aquí también la duración de la transición.

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

Módulo de imagen n. ° 3 Espaciado fijo

Espaciado

A continuación, tenemos el módulo de imagen en la columna 3. Utilice los siguientes valores de espaciado fijo:

• Margen superior fijo: -10%
• Margen izquierdo fijo: -25%
• Margen derecho fijo: -25%

Transición

Cambie la duración de la transición en consecuencia:

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

Módulo de imagen n. ° 4 Espaciado fijo

Espaciado

Y, por último, abra el Módulo de imagen en la columna 4. Aplique los siguientes valores de espaciado fijo:

• Margen superior fijo: -20%
• Margen izquierdo fijo: -30%

Transición

Complete la configuración del módulo y este tutorial aumentando la duración de la transición. ¡Eso es todo! Guarde y salga de la página para ver el resultado.

• Duración de la transición: 1000 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, le mostramos cómo ser creativo con su sección de héroe en Divi. Más específicamente, le mostramos cómo revelar una cuadrícula de imágenes en el desplazamiento usando las secciones adhesivas de Divi. 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.