Cómo crear una galería de imágenes de ancho completo con el módulo Divi Gallery

El antes y el después

Aquí está el módulo de galería Divi predeterminado con 12 imágenes.

Aquí hay un ejemplo de galería de imágenes de ancho completo que puede crear fácilmente.

Preparando sus elementos de diseño

Para este tutorial, necesitará el tema Divi instalado y activo. También necesitará 12 imágenes agregadas a su biblioteca de medios para usarlas en la construcción de la galería de imágenes. Para un módulo de galería Divi que usa un diseño de cuadrícula, el tamaño de sus imágenes debe ser de alrededor de 1500 px por 800 px si planea que sus imágenes se abran en una pantalla de caja de luz para que llene bien la pantalla en la mayoría de los escritorios.

Para este tutorial, usaré imágenes del diseño prefabricado de la página de la galería del restaurante que está disponible de forma gratuita desde Divi Builder. Puedes descargar todas las imágenes al final de este post .

Implementación del módulo de galería Divi de ancho completo

Suscríbete a nuestro canal de Youtube

Configuración de una nueva página

Para empezar, cree una nueva página, asigne un título a su página e implemente Divi Builder. Seleccione la opción «Crear desde cero» y luego publique su página. Luego haga clic para construir en la parte delantera.

Creación de la galería de imágenes

Con Divi Builder implementado, continúe y cree una nueva sección regular con una fila de una columna y agregue un Módulo de galería Divi a la fila.

Divi llenará el módulo de la galería con algunas imágenes de su galería de medios en una cuadrícula como la siguiente:

En la configuración del módulo de la galería Divi, haga clic en el ícono gris más para agregar 12 imágenes a la galería.

Luego actualice la configuración del módulo de la galería Divi de la siguiente manera:

Número de imágenes: 12

Mostrar título y subtítulo: NO

Mostrar paginación: NO

Creación de un diseño de ancho completo para la galería de imágenes

Para crear el diseño de ancho completo para la galería de imágenes, guardemos la configuración de nuestra galería por ahora y abramos la configuración de fila. En la pestaña de diseño, actualice lo siguiente:

Hacer que esta fila sea de ancho completo: SÍ

Ancho de canaleta: 1

Esta es la forma más fácil de poner en marcha una galería de imágenes de ancho completo. Elegir «Hacer esta fila de ancho completo» en combinación con establecer el ancho de medianil en «1» hará que la galería abarque el ancho completo de la sección (en todos los tamaños de navegador) y eliminará el espacio entre las imágenes.

Y la galería también continuará abarcando el ancho completo de la página en dispositivos móviles.

Personalización de las opciones de superposición de imagen flotante

Para completar el diseño de su galería de imágenes de ancho completo, es útil personalizar las opciones de superposición de desplazamiento de la imagen que están integradas en la configuración del módulo Divi Gallery. Puede cambiar el icono de zoom, el color del icono y el color de superposición. Para hacer esto, abra la configuración de la Galería y actualice lo siguiente:

Color de icono de zoom: #ffffff

Color de superposición de desplazamiento: #333d48

Icono de desplazamiento: ver captura de pantalla

Ahora veamos el diseño final.

Más opciones de espaciado de la galería de imágenes de ancho completo

Creación de un diseño de ancho completo con espaciado de ancho de medianil

La forma más fácil de personalizar el espacio entre sus imágenes en el Módulo de la Galería Divi es ajustar el ancho de la medianera de su fila principal. El ancho del canal se refiere al espacio entre las columnas. Con cualquier elemento Divi Row, los valores opcionales para el ancho del canal van de 1 a 4.

1 representa margen cero entre columnas.

2 representa un margen derecho del 3% entre columnas.

3 representa un margen derecho de 5,5% entre columnas.

4 representa un margen derecho del 8% entre columnas.

Dado que estamos utilizando el módulo Divi Gallery, el ancho del canalón también se refiere al espacio entre los elementos de la galería. Por lo tanto, al agregar el ancho de medianil a la fila, se ajustará el espaciado de los elementos/imágenes de la galería en el Módulo de galería.

Uso de ancho personalizado para tener más control sobre el espaciado en dispositivos móviles

Si la opción «Hacer esta fila de ancho completo» está configurada en SÍ y el ancho de la canaleta es 2 o más (cualquiera menos 1), Divi ajustará automáticamente el ancho de la fila para proporcionar un espacio exterior adicional. Esto es necesario porque el ancho de medianil solo se aplica al espacio entre las columnas/elementos de la galería y no a la fila en sí. Sin embargo, esto puede agregar más espacio de margen de lo que desea en dispositivos móviles. Por ejemplo, si tiene activa la opción «Hacer esta fila de ancho completo» con un ancho de medianil de 2, el ancho real de su fila será del 89 % en dispositivos móviles (no del 100 %). Entonces, si desea que la fila se extienda al 100% en dispositivos móviles, puede usar la opción Ancho personalizado en su lugar. Al darle a la fila un ancho personalizado del 100 %, el ancho de la fila seguirá siendo del 100 %, independientemente del valor de Ancho de medianil. Ahora simplemente puede agregar el espacio exterior para la fila usando relleno de fila.

Aquí hay un ejemplo de cómo funcionaría esto. Abra la configuración de la fila y actualice lo siguiente:

Ancho personalizado: 100 %

Ancho del canalón: 2

Observe cómo no hay margen a la derecha o izquierda de la galería.

Ahora agregue el siguiente relleno personalizado a la fila:

Relleno personalizado (escritorio): 5 % arriba, 5 % abajo, 5 % izquierda, 5 % derecha

Relleno personalizado (teléfono inteligente) 5 % arriba, 5 % abajo, 0 % izquierda, 0 % derecha

El relleno del 5% en el escritorio (y la tableta) proporcionará el espacio exterior que necesitamos para que coincida con el espacio entre los elementos de la galería.

Y al eliminar el relleno personalizado derecho e izquierdo para teléfonos inteligentes, las imágenes ocuparán todo el ancho del navegador, lo que les dará más visibilidad.

Adición de espaciado personalizado a los elementos de la galería sin ancho de medianil

Si desea obtener aún más control sobre el espaciado de su módulo Divi Gallery, puede agregar su propio espaciado personalizado entre los elementos de la galería en lugar de usar Gutter Width. Para hacer esto, deberá establecer el ancho de la canaleta en 1 y luego agregar espacio entre los elementos de su galería dentro de la configuración del módulo de la galería Divi. Para obtener más información, consulte el tutorial completo sobre el uso del módulo Divi Gallery para crear una galería de imágenes con espaciado personalizado

Obtenga más información sobre el módulo Divi Gallery

Consulte los siguientes tutoriales para conocer más formas de personalizar su módulo Divi Gallery:

• 6 diseños de borde únicos para las imágenes del módulo Divi Gallery
• Cambiar el número de columnas en el módulo Divi Gallery en diferentes puntos de interrupción
• Uso del módulo Divi Gallery para crear una galería de imágenes con espaciado personalizado
• Cómo crear una galería de imágenes que cambie de blanco y negro a color con el módulo de galería de Divi

Pensamientos finales

Con suerte, este tutorial lo ayudará a comprender cómo usar el módulo Divi Gallery para crear hermosas galerías de imágenes de ancho completo en su próximo proyecto. Y no olvide explorar todas las opciones de diseño integradas de Divi y los efectos de desplazamiento para que sus galerías de imágenes se destaquen aún más.

Espero escuchar de usted en los comentarios a continuación.

¡Salud!