Cómo revelar imágenes usando cuadrículas horizontales y desbordamiento oculto con Divi


Dado que han surgido las nuevas opciones de tamaño de Divi, hemos creado algunos tutoriales que le muestran cómo crear revelaciones emergentes. En esos tutoriales, el contenido oculto se colocaba verticalmente. En algunos casos, sin embargo, es posible que desee crear una revelación horizontal en su lugar. En esta publicación, le mostraremos cómo revelar imágenes usando cuadrículas de desplazamiento y las opciones de desbordamiento de Divi. Hacer que esto funcione requiere un enfoque ligeramente diferente. Usaremos una fila de una columna y colocaremos todos los módulos uno debajo del otro y, al pasar el ratón, transformaremos la columna en una cuadrícula horizontal. ¡También podrás descargar el archivo JSON gratis!

Hagámoslo.

Avance

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

Escritorio

cuadrículas flotantes

Móvil

cuadrículas flotantes

Descargar The Hover Grids Layout GRATIS

Para poner sus manos en el diseño de cuadrículas de desplazamiento libre, 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 siguiente formulario. Como nuevo suscriptor, ¡recibirás aún más bondad Divi y un paquete de diseño Divi 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 "volverá a suscribir" ni recibirá correos electrónicos adicionales.

¡Comencemos a recrearnos!

(incrustar) https://www.youtube.com/watch?v=WH6seTixtH0 (/ incrustar)

Suscríbase a nuestro canal de Youtube

Agregar nueva sección

Comience agregando una nueva sección regular a la página en la que está trabajando.

cuadrículas flotantes

Agregar nueva fila

Estructura de columna

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

cuadrículas flotantes

Fondo degradado predeterminado

Sin agregar ningún módulo todavía, abra la configuración de la fila y agregue el siguiente fondo degradado:

  • Color 1: # b1ffc4
  • Color 2: #ffffff
  • Tipo de degradado: radial
  • Dirección radial: centro
  • Posición de inicio: 28%
  • Posición final: 28%

cuadrículas flotantes

Desplazar fondo degradado

Cambia el fondo del degradado al pasar el mouse.

  • Color 1: # b1ffc4
  • Color 2: #ffffff
  • Tipo de degradado: radial
  • Dirección radial: izquierda
  • Posición de inicio: 5%
  • Posición final: 5%

cuadrículas flotantes

Espaciado

Pase a la configuración de espaciado y cambie los valores de margen y margen a continuación.

  • Relleno superior: 0px
  • Relleno inferior: 0px
  • Margen superior: 50 px
  • Margen inferior: 50 px

cuadrículas flotantes

Borde predeterminado

Agregue un radio de borde de "50 px" a las esquinas superior derecha e inferior derecha a continuación.

cuadrículas flotantes

Hover Border

Vuelva a colocar las esquinas en '0px' al pasar el mouse por encima.

cuadrículas flotantes

Sombra de caja predeterminada

Agregue una sombra de cuadro sutil a continuación utilizando la siguiente configuración:

  • Fuerza de desenfoque de sombra de caja: 50 px
  • Color de sombra: rgba (0,0,0,0.09)

cuadrículas flotantes

Hover Box Shadow

Elimine la sombra de la caja al pasar el mouse reemplazando el color de la sombra por uno completamente transparente.

  • Color de sombra: rgba (0,0,0,0)

cuadrículas flotantes

Agregar módulo de texto a la columna

Añadir contenido H2

Es hora de comenzar a agregar módulos, comenzando con un módulo de texto. Ingrese algún contenido H2 de su elección.

cuadrículas flotantes

Configuraciones de texto H2

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

  • Título 2 Fuente: Acme
  • Título 2 Estilo de fuente: subrayado
  • Título 2 Color de subrayado: # 00ff3f
  • Título 2 Color del texto: # 000000
  • Encabezado 2 Tamaño del texto: 3vw

cuadrículas flotantes

Espaciado

Agregue algunos valores de relleno personalizados a continuación.

  • Relleno superior: 6vw
  • Acolchado inferior: 7vw
  • Acolchado izquierdo: 2vw

cuadrículas flotantes

Agregar módulo de imagen a la columna

Cargar imagen

El segundo módulo que necesitamos en esta columna es un módulo de imagen. Cargue una imagen de paisaje de su elección.

