Cómo crear una maqueta de galería de desplazamiento con las nuevas opciones de desbordamiento de Divi


¿Busca una forma creativa de mostrar imágenes en su sitio web? Asegúrate de seguir leyendo porque, en esta publicación, te mostraremos cómo crear una maqueta de la galería de desplazamiento utilizando solo las opciones integradas de Divi. Concretamente, vamos a convertir una sección en una maqueta y todas las filas de la sección serán parte de la maqueta. Una vez que obtenga la técnica, podrá presentar cualquier tipo de contenido que desee en una maqueta móvil y agregar interacción a sus páginas en poco tiempo.

¡Hagámoslo!

Avance

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

Escritorio

maqueta de galería de desplazamiento

Móvil

maqueta de galería de desplazamiento

Descargue el diseño de la maqueta de la galería de desplazamiento GRATIS

Para poner sus manos en el diseño de la maqueta de la galería de desplazamiento 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.

¡Empecemos a recrear!

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

Suscríbete a nuestro canal de Youtube

Agregar nueva sección

Dimensionamiento

Comience creando una nueva página o abriendo una existente y agregue una sección regular. Abra la configuración de la sección y modifique el ancho y el ancho máximo en la configuración de tamaño.

  • Ancho: 25vw (escritorio), 60vw (tableta), 80vw (teléfono)
  • Ancho máximo: 25vw (escritorio), 60vw (tableta), 80vw (teléfono)

maqueta de galería de desplazamiento

Espaciado

Luego, vaya a la configuración de espaciado, elimine todo el relleno superior e inferior predeterminado y agregue algunos márgenes superior e inferior para crear espacio.

  • Margen superior: 9vw
  • Abajo: 9vw
  • Relleno superior: 0px
  • Acolchado inferior: 0px

maqueta de galería de desplazamiento

Frontera

Continúe yendo a la configuración del borde de la sección y cree la forma de una maqueta móvil agregando "30px" a cada una de las esquinas.

maqueta de galería de desplazamiento

Sombra de la caja

Agregue una sombra de caja sutil para permitir que la forma se refleje.

  • Fuerza de desenfoque de sombra de caja: 100px
  • Color de sombra: rgba (0,0,0,0.18)

maqueta de galería de desplazamiento

Agregar fila n. ° 1

Estructura de columna

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

maqueta de galería de desplazamiento

Color de fondo

Sin agregar ningún módulo todavía, abra la configuración de la fila y cambie el color de fondo.

  • Color de fondo: #ffffff

maqueta de galería de desplazamiento

Dimensionamiento

Luego, vaya a la configuración de tamaño y permita que la fila ocupe todo el ancho de la sección.

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

maqueta de galería de desplazamiento

Espaciado

A continuación, elimine el acolchado superior e inferior predeterminado.

  • Relleno superior: 0px
  • Acolchado inferior: 0px

maqueta de galería de desplazamiento

Sombra de la caja

Y agregue una sombra de caja también.

  • Fuerza de desenfoque de sombra de caja: 80px
  • Color de sombra: rgba (0,0,0,0.92)

maqueta de galería de desplazamiento

Índice Z

Por último, pero no menos importante, vamos a asegurarnos de que la fila (y especialmente la sombra del cuadro) se superponga a la fila que viene a continuación aumentando el índice Z en la configuración de visibilidad.

  • Índice Z: 99

maqueta de galería de desplazamiento

Agregar módulo de texto a la columna

Agregar contenido H2

El único módulo que necesitamos en esta fila es un módulo de texto con algo de contenido H2.

maqueta de galería de desplazamiento

Configuración de texto H2

Una vez que haya agregado la copia H2, vaya a la configuración de texto H2 y realice algunos cambios.

  • Fuente del encabezado 2: Abril Fatface
  • Alineación del texto del título 2: centro
  • Color del texto del título 2: # 000000
  • Encabezado 2 Tamaño del texto: 1.5vw (escritorio), 3.5vw (tableta), 5vw (teléfono)

maqueta de galería de desplazamiento

Espaciado

Agregue un margen superior e inferior personalizado a continuación.

  • Margen superior: 1.5vw (escritorio y tableta), 3.5vw (teléfono)
  • Margen inferior: 1.5vw (escritorio y tableta), 3.5vw (teléfono)

maqueta de galería de desplazamiento

Agregar fila n. ° 2

Estructura de columna

¡A la segunda fila! Aquí, usamos la siguiente estructura de columnas:

maqueta de galería de desplazamiento

Dimensionamiento

Sin agregar ningún módulo todavía, abra la configuración de la fila y permita que la fila ocupe todo el ancho de la sección. También vamos a modificar la altura y la altura máxima para crear un efecto de desplazamiento vertical en los próximos pasos.

  • Usar ancho de canalón personalizado: Sí
  • Ancho de la canaleta: 1
  • Ancho: 100%
  • Ancho máximo: 100%
  • Altura: 38vw (escritorio), 100vw (tableta), 120vw (teléfono)
  • Altura máxima: 38vw (escritorio), 100vw (tableta), 120vw (teléfono)

maqueta de galería de desplazamiento

Espaciado

Luego, vaya a la configuración de espaciado y elimine todo el relleno superior e inferior predeterminado.

  • Relleno superior: 0px
  • Acolchado inferior: 0px

maqueta de galería de desplazamiento

Desbordamiento vertical

