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

Avance

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.

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 inferior. Este relleno inferior nos dará suficiente espacio para crear la experiencia de desplazamiento.

• Acolchado inferior: 120vh

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 todavía, abra la configuración de la 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 del canalón: 2
• Ancho: 100%
• Ancho máximo: 2580px

Espaciado

Agregue un poco de margen superior receptivo a continuación.

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

Índice Z

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

• Índice Z: 10

Todas las configuraciones de columna

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

Elemento principal CSS

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

Solo teléfono:

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

Pase 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 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: /

Añadir Fila #2

Estructura de la columna

Continúe agregando una nueva fila a la sección utilizando 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

Modifique la configuración de tamaño a continuación.

• 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: Absoluta
• Ubicación: Centro superior
• Í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

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

• Fuente del encabezado: Kumbh Sans
• Peso de la fuente del encabezado: Negrita
• Estilo de fuente del título: Mayúsculas
• Alineación del texto del título: Centro
• Color del texto del encabezado: #ffdbaa
• Tamaño del texto del encabezado:
  
  • Escritorio: 120px
  • Tableta: 60px
  • Teléfono: 40px
• Espaciado entre letras de encabezado
  
  • Escritorio: -3px
  • Tableta y teléfono: 0px
• Sombra del texto del título:
  
  • Seleccione: Tercera Opción
  • Color de la sombra del texto del título: rgba(0,0,0,0.4)

Dimensionamiento

Modifique la configuración de tamaño a continuación.

• 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 alguna copia de su elección.

Alineación de botones

Pase a la pestaña de diseño y cambie la alineación del botón.

• Alineación de botones: Centro

Configuración de botones

Luego, diseñe 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: 100px

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

Espaciado

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

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

2. Aplicar configuraciones adhesivas

Gire la fila n. ° 1 pegajosa

Ahora que tenemos todos los elementos en su lugar, podemos centrarnos en la configuración fija. Abra la configuración de la primera fila y aplique la siguiente configuración adhesiva:

• 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í

Opacidad pegajosa

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

• Predeterminado: 20%
• Pegajoso: 100%

Configuración fija del módulo de imagen n.º 1

Espaciado

A continuación, abra la configuración del Módulo de imagen en la columna 1. Pase a la pestaña de diseño y agregue algunos márgenes adhesivos superior y derecho.

• 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: 700ms

Módulo de imagen #2 Espaciado fijo

Espaciado

Pase al módulo de imagen en la columna 2 y use la siguiente configuración de espacio 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: 1000ms

Módulo de imagen #3 Espaciado adhesivo

Espaciado

A continuación, tenemos el Módulo de imagen en la columna 3. Use los siguientes valores de espaciado adhesivo:

• 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: 700ms

Módulo de imagen #4 Espaciado adhesivo

Espaciado

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

• 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: 1000ms

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