¿Está buscando 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 galería de desplazamiento usando Divi y sus opciones integradas únicamente. Concretamente, vamos a convertir una sección en una maqueta y hacer que todas las filas de la sección formen 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!
Antes de sumergirnos en el tutorial, echemos un vistazo rápido al resultado en diferentes tamaños de pantalla.
Escritorio
Móvil
Descargue el diseño de la maqueta de la galería de desplazamiento GRATIS
Para poner sus manos en el diseño de maqueta de galería de desplazamiento 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.
Descárgalo gratis
Únase al boletín informativo 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 muchos otros recursos, consejos y trucos increíbles y gratuitos de Divi. Síguenos y serás un maestro 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.
You have successfully subscribed. Please check your email address to confirm your subscription and get access to free weekly Divi layout packs!
¡Empecemos a Recrear!
Suscríbete a nuestro canal de Youtube
Agregar nueva sección
Dimensionamiento
Comience creando una nueva página o abriendo una existente y agréguele 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)
Espaciado
Luego, vaya a la configuración de espaciado, elimine todo el relleno superior e inferior predeterminado y agregue un poco de margen superior e inferior para crear espacio.
- Margen superior: 9vw
- Abajo: 9vw
- Relleno superior: 0px
- Relleno inferior: 0px
Borde
Continúe yendo a la configuración de borde de la sección y cree la forma de una maqueta móvil agregando ’30px’ a cada una de las esquinas.
Sombra de la caja
Agregue una sombra de cuadro sutil para permitir que la forma se manifieste.
- Fuerza de desenfoque de sombra de cuadro: 100px
- Color de sombra: rgba (0,0,0,0.18)
Añadir Fila #1
Estructura de la columna
Continúe agregando la primera fila a la sección usando la siguiente estructura de columnas:
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
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 del canalón: 1
- Ancho: 100%
- Ancho máximo: 100%
Espaciado
Elimine el relleno superior e inferior predeterminado a continuación.
- Relleno superior: 0px
- Relleno inferior: 0px
Sombra de la caja
Y agrega una sombra de caja también.
- Fuerza de desenfoque de sombra de cuadro: 80px
- Color de sombra: rgba (0,0,0,0,92)
Índice Z
Por último, pero no menos importante, nos aseguraremos 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
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.
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.
- Rúbrica 2 Fuente: Abril Fatface
- Encabezado 2 Alineación de texto: Centro
- Título 2 Color del texto: #000000
- Título 2 Tamaño del texto: 1.5vw (Escritorio), 3.5vw (Tableta), 5vw (Teléfono)
Espaciado
Agregue un margen superior e inferior personalizado a continuación.
- Margen superior: 1.5vw (computadora de escritorio y tableta), 3.5vw (teléfono)
- Margen inferior: 1.5vw (computadora de escritorio y tableta), 3.5vw (teléfono)
Añadir Fila #2
Estructura de la columna
¡A por la segunda fila! Aquí, estamos usando la siguiente estructura de columnas:
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 estamos modificando 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 del canalón: 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)
Espaciado
Luego, vaya a la configuración de espaciado y elimine todo el relleno superior e inferior predeterminado.
- Relleno superior: 0px
- Relleno inferior: 0px
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
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 estamos usando a lo largo de este tutorial yendo a la publicación Paquete de diseño del planificador de bodas .
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í
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
Clona el módulo de imagen tantas veces como quieras
Una vez que haya terminado de modificar el primer módulo de imagen, puede clonarlo tantas veces como desee.
Subir diferentes imágenes
Por supuesto, querrás cambiar la imagen en cada uno de los duplicados.
Añadir Fila #3
Estructura de la columna
¡A la tercera y última fila! Estamos usando la siguiente estructura de columnas:
Color de fondo
Sin agregar ningún módulo todavía, abra la configuración de la fila y agregue un color de fondo blanco.
- Color de fondo: #ffffff
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 del canalón: 1
- Ancho: 100%
- Ancho máximo: 100%
Espaciado
Agregue algunos valores de relleno superior e inferior personalizados a continuación.
- Acolchado superior: 2.1vw (escritorio), 3.5vw (tableta), 5vw (teléfono)
- Acolchado inferior: 2.1vw (escritorio), 3.5vw (tableta), 5vw (teléfono)
Sombra de la caja
Y agrega una sombra de cuadro para crear profundidad.
- Fuerza de desenfoque de sombra de cuadro: 80px
- Color de sombra: rgba (0,0,0,0,92)
Índice Z
Para asegurarnos de que esta fila (y especialmente la sombra del cuadro) se superponga a la fila anterior, vamos a aumentar el índice Z.
- Índice Z: 99
Agregar copia
El único módulo que necesitamos en esta fila es un módulo de botones. Agregue alguna copia de su elección.
Alineación
Luego, ve a la pestaña de diseño y cambia la alineación de los botones.
- Alineación de botones: Centro
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: 1px
- Fuente del botón: Abril Fatface
Espaciado
Y crea la forma que quieras usando valores de relleno personalizados.
- Relleno superior: 0.5vw (escritorio), 1vw (tableta), 2vw (teléfono)
- Acolchado inferior: 0.5vw (escritorio), 1vw (tableta), 2vw (teléfono)
- Relleno izquierdo: 3vw (escritorio), 7vw (tableta), 9vw (teléfono)
- Relleno derecho: 3vw (escritorio), 7vw (tableta), 9vw (teléfono)
Barra de desplazamiento de estilo
Agregar ID de CSS a la fila n.º 2
Depende de usted si desea o no diseñar la barra de desplazamiento. Si lo hace, abra la segunda fila y agréguele una clase CSS.
- Clase CSS: barra de desplazamiento de imagen
Configuración de la página abierta
Luego, abra la configuración de la fila.
Barra de desplazamiento de estilo usando CSS
Y agregue las siguientes líneas de código CSS al cuadro CSS personalizado en la pestaña avanzada:
|
01
02
03
04
05
06
07
08
09
|
.image-scrollbar::-webkit-scrollbar {width: 10px;}.image-scrollbar::-webkit-scrollbar-track {background: #f1f1f1;}.image-scrollbar::-webkit-scrollbar-thumb {background: #000000;} |
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 crear una hermosa maqueta de galería de desplazamiento solo con las opciones integradas de Divi. 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 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.