cuadrículas flotantes

Caja ligera

Habilite la opción lightbox en la configuración del enlace a continuación.

  • Abrir en Lightbox: Sí

cuadrículas flotantes

Dimensionamiento

Y fuerce el ancho completo de la imagen en la configuración de tamaño. Esto asegurará que la imagen siga respondiendo en todos los tamaños de pantalla.

  • Forzar ancho completo: sí

cuadrículas flotantes

Clonar el módulo de imagen dos veces

Una vez que haya completado el primer Módulo de imagen, puede continuar y clonarlo dos veces.

cuadrículas flotantes

Cambiar imágenes

Cambia las imágenes en ambos duplicados. Asegúrese de que las imágenes que cargue tengan la misma dimensión establecida que la primera imagen.

cuadrículas flotantes

Agregar efecto de desplazamiento a la fila

Dimensionamiento

Ahora que hemos completado la configuración básica de fila y módulo, ¡es hora de que ocurra el efecto de desplazamiento! Comenzaremos modificando el alto y el ancho de la fila y ocultando los desbordamientos. Abra la configuración de tamaño de la fila y realice los siguientes cambios:

  • Usar ancho de canal personalizado: sí
  • Ancho de canal: 1
  • Ancho: 20%
  • Ancho Máx .: 100%
  • Altura: 15.9vw

cuadrículas flotantes

Tamaño de desplazamiento

Vuelva a colocar el ancho en "100%" al pasar el mouse por encima. Esto permitirá que las imágenes aparezcan una vez que la fila esté suspendida.

  • Ancho: 100%

cuadrículas flotantes

Visibilidad

Pase a la pestaña avanzada siguiente y oculte los desbordamientos. Esto asegurará que las imágenes estén ocultas antes de que los visitantes se desplacen (escritorio) o hagan clic (tableta / móvil) en el Módulo de texto.

  • Desbordamiento horizontal: oculto
  • Desbordamiento vertical: oculto

cuadrículas flotantes

Transiciones

También estamos cambiando la duración de la transición en la configuración de las transiciones.

  • Duración de transición: 0 ms

cuadrículas flotantes

Elemento principal de desplazamiento de columna

Para crear una cuadrícula al pasar el ratón, vamos a abrir la configuración de la columna, ir a la pestaña avanzada y colocar las siguientes líneas de código CSS en el elemento principal de desplazamiento:

display: grid;
grid-template-columns: 20% 25% 25% 25%;
grid-gap: 10px;

cuadrículas flotantes

cuadrículas flotantes

Clone Row Twice

Una vez que haya completado la primera fila, puede clonarla tantas veces como desee. Para este ejemplo de diseño en particular, estamos clonando la fila dos veces.

cuadrículas flotantes

Cambiar fondo de degradado duplicado de fila n. ° 1

Cambie el primer color degradado del fondo degradado de la segunda fila.

  • Color 1: # ffdc96

cuadrículas flotantes

Cambiar duplicado fila # 2 fondo degradado

Haz lo mismo para la tercera fila.

  • Color 1: # b7c7ff

cuadrículas flotantes

Cambiar la copia del módulo de texto y el color de subrayado de ambos duplicados

Continúe modificando el color de subrayado de ambos duplicados del Módulo de texto junto con la copia y ya está.

  • Color de subrayado # 1: # ffaa00
  • Color de subrayado # 2: # 0037ff

cuadrículas flotantes

cuadrículas flotantes

Avance

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

Escritorio

cuadrículas flotantes

Móvil

cuadrículas flotantes

Pensamientos finales

En esta publicación, le mostramos cómo revelar imágenes en cuadrículas de desplazamiento horizontal utilizando las opciones de desbordamiento de Divi. Las imágenes fueron reveladas una vez que se cernían sobre el escritorio y se hacía clic en la tableta / teléfono. Aunque revelamos imágenes, puede revelar cualquier tipo de contenido que desee modificando la configuración dentro del generador. ¡Esperamos que este tutorial lo inspire a crear sus propios diseños alternativos de cuadrícula flotante también! Si tiene alguna pregunta o sugerencia, asegúrese de 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 Divi, asegúrese de Suscríbete a nuestro boletín de correo electrónico y Canal de Youtube así que siempre serás una de las primeras personas en conocer y obtener beneficios de este contenido gratuito.