Esta publicación es la parte 2 de 5 de nuestra miniserie titulada 5 Impresionantes diseños de galería Divi y cómo crearlos . ¡Estén atentos para conocer los cinco ejemplos únicos del módulo de galería y los tutoriales sobre cómo lograrlos!
En este segundo ejemplo, vamos a crear una apariencia de galería de mosaicos apretados con relleno personalizado para agregar un espacio en blanco limpio y uniforme entre cada imagen. Varios de mis clientes que abarcan múltiples industrias parecen AMAR este diseño, ¡así que estoy emocionado de compartirlo con ustedes!
La mayoría de las configuraciones que cambiaremos están en las opciones del módulo estándar, luego agregaremos un poco de CSS para el relleno personalizado.
Antes de comenzar, echemos un vistazo al Divi predeterminado y su módulo de galería. Cuando agrega imágenes al módulo Divi Gallery y no hace nada más, la imagen a continuación es básicamente lo que obtiene.
Pase el cursor sobre el módulo de galería predeterminado
Al final de nuestro tutorial de hoy, lograremos una galería en mosaico con un relleno personalizado como el que ves a continuación.
Pase el cursor sobre la galería en mosaico
Cómo crear una galería en mosaico con relleno personalizado con el módulo Divi Gallery
Suscríbete a nuestro canal de Youtube
Concepto e inspiración para el aspecto de mosaico con el módulo de galería de relleno personalizado
La primera vez que usé este efecto fue cuando un cliente me pidió que pusiera «solo un poco de espacio» entre cada imagen. Se me ocurrió que con las opciones de medianil de Divi, las imágenes a menudo estaban alineadas juntas o espaciadas muy separadas. Me di cuenta de que solo con una pequeña adición de relleno CSS, podía lograr el aspecto que mi cliente quería. Ahora uso este aspecto para la mayoría de mis sitios y realmente ayudó a diferenciar mis galerías de otros sitios Divi. ¡Espero que pueda usar esta idea, ajustar la configuración a su gusto y crear sus propias galerías de aspecto único!
Preparando sus elementos de diseño
El tutorial de hoy, como el de ayer , requerirá doce imágenes. Usé unsplash.com para obtener mis propias imágenes completamente gratis para usar. Si está creando contenido de demostración o simplemente siguiendo este tutorial por diversión, le recomiendo que haga lo mismo. Por otro lado, si tienes tus propias imágenes originales, entonces utilízalas.
El tamaño que me funcionó mejor para estas imágenes es 1200 px de ancho por 1000 px de alto. También querrá guardarlos como jpegs comprimidos para ahorrar espacio. Si no está seguro de cómo hacerlo, puede ver este tutorial para obtener instrucciones paso a paso .
Al igual que con la publicación de ayer, también recomendaría que etiquete sus archivos de una manera legible (en lugar del revoltijo predeterminado de letras y números que producen las cámaras). Esto es útil con SEO y su propia organización personal/búsqueda de archivos.
Implementando la galería en mosaico con un diseño de módulo de relleno personalizado en Divi
Para este ejemplo, usaremos el módulo Divi Gallery y haremos ajustes en estas 3 áreas:
– Configuración general
– Configuración avanzada de diseño
– Configuración personalizada de CSS
La configuración la cambiaremos.
Para comenzar, cree una sola sección con una sola fila y un solo módulo de galería.
En la configuración del módulo de fila
Lo primero que debemos hacer es ajustar las canaletas para que las imágenes se alineen una al lado de la otra.
Configuración general:
Usar ancho de canalón personalizado: SÍ
Ancho de canalón: 0
Mantener relleno personalizado en el móvil: SÍ
Guardar la salida
Ejemplo 2: configuración de fila
Configuración del módulo de galería
Configuración general:
Imágenes de la galería: Se agregaron las imágenes a la galería
Diseño: Cuadrícula
Número de imágenes: 12
Mostrar título y subtítulo: NO
Mostrar paginación: NO
Ejemplo 2 Configuración general
Configuración general avanzada:
Color de icono de zoom: #606060
Color de superposición de desplazamiento: rgba(255,255,255,0.75)
Selector de icono de desplazamiento: icono de lupa
Esto es lo que verá el usuario cuando se desplace sobre la imagen. Estoy usando la lupa en este ejemplo, pero puedes probar cualquier icono que quieras en tu diseño.
Ejemplo 2 Configuración de diseño avanzada
CSS personalizado:
Artículo de la galería:
|
01
|
padding: 3px; |
La sección de elementos de la galería aquí destaca cada imagen en la galería, por lo que cualquier ajuste que haga aquí afectará a cada imagen.
Ejemplo 2: configuración personalizada de CSS
Guardar la salida
¡Su diseño final, el aspecto de mosaico con relleno personalizado con el módulo Divi Gallery!
¡Y ahí lo tienes! Con algunos ajustes a las opciones del módulo que nos brinda Divi y solo una línea de CSS personalizado, tenemos una galería de mosaicos ingeniosa que realmente le dará a nuestras galerías una apariencia agradable. Puede jugar con el número de relleno para crear más o menos espacio entre sus imágenes.
Mañana: creación de un borde único para las imágenes del módulo Divi Gallery
Vuelva a consultar mañana para el ejemplo 3, ¡donde usaremos una máscara de recorte para crear bordes únicos en las imágenes de nuestro módulo Divi Gallery!
Ejemplo 3: borde de imagen único
¡Asegúrate de suscribirte a nuestro boletín de correo electrónico y canal de YouTube para que nunca te pierdas un gran anuncio, un consejo útil o un obsequio de Divi!