Dado que las nuevas opciones de tamaño de Divi han sido lanzados, hay algunos tutoriales que le muestran cómo crear revelaciones al pasar el mouse. En estos tutoriales, el contenido enmascarado se colocó verticalmente. Sin embargo, en algunos casos es posible que desee crear un revelación horizontal. En este tutorial, le mostraremos cómo revelar imágenes usando las cuadrículas flotantes y las opciones de desbordamiento. Divi. Hacer este trabajo requiere un enfoque ligeramente diferente. Vamos a usar una fila de una columna y colocar todos los módulos uno debajo del otro. Al pasar el mouse, convertiremos la columna en una cuadrícula horizontal. ¡También puedes descargar el archivo JSON gratis!
Vamos.
vista
Antes de sumergirnos en el tutorial, echemos un vistazo rápido a cómo se ve en diferentes tamaños de pantalla.
¡Comencemos a recrear!
Añadir una nueva sección
Comience agregando una nueva sección regular a la página en la que está trabajando.
Añadir una nueva linea
Estructura de la columna
Continúe agregando una nueva fila usando la siguiente estructura de columna:
Fondo degradado predeterminado
Sin agregar más módulos, abra los parámetros de línea y agregue el siguiente fondo degradado:
- Color 1: #b1ffc4
- Color 2: #ffffff
- Tipo de gradiente: radial
- Dirección radial: centro
- Posición de inicio: 28%
- Posición final: 28%
Volando sobre el fondo degradado
Cambia el fondo del degradado al pasar el cursor por encima.
- Color 1: #b1ffc4
- Color 2: #ffffff
- Tipo de gradiente: radial
- Dirección radial: izquierda
- Posición de inicio: 5%
- Posición final: 5%
espaciamiento
Vaya a la configuración de espaciado y luego cambie los valores de margen y relleno.
- Relleno superior: 0px
- Relleno inferior: 0px
- Margen superior: 50px
- Margen inferior: 50px
Borde predeterminado
Agregue un radio de borde de píxeles 50 en las esquinas superior derecha e inferior derecha.
Hover Border
Coloca las esquinas en "0px" flotando.
Sombra predeterminada
Luego agregue una sombra de cuadro sutil utilizando los siguientes parámetros:
- Box Shadow Blur Force: 50px
- Color de sombra: rgba (0,0,0,0.09)
Hover Box Shadow
Elimina la sombra de la caja cuando vueles, reemplazando el color de la sombra con un color completamente transparente.
- Color de sombra: rgba (0,0,0,0)
Agregar un módulo de texto a una columna
Añadir contenido H2
Es hora de empezar a agregar módulos, comenzando con un módulo de texto. Introducir el contenido H2 de tu elección.
Configuraciones de texto H2
Vaya a la pestaña 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
- Título 2 Tamaño del texto: 3vw
espaciamiento
Luego agregue valores de relleno personalizados.
- Mejor relleno: 6vw
- Relleno inferior: 7vw
- Relleno izquierdo: 2vw
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. Sube una imagen de paisaje de tu elección.
Caja de luz
Active la opción lightbox en la configuración del enlace y luego.
- Abrir en el visor: sí
apresto
Y fuerce todo el ancho de la imagen en la configuración de tamaño. Esto asegurará que la imagen permanezca sensible en todos los tamaños de pantalla.
- Forzar ancho completo: sí
Clonar el módulo de imagen dos veces
Una vez que haya completado el primer módulo de imagen, puede copiarlo dos veces.
Cambiar imágenes
Cambie las imágenes en los dos duplicados. Asegúrese de que las imágenes que cargue sean del mismo tamaño que la primera imagen.
Agregue el efecto de rollover a la fila
apresto
Ahora que hemos completado la configuración básica de filas y pod, ¡es hora de crear el efecto de desplazamiento! Comenzaremos cambiando la altura y el ancho de la fila y ocultando los desbordamientos. Abra la configuración de tamaño de fila y realice los siguientes cambios:
- Use un ancho de canal personalizado: Sí
- Ancho de canal: 1
- Ancho: 20%
- Ancho máximo: 100%
- Altura: 15.9vw
Flotar
Reduzca el ancho a "100%" mientras se desplaza. Esto permitirá que las imágenes se muestren después de pasar la fila.
- Ancho: 100%
visibilidad
Cambie a la siguiente pestaña avanzada y oculte los desbordamientos. Esto asegurará que las imágenes estén enmascaradas antes de que visitantes desplácese (escritorio) o haga clic (tableta/móvil) en el módulo de texto.
- Desbordamiento horizontal: oculto
- Desbordamiento vertical: oculto
Transiciones
También estamos cambiando la duración de la transición en los parámetros de transición.
- Duración de la transición: 0ms
Elemento de desplazamiento de la columna principal
Para crear una cuadrícula flotante, abriremos la configuración de la columna, iremos a la pestaña de Opciones avanzadas y colocaremos las siguientes líneas de código CSS en el elemento flotante principal:
pantalla: cuadrícula; columnas-plantilla-cuadrícula: 20% 25% 25% 25%; rejilla: 10px;
Clonar la línea dos veces
Una vez que haya completado la primera fila, puede clonarla tantas veces como desee. Para este ejemplo de diseño en particular, clonamos la fila dos veces.
Modificar el fondo degradado de la línea 1
Cambie el color del primer degradado en el fondo degradado de la segunda línea.
- Color 1: # ffdc96
Cambiar el fondo degradado de la línea 2
Haz lo mismo para la tercera fila.
- Color 1: # b7c7ff
Cambie la copia del módulo de texto y el color de subrayado de los dos duplicados.
¡Continúe cambiando el color de subrayado de los duplicados del módulo de texto con la copia y ya está!
- Color subrayado # 1: # ffaa00
- Color subrayado # 2: # 0037ff
Consideraciones finales
En este tutorial, le mostramos cómo mostrar imágenes en cuadrículas horizontales usando las opciones de desbordamiento. Divi. Las imágenes se revelaron al pasar el cursor sobre el escritorio y hacer clic en la tableta/teléfono. Aunque hemos revelado imágenes, tú puedes revelar las contenido de su elección modificando los parámetros en el generador. ¡Esperamos que este tutorial te inspire a crear tus propios diseños alternativos de cuadrícula flotante! Si tiene alguna pregunta o sugerencia, asegúrese de dejar un comentario en la sección de comentarios a continuación.
