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.

Crear galeria en Divi opción deslizador

Si optamos por la galería como rejilla, podrás seleccionar entorno o retrato.

Opciones galeria Divi rejilla

En entorno quedar√°n todas las im√°genes de igual tama√Īo visualmente y al hacer click se ampliar√° mostrando su tama√Īo real.

Opciones de galeria Divi entorno

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.

Opciones de galeria Divi retrato

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.

Galeria Divi rejilla con paginacion

Y enlace… puedes poner uno solo.

Al menos podemos uno, pero a veces necesitamos m√°s…

via GIPHY

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.

Ajustes en Galeria Divi

Si queremos que aparezca el nombre, nos deja también, pero queda algo así…

Ajustes galeria Divi visualizar nombre

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.

via GIPHY

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.

Plugin Divi Gallery Masonry

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.

Cómo subir plugin Premium Divi Gallety Masonry

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.

Activar licencia Divi Gallery Masonry

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‚ÄĚ.

Creamos galeria masonry

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.

Opcion para colocar varios links en galeria masonry

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 ūüėČ

Colocar varios links en galeria Masonry

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.

Capa overlay en galería Divi masonry

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.

Ajustes responsive en Galeria Masonry

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 Gallety 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?

¬°Haz clic para puntuar esta entrada!
(Votos: 4 Promedio: 5)
Diseno Web - disenemos juntos

¡Suscríbete al Blog!

Suscríbete y recibe los contenidos del Blog y además contenidos y promociones exclusivas

Políticas Privacidad

¬°Gracias por suscribirte! Estamos en contacto ;)

Pin It on Pinterest

#FrenarLaCurva