Esta publicación es la parte 1 de 5 en nuestra mini serie 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!
Las galerías son una de las herramientas más importantes en el diseño web actual. Si usted es un diseñador que quiere mostrar su trabajo, un fotógrafo que quiere mostrar sus fotos o una empresa que quiere una cartera destacada, la necesidad de galerías en línea sigue y sigue. Con el módulo Divi Gallery, podemos crear galerías asombrosas y llamativas que atraerán a los visitantes de nuestro sitio web.
En esta miniserie Divi , repasaremos 5 impresionantes diseños de galería Divi y cómo crearlos. Algunos de estos ejemplos serán bastante simples y solo requerirán algunos ajustes en la configuración del módulo Divi. Otros serán un poco más avanzados y requerirán un poco de CSS y otras personalizaciones.
Mi esperanza es que tanto si eres un novato en Divi y el diseño web como si eres un experto experimentado en Divi, ¡podrás aplicar estas ideas y te inspirarás para llevar tus galerías Divi al siguiente nivel!
Antes de comenzar, echemos un vistazo al módulo de galería Divi predeterminado y en qué lo convertiremos al final de este tutorial.
Cuando agrega imágenes al módulo Divi Gallery y no hace nada más, esto es lo que obtiene.
Pase el cursor sobre el módulo de galería predeterminado
De forma predeterminada, el módulo tiene algo de relleno entre las fotos, muestra la etiqueta de la imagen y se alineará en 4 columnas. El ícono de pasar el mouse sobre el icono atraerá el color del tema principal y tendrá una superposición blanca transparente. No está mal para algo listo para usar, pero exploremos algunas formas de hacer que nuestras galerías sean «pop».
Al final de nuestro tutorial de hoy, obtendremos una hermosa galería de ancho completo como la que ves a continuación.
Ejemplo 1 – Pase el cursor sobre la galería de ancho completo
Cómo crear una galería de ancho completo con el módulo Divi Gallery
Suscríbete a nuestro canal de Youtube
Concepto e inspiración para el módulo de galería de ancho completo
La galería de ancho completo es bastante omnipresente en línea, pero se me ocurrió que algunas personas que usan Divi pueden no saber que pueden hacer algunos cambios simples en el módulo de la galería y lograr el mismo efecto.
Preparando sus elementos de diseño
Antes de sumergirse en el tutorial a continuación, querrá hacer lo siguiente para prepararse y preparar sus elementos de diseño para una implementación de diseño exitosa.
1) Optimiza tus imágenes para la web
Cuando crea una galería en línea, lo más importante que debe hacer primero es asegurarse de que sus imágenes (ya sean diseños o fotos) tengan el tamaño de archivo más pequeño posible antes de cargarlas. Esto ayudará a que su página cargue el tiempo y ayudará a que su sitio web no se atasque con archivos grandes. Cuando descarga imágenes de una cámara a su computadora, a menudo son tamaños de archivo MUY grandes y lo mismo ocurre con muchos archivos de diseño. La optimización de sus imágenes para la web es muy importante, especialmente si su galería contiene 20 o más imágenes.
Por lo general, uso Adobe Bridge o Adobe Photoshop, pero existen numerosos programas que ayudan a optimizar sus imágenes antes de subirlas a un sitio web. También hay algunas herramientas en línea gratuitas como https://www.jpeg.io/ y https://compressor.io/ que te ayudarán a cambiar el tamaño y optimizar tus imágenes.
Tamaño de la imagen: He encontrado que las imágenes de alrededor de 1200 px de ancho son un buen tamaño de visualización y para las imágenes verticales, recomiendo no exceder los 1000 px de altura.
2) Etiqueta tus archivos
Una buena práctica al crear galerías es etiquetar sus archivos de imagen para que no sean extensiones de archivo de cámara largas. Esto no solo ayudará a la gestión de archivos (y a la cordura al revisar las fotos), sino que también es bueno para el SEO. Cuando las personas buscan empresas y servicios, las imágenes bien etiquetadas suelen ser las primeras en aparecer. Lo que puede ayudar a generar tráfico hacia usted o el sitio de sus clientes.
3) Asegúrate de que tus imágenes no tengan derechos de autor
Asegúrate de que las imágenes de tus galerías y los elementos de diseño no tengan derechos de autor. Las demandas por imágenes en línea no son una broma, así que asegúrese de que el trabajo o las imágenes que muestre SON PROPIOS, a menos que tenga su consentimiento para usarlos. Por el bien de estos tutoriales, estoy usando imágenes libres de regalías de https://unsplash.com .
Implementando el diseño del módulo de galería de ancho completo en Divi
Ajustaremos la configuración en estas áreas.
Para este diseño, 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
Para comenzar, cree una sola sección con una sola fila y un solo módulo de galería.
Configuración de fila
Lo primero que debemos hacer es configurar el módulo de filas en «ancho completo» y ajustar las canaletas para que las imágenes se alineen una al lado de la otra sin relleno.
Configuración general:
Hacer esta fila de ancho completo: SÍ
Usar ancho de medianil personalizado: SÍ
Ancho de medianil: 0
Mantener relleno personalizado en el móvil: SÍ
Guardar la salida
Configuración de fila abierta
Ajuste la configuración del canalón.
Configuración del módulo de galería
Ahora podemos pasar al módulo Galería y hacer los cambios necesarios para lograr nuestro diseño de ancho completo.
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
Configuración general
Configuración avanzada de diseño:
Color de icono de zoom: #ffffff
Color de superposición de desplazamiento: rgba(28,28,28,0.81)
Selector de icono de desplazamiento: icono de lupa con signo más
Esto es lo que verás cuando te desplaces sobre la imagen. Elegí usar el ícono de la lupa para darle al usuario la idea de «observar más de cerca» esta imagen. Puede probar cualquier icono que desee en su diseño. También invierto el diseño predeterminado y voy con un ícono blanco sobre una superposición de fondo más oscura.
Guardar la salida
Configuración avanzada de diseño
CSS personalizado en las opciones del tema Divi
Notará que cuando abre una imagen, el título de la imagen se muestra en la esquina inferior izquierda de la imagen. 9 de cada 10 veces, los clientes me piden que elimine eso. Así que solo hago esa práctica estándar ahora. Agregaré este efecto a todas las galerías de esta miniserie.
Quitar el título de la imagen
Para eliminar la etiqueta, dirígete al panel Opciones de tema de Divi navegando a Divi > Opciones de tema y desplázate hacia abajo hasta CSS personalizado e ingresa este código:
|
01
02
03
|
.mfp-title {display: none;} |
Eso eliminará el nombre del archivo cuando el usuario abra una imagen.
¡Su diseño final, la galería de ancho completo con el módulo de galería Divi!
¡Y ahí lo tienes! Una forma rápida pero eficiente de diferenciar su galería del aspecto estándar mediante la creación de una galería de ancho completo. La mejor parte: ¡pudimos lograr este aspecto simplemente cambiando algunas configuraciones estándar del módulo Divi sin código adicional ni CSS!
Mañana: uso del módulo Divi Gallery para crear una galería en mosaico con relleno personalizado.
Vuelva a consultar mañana para ver el ejemplo 2, donde exploraremos cómo crear una galería de estilo de mosaico apretado simplemente ajustando el relleno. ¡A la mayoría de mis clientes les encanta este look y estoy emocionada de mostrarles cómo lograrlo!
Ejemplo 2: galería de azulejos estrechos con relleno
¡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!