Cada vez que diseñamos una web, obviamente tenemos en cuenta las necesidades del cliente, el rubro, su cliente potencial, e intentamos que su web, además de estar bien construida a nivel técnico, SEO, seguridad, también que sea atractiva visualmente.
Así que, siempre estoy buscando alternativas para un mejor diseño y una resolución sencilla para que el cliente luego pueda hacer los cambios que considere sin necesidad de tocar código y ya sabemos que WordPress y Divi nos ayudan a ello.
Hoy quiero presentarte este plugin para Divi, Divi Gallery Masonry, sin dudas un plugin que me ha encantado y he adoptado para algunos proyectos web.
Vamos, te cuento sobre él 😉
Galería por defecto en Divi
Divi, por defecto nos permite crear una galería, para ello, cuenta con un módulo que se llama así, pero claro, presenta opciones muy básicas.
Podrás agregar fotos y determinar si se muestran como como rejilla o bien como deslizador, slider.
En esta opción debes tener en cuenta el tamaño de las imágenes, ya que, si seleccionas deslizador y tienen diferentes tamaños, te aseguro no quedará muy bonito.
En esta imagen verás que no queda nada bien, ya que deja un espacio muy grande en blanco ya que hay otras imágenes en vertical.
Si optamos por la galería como rejilla, podrás seleccionar entorno o retrato.
En entorno quedarán todas las imágenes de igual tamaño visualmente y al hacer click se ampliará mostrando su tamaño real.
Si seleccionamos retrato, deberíamos ajustar el tamaño de cada imagen para que no quede mal visualmente.
Es verdad que siempre viene bien ajustar las medidas de las imágenes, pero a veces necesitamos que sean horizontales y verticales y en ese caso la verdad no quedaría bien con la galería con la que nos trae Divi por defecto.
Podemos seleccionar la cantidad de imágenes a visualizar, determinar si se muestra el título de la imagen y si dejamos a la vista la paginación.
Y enlace… puedes poner uno solo.
Al menos podemos uno, pero a veces necesitamos más…
Podemos hacer algunos ajustes más en la fila para poder dejar menos espacio entre las imágenes o hacerlas ancho completo, logrando por ejemplo esta composición.
Si queremos que aparezca el nombre, nos deja también, pero queda algo así…
Qué quieres que te diga, no me termina de convencer… para algunos proyectos puede ir genial.
O también podemos mejorarla con código, pero a veces no quieres tocar código.
Así que, si bien puede ayudarnos esta galería por defecto de Divi, la que te mostraré a continuación…
¡Te encantará! Y ya verás qué bien podría funcionar para enlazar esa galería de imágenes a URLs diferentes de tu sitio web.
Galería Divi Masonry
Este plugin, Divi Gallery Masonry, me encantó y ahora te mostraré cómo podemos utilizarlo.
Es de pago, pero te aseguro vale la inversión y lo puedes utilizar en webs ilimitadas.
Instalación del plugin Divi Gallery Masonry
Como todo plugin deberemos irnos a la sección de Plugins en el escritorio de WordPress y haremos click en “Añadir nuevo”.
Como es de pago deberemos subirlo, ya que no lo encontrarás en el repositorio de WordPress.
Si quieres más información sobre cómo subir y actualizar plugins puedes hacerlo aquí.
Activación de la licencia Divi Gallery Masonry
Una vez que lo has instalado deber ir a la pestaña que se ha generado en el escritorio para activar tu licencia.
Una vez activada te notificará que todo está ok y ya puedes comenzar a crear tu galería masonry con Divi.
Cómo a utilizar Divi Gallery Masonry
Creamos una sección y fila en Divi, entonces seleccionamos el módulo correspondiente, que lo encontrarás como “Masonry Gallery”.
Al seleccionarlo ya nos dará la opción de colocar las imágenes que queramos, podremos cambiar de lugar las imágenes una vez las seleccionemos.
Elegiremos el número de columnas, el espacio entre las imágenes, el tamaño en que se verán y una opción que me fascinó es la que te cuento a continuación…
Podremos insertar un link por imágenes, ¡es fantástico!
O sea que puedes poner por ejemplo diferentes imágenes y derivar al usuario a diferentes categorías en caso de tener un ecommerce.
Podremos seleccionar la cantidad de columnas y el espacio entre cada imagen.
Debajo de esta selección te aparecerá un apartado para colocar las URL, que deberás ir separando por {{link}} y ¡listo!
También puedes seleccionar si abre en la misma ventana o en una nueva.
Obviamente corrobora que la imagen lleve al link que corresponde 😉
Otras configuraciones de Divi Gallery Masonry
Si nos vamos a diseño tendrás la primera opción que se llama Overlay y es donde determinarás si le colocas una capa semi transparente, u opaca, lo que prefieras.
También si tendrá un icono que aparezca al pasar el ratón por encima o bien prefieres que se vea el título de la imagen y descripción.
Por supuesto tendrás los ajustes respecto al tipo y tamaño de letra, color, los ajustes de siempre.
El título puede estar en el centro o bien puedes determinar que aparezca debajo si seleccionas que la imagen se amplíe.
Si quieres el título debajo deberás seleccionar la opción “Open lightbox gallery” y también de la manera en que quieres que se muestre el título.
Puedes también hacer que el overlay de la galería masonry aparezca desde una posición u otra, dando una animación súper interesante y visual.
Además, podemos poner un borde a la imagen, separar las letras del título, siempre toquetea, es la forma de aprender 😉
También podremos ajustar la sección para hacerla de ancho completo, por ejemplo, para una web de fotógrafos queda bárbaro.
Aquí te dejo un ejemplo de cómo quedaría con la animación del overlay y el título de la imagen.
Me gusta mucho la opción de ancho completo y sin espacios, pero claro, dependerá de cada web la manera en que lo utilices.
Ajustes responsive de Divi Gallery Masonry
Con Divi Gallery Masonry claro que vas a poder realizar los ajustes que consideres en las versiones móviles.
Tal cual lo hacemos con cualquier módulo de Divi, podrás ir ajustando hasta que quede visualmente bien y a tu gusto para tus usuarios.
Imágenes atractivas para tu galería de imágenes
La lucha de cada día, hacer comprender al cliente el valor de tener buenas imágenes.
Si vas a invertir en tu web, lo mejor es que tengas imágenes de calidad y si son propias muchísimo mejor, eso dará confianza a tu cliente.
Y si vas a hacer tu web ni se te ocurra subir las imágenes como vienen, ¡por favor optimízalas!
Conclusión
Divi Gallery Masonry es un plugin que nos ayudará a crear galerías en Divi mucho más visuales y atractivas.
Si bien es un plugin de pago, te reitero, no es costoso y realmente creo que es genial, a mí me ha encantado y por supuesto lo aplico en algunos proyectos.
Además, siempre contarás con el apoyo de su creador en caso tengas algún inconveniente.
¿Si es un link de afiliados? Sí, vamos que tengo un blog de marketing y lo monetizo, además cada herramienta la pruebo antes de hacer un post, si me gusta, te la recomiendo, sino pues no. Y la realidad es que este te lo súper recomiendo 😉
¿Qué te ha parecido?
Madre. Consultora de Marketing Digital y Diseñadora web. Enamorada del Marketing Digital y las acciones que pueden hacer crecer tu negocio de manera online. En el Blog encontrarás información sobre ello, WordPress y diferentes herramientas que te serán útiles para tus proyectos digitales.