Como se mencionó anteriormente, estamos haciendo que esta fila se pueda desplazar verticalmente. Para hacer eso, necesitaremos cambiar el desbordamiento vertical en la configuración de visibilidad de la fila.

  • Desbordamiento vertical: desplazamiento

maqueta de galería de desplazamiento

Agregar módulo de imagen a la columna

Cargar imagen

Continúe y agregue un primer módulo de imagen a la fila y cargue una imagen de su elección. Puede descargar las imágenes que usamos a lo largo de este tutorial yendo a la Publicación del paquete de diseño del planificador de bodas.

maqueta de galería de desplazamiento

Dimensionamiento

Asegúrese de habilitar la opción "Forzar ancho completo" en el Módulo de imagen para garantizar un resultado receptivo.

  • Forzar ancho completo: Sí

maqueta de galería de desplazamiento

Espaciado

Vaya a la configuración de espaciado a continuación y cree un espacio entre este y el módulo que viene a continuación agregando un margen inferior.

  • Margen inferior: 1vw

maqueta de galería de desplazamiento

Clone el módulo de imagen tantas veces como desee

Una vez que haya terminado de modificar el primer módulo de imagen, puede clonarlo tantas veces como desee.

maqueta de galería de desplazamiento

Subir diferentes imágenes

Por supuesto, querrás cambiar la imagen en cada uno de los duplicados.

maqueta de galería de desplazamiento

Agregar fila n. ° 3

Estructura de columna

¡A la tercera y última fila! Utilizamos la siguiente estructura de columnas:

maqueta de galería de desplazamiento

Color de fondo

Sin agregar ningún módulo todavía, abra la configuración de fila y agregue un color de fondo blanco.

  • Color de fondo: #ffffff

maqueta de galería de desplazamiento

Dimensionamiento

Luego, vaya a la configuración de tamaño y permita que la fila ocupe todo el ancho de la sección.

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

maqueta de galería de desplazamiento

Espaciado

A continuación, agregue algunos valores de relleno superior e inferior personalizados.

  • Acolchado superior: 2.1vw (escritorio), 3.5vw (tableta), 5vw (teléfono)
  • Acolchado inferior: 2.1vw (escritorio), 3.5vw (tableta), 5vw (teléfono)

maqueta de galería de desplazamiento

Sombra de la caja

Y agregue una sombra de caja para crear profundidad.

  • Fuerza de desenfoque de sombra de caja: 80px
  • Color de sombra: rgba (0,0,0,0.92)

maqueta de galería de desplazamiento

Índice Z

Para asegurarnos de que esta fila (y especialmente su sombra de cuadro) se superponga a la fila anterior, vamos a aumentar el índice Z.

  • Índice Z: 99

maqueta de galería de desplazamiento

Agregar módulo de botones a la columna

Agregar copia

El único módulo que necesitamos en esta fila es un módulo de botones. Agregue una copia de su elección.

maqueta de galería de desplazamiento

Alineación

Luego, vaya a la pestaña de diseño y cambie la alineación del botón.

  • Alineación de botones: centro

maqueta de galería de desplazamiento

Configuración de botones

Modifique también la configuración de los botones.

  • Usar estilos personalizados para el botón: Sí
  • Tamaño del texto del botón: 1vw (escritorio), 2.5vw (tableta), 3.5vw (teléfono)
  • Color del texto del botón: #ffffff
  • Color de fondo del botón: # 000000
  • Ancho del borde del botón: 1 px
  • Fuente del botón: Abril Fatface

maqueta de galería de desplazamiento

maqueta de galería de desplazamiento

Espaciado

Y cree la forma que desee utilizando valores de relleno personalizados.

  • Acolchado superior: 0.5vw (escritorio), 1vw (tableta), 2vw (teléfono)
  • Acolchado inferior: 0.5vw (escritorio), 1vw (tableta), 2vw (teléfono)
  • Acolchado izquierdo: 3vw (escritorio), 7vw (tableta), 9vw (teléfono)
  • Relleno derecho: 3vw (escritorio), 7vw (tableta), 9vw (teléfono)

maqueta de galería de desplazamiento

Barra de desplazamiento de estilo

Agregar ID de CSS a la fila n. ° 2

Depende de usted si desea o no darle estilo a la barra de desplazamiento. Si lo hace, abra la segunda fila y agregue una clase CSS.

  • Clase CSS: image-scrollbar

maqueta de galería de desplazamiento

Abrir configuración de página

Luego, abra la configuración de la fila.

maqueta de galería de desplazamiento

Barra de desplazamiento de estilo con CSS

Y agregue las siguientes líneas de código CSS al cuadro CSS personalizado en la pestaña avanzada:

.image-scrollbar::-webkit-scrollbar {
width: 10px;
}
.image-scrollbar::-webkit-scrollbar-track {
background: #f1f1f1;
}
.image-scrollbar::-webkit-scrollbar-thumb {
background: #000000;
}

maqueta de galería de desplazamiento

Avance

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

Escritorio

maqueta de galería de desplazamiento

Móvil

maqueta de galería de desplazamiento

Pensamientos finales

En esta publicación, le mostramos cómo crear una hermosa maqueta de galería de desplazamiento con las opciones integradas de Divi únicamente. Al comienzo de esta publicación, también pudo descargar el diseño JSON de forma gratuita y usarlo en cualquier sitio web en el que esté trabajando. 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 obsequios de Divi, asegúrese de Suscríbete a nuestro boletín de correo electrónico y Canal de Youtube por lo que siempre será una de las primeras personas en conocer y obtener beneficios de este contenido gratuito.