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

Las galerías de imágenes de ancho completo siempre parecen verse bien en un sitio web. Una galería de ancho completa se extiende sobre todo el ancho de la ventana del navegador. Este espacio adicional permite que las imágenes mantengan un tamaño más grande, lo cual es excelente para la experiencia del usuario. Y la aparición de la cuadrícula ofrece un diseño estético que organiza las imágenes en columnas que se ajustarán maravillosamente en todos los anchos del navegador. En este tutorial, le mostraré cómo crear una galería de ancho completa con el módulo de la Galería Div. Se podría sorprender lo fácil que es hacerse en el Div. También mencionaré algunas formas en que puede usar su espacio personalizado para brindarle más control sobre su galería de ancho completo.
Vamos a empezar. Antes y después aquí, el módulo de la Galería DIV predetermina con 12 imágenes.

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

Preparación de los elementos de diseño para este tutorial, necesitará el tema instalado y activo. También necesitará 12 imágenes agregadas a su biblioteca de medios para ser utilizadas para construir la galería de imágenes. Para un módulo de galería DIP que usa una apariencia de cuadrícula, el tamaño de sus imágenes debe ser de aproximadamente 1500 PX con 800 PX si tiene la intención de abrir sus luces en la pantalla de la caja de luz, para que llene la hermosa pantalla en la mayoría de los escritorios.
Para este tutorial, utilizaré imágenes del aspecto prefabricado de la Galería de restaurantes de la página, que está disponible de forma gratuita de Divi Builder. Puede descargar todas las imágenes al final de esta publicación. Implementación de la galería FullWidth Div Div suscribe a nuestro canal de YouTube Configuración de una nueva página, crea una nueva página, le da a la página un título e implementa Divi Builder. Seleccione la opción “Construir desde cero” y luego publique la página. Luego haga clic para construir en el frente. Creación de la galería de imágenes con el constructor implementado Div, continúe y cree una nueva sección con una fila con una columna y agregue un módulo de galería en una fila. Dive completará el módulo de la galería con algunas imágenes en su galería de medios en una pantalla de cuadrícula. como lo siguiente:

En la configuración del módulo de la Galería Div, haga clic en el icono Gray Plus para agregar 12 imágenes a la galería.

Luego actualice la configuración del módulo Div Gallery de la siguiente manera: Número Imagen: 12 Mostrar título y leyenda: No muestre paginación: No

Creando un aspecto de ancho completo para la galería de imágenes para crear la apariencia de ancho completo para la galería de imágenes, para guardar en el momento en que nuestra configuración de la galería y abrir la configuración promedio. En la pestaña Diseño, actualice lo siguiente:

Haga que esta fila se complete el ancho: Sí, el ancho del comedero: 1
Esta es la forma más fácil de poner en funcionamiento una galería de imágenes de ancho completo. Elegir “Hacer esta fila Fullwidth” en combinación con la configuración del ancho de la canaleta en “1”, la galería cubrirá el ancho completo de la sección (en todas las dimensiones del navegador) y eliminará el espacio entre las imágenes.

Y la galería continuará expandiéndose en todo el ancho de la página y en el móvil. Personalización de las opciones de superposición de la imagen para completar el diseño de la galería de imágenes de ancho completo, lo ayuda a personalizar las opciones de superposición de la imagen que se incorporan en la configuración del Div. Puede cambiar el icono de zoom, el color del icono y el color de la superposición. Para esto, abra la configuración de la galería y actualice lo siguiente:

Icono de zoom de color: #FFFFFF Coloque el cursor sobre color: # 333D48 icono Hover: ver captura de pantalla

Ahora, revisemos el diseño final.
Varias opciones para espaciar la galería de imágenes de ancho completo que crean un ancho completo con espaciado entre la forma más fácil de personalizar el espacio entre sus imágenes en el módulo Div Gallery es ajustar el ancho de su fila principal. El ancho de la canaleta se refiere al espacio entre las columnas. Con cualquier elemento div en la fila, los valores opcionales para el ancho de la canaleta varían de 1 a 4. 1 representa el margen cero entre las columnas. 2 representa un margen recto del 3% entre las columnas. 3 representa un margen recto del 5,5% entre las columnas. 4 representa un margen recto del 8% entre las columnas.


Debido a que usamos el módulo de la Galería Div, el ancho de la canaleta también se refiere al espacio entre los elementos de la galería. Por lo tanto, agregar el ancho del canal en una fila ajustará el espacio de los artículos / imágenes de la galería en el módulo de la galería.

El uso del ancho personalizado para un mayor control sobre el espacio móvil si la opción “hacer esta fila de ancho completo” se establece en sí y el ancho de la canal Para proporcionar espacio exterior adicional. Esto es necesario, porque el ancho de la canaleta se aplica solo al espacio entre las columnas / los elementos de la galería y no la fila misma. Sin embargo, esto puede agregar más espacio de margen del que desea en su móvil. Por ejemplo, si tiene la opción “Haga esta fila de ancho completo” con un ancho de 2 canales, el ancho real de su turno será del 89% en el móvil (no 100%). Entonces, si desea que el giro se expanda al 100% en el móvil, puede usar la opción de ancho personalizada. Dando a la fila un ancho personalizado del 100%, el ancho de la fila seguirá siendo 100%, independientemente del valor del ancho de canaleta. Ahora simplemente puede agregar el espacio exterior para una fila usando el giro de la fila. Esto le dará más control del espacio exterior en el escritorio, la tableta y el teléfono inteligente. Abra la configuración de la fila y actualice lo siguiente: Ancho personalizado: 100% Ancho de canaletas: 2
Observe cómo no hay margen a la derecha o a la izquierda de la galería.

Ahora agregue las siguientes líneas personalizadas en una fila: trenza personalizada (escritorio): 5% más, 5% de baja, 5% izquierda, 5% de relleno derecho (teléfono inteligente) 5% más, 5% de baja, 0% izquierda, 0% derecho
El forro del 5% en el escritorio (y la tableta) proporcionará el espacio exterior que necesitamos para adaptarse al espacio entre los elementos de la galería.

Y al eliminar el revestimiento personalizado derecho e izquierdo para el teléfono inteligente, las imágenes cubrirán el ancho del navegador completo, dando a las imágenes más visibilidad. Ajustar el espacio personalizado en los artículos en la galería sin el ancho de la canaleta si desea ganar incluso Más control sobre su módulo, puede agregar su propio espacio personalizado entre los elementos de la galería en lugar de usar el ancho de la canaleta. Para hacer esto, deberá establecer el ancho de la canaleta en 1 y luego agregar espacio entre los elementos de su galería en la configuración del módulo de la Galería Div. Para obtener más información, consulte el tutorial completo sobre el uso del módulo Div Gallery para crear una galería de imágenes de espaciado personalizada

Obtenga más información sobre el módulo de la Galería Div Vea los siguientes tutoriales para múltiples formas de personalizar su módulo de la Galería Div:

6 modelos de bordes únicos para sus imágenes en el módulo de la Galería Div

Cambiar el número de columnas en el módulo de la Galería Div a diferentes puntos de interrupción

Uso del módulo Div Gallery para crear una galería de imágenes de espaciado personalizada
Cómo crear una galería de imágenes que pasa del color blanco y negro con el div
Los pensamientos finales esperan que este tutorial lo ayude a comprender cómo usar el módulo de la Galería Div para crear algunas galerías de ancho completo para su próximo proyecto. Y no olvide explorar todas las opciones de diseño integradas de la división y los efectos flotantes para que sus galerías de imagen se destaquen aún más.
Espero tener noticias suyas en los comentarios a continuación. ¡Suerte!