El módulo galería del tema Divi para WordPress

por | Jul 16, 2017 | Divi, Galería Divi, Tutoriales | 54 comentarios

imagen-destacada-galeria

El módulo galería del tema Divi para WordPress. 5 diseños distintos y cómo crearlos.

Seguimos adaptando al castellano tutoriales sobre el tema para WordPress Divi publicados en el blog de elegantthemes. En esta ocasión es el turno del módulo galería Divi. Así que fusionaremos 5 artículos que explican 5 variaciones de uso de la galería en un solo post.

Por otro lado, recordarte que debes tener instalado el tema Divi en tu WordPress para seguir este tutorial.

Las galerías de fotos son una de las herramientas más importantes en diseño de páginas web hoy en día. Por ejemplo, si eres diseñador y quieres mostrar tu trabajo, un fotógrafo que desea exhibir sus fotos, o cualquier tipo de negocio con una tienda on-line, necesitarás implementar alguna galería de fotos en tu web. Con el módulo galería Divi podemos crear atractivas galerías que atraerán a nuestros visitantes.

Algunos de los ejemplos que vamos a ver, serán bastante sencillos y sólo requerirán algunos ajustes en la configuración del módulo galería Divi. Otros serán un poco más avanzados e insertaremos un poco de CSS y para lograr nuestro objetivo.

Preparación de las fotos

Antes de adentrarnos en los tutoriales, vamos a repasar algunos conceptos importantes sobre el uso de las imágenes. Estas pautas deberán ser algo cotidiano a la hora de diseñar nuestras webs.

1)  Optimiza tus imágenes para la web.

Cuando creamos una galería de fotos, lo más importante es asegurarse de que las imágenes tengan el tamaño de archivo más pequeño posible antes de cargar. Esto es fundamental para la carga de la página y ayudará a que tu sitio web se muestre rápidamente. Cuando usas imágenes directamente desde una cámara a tu pc, a menudo son enormes. Y lo mismo ocurre con muchos diseños. Optimizar tus imágenes para la web es muy importante, sobre todo si tu galería contiene muchas imágenes.

Puedes usar Photoshop o cualquier editor de imagen. Hay un montón de programas para optimizar tus imágenes antes de subirlas a un sitio web. También hay herramientas online gratuitas como https://tinyjpg.com/ o https://compressor.io/compress que te ayudarán a cambiar el tamaño y optimizar tus imágenes.

En estos ejercicios que vamos a ver, hemos usado 12 fotos con unas medidas de 1024×768 (ancho/alto). Puedes usar el tamaño que mejor se adapte a tu proyecto. Sin embargo te recomendamos que su tamaño no sea superior al que realmente necesitas.

2)  Etiqueta tus imágenes.

Suele ser una buena práctica etiquetar tus imágenes con nombres que identifiquen tu foto. Además de ayudarte a gestionar tus archivos correctamente te vendrá muy bien paras el SEO de tu página. Evidentemente, es más fácil encontrar una foto que se llama «León en la sabana africana» que «foto0001IMG.jpg», ¿No te parece?

3)  Usa imágenes libres de derechos.

Es obvio, si no quieres usar imágenes de pago, asegúrate de que puedes usar una foto sin restricciones. Tienes un montón de sitios donde descargar imágenes o vectores en la web. Échale un ojo a este post: Los mejores sitios para descargar recursos vectoriales gratis. En este caso hemos descargado las imágenes de pixabay.

 1. Crear una galería Divi de ancho completo

Para este diseño y los siguientes usaremos el módulo de Divi Gallería  y haremos ajustes en estas 3 áreas: Ajustes generales, ajustes avanzados de diseño y CSS personalizado.

galería Divi ajustes

En primer lugar, creamos una sección estándar (se crea automáticamente al crear la página) con una sola fila e insertamos el módulo galeria. En la imagen de abajo puedes ver el aspecto de nuestra galería tipo rejilla por defecto, esto es, no hemos hecho aún ninguna modificación en los ajustes de fila.

Ejemplo-galeria-defecto

Ajustes de fila

Pulsa el botón de ajustes de fila (imagen abajo, enmarcado en rojo). De esta forma se abrirán las opciones donde poder configurar los ajustes para la fila.

opciones-fila

Desde aquí haremos que la galería se adapte a toda la pantalla, esto es, sin espacios entre fotos.

fila-modulo-ajustes

Marcamos entonces Hacer que esta fila tenga anchura completa. Así, conseguimos que las imágenes se adapten a toda la anchura de nuestra pantalla. Igualmente, marcamos El uso personalizado de canalón de ancho y ponemos su valor en 0. De esta forma, eliminamos el espacio entre las fotos de nuestra galería. Activamos también Conservar el relleno personalizado en dispositivos móviles. Así, en nuestros dispositivos móviles mantendremos el diseño.

Ajustes del módulo galería

Repasamos la configuración de Ajustes generales de nuestro módulo galería:

Ajustes-modulo-galeria-repaso

  1. Desde aquí añadimos las fotos que formarán parte de nuestra galería.
  2. En disposición, seleccionamos Rejilla.
  3. En este caso tenemos 12 fotos, y queremos que se vean todas a la vez, así que ponemos 12 en número de imágenes.
  4. No queremos que nos muestre título ni leyenda.
  5. Tampoco queremos mostrar paginación.

Para ajustes avanzados de diseño:

ajustes-avanzados-galeria

  1. Color de icono para ampliar: blanco.
  2. Color de capa superpuesta al pasar el ratón: negro, 50% transparente.
  3. Selector de icono al pasar el ratón: nosotros hemos elegido la lupa, pero prueba con alguno que te guste.

Con esto ya tendríamos nuestra galería terminada. Sin embargo vamos a customizar todavía un poco más nuestro ejemplo. Cuando pulsamos en una foto, cuando se muestra ampliada, aparece el nombre bajo la imagen, como puedes comprobar en la imagen inferior.

Galeria-nombre-foto

En ocasiones no es un problema, pero si preferimos ocultar ese texto, insertaremos este CSS en Divi > Opciones de tema y nos desplazamos hacia abajo del todo hasta donde pone CSS personalizado:

CSS Personalizado
.mfp-title {
display: none;
}

incluir-css-personalizado

Y aquí puedes ver el resultado final de nuestra galería:

galeria-resultado-final

Y ahora, como siempre, puedes repasar los pasos del primer tutorial en el vídeo correspondiente. Activa la opció HD en configuración del vídeo para aprovechar su máxima resolución:

2. Galería Divi como mosaico con relleno personalizado

Para este segundo ejemplo vamos a modificar la galería que tenemos creada hasta el momento. Así que vamos a ajustar la separación entre las imágenes de dos formas distintas: con unas líneas CSS o desde la configuración avanzadas del módulo galería.

La configuración de la fila y los ajustes generales del módulo galería son los mismos que ya hemos cambiado para el ejercicio anterior.

Vamos a personalizar un poco nuestra galería en la configuración avanzada del módulo. Por tanto, abrimos los ajustes avanzados del módulo y cambiamos:

  1. Color de icono para ampliar: gris.
  2. Color de capa superpuesta al pasar el ratón: blanco, 75% transparente.
  3. Selector de icono al pasar el ratón: Vamos a cambiar ahora al icono de ampliar, como puedes ver en la imagen inferior.

ajustes-avanzados-galeria-ejemplo2

Ajustar la separación entre las fotos

a)  Añade un poco de CSS

Para incluir el código, pulsamos en la pestaña CSS personalizado y buscamos la sección Artículo de Galería. Todo lo que pongamos ahí afectará a cada imagen de nuestra galería.

CSS Personalizado >> Artículo de galería
padding: 3px;

Y así, con el código que ves sobre estas lineas, generamos el espacio entre las imágenes, para conseguir el aspecto de mosaico que queremos. Por supuesto, puedes cambiar los valores para aumentar o reducir el espacio.

Este es el aspecto con la modificación realizada.

galeria-final-ejercicio2

b)  Hacer lo mismo sin código CSS

Si no queremos usar código, podemos conseguir la misma apariencia desde el panel de configuración avanzada del módulo. Para esto, activamos la última opción, Usar borde, elegimos blanco como color y le damos un valor de 3 (o el que queramos).

Repasa las modificaciones realizadas en este segundo ejemplo en el vídeo:

3. Crear un borde personalizado para nuestras imágenes

En este tercer ejemplo, vamos a usar una «máscara de recorte» con CSS para crear un pequeño recorte en cada ángulo de nuestras imágenes de la galería. Si no estás muy familiarizado con CSS, no te preocupes, podrás copiar el código y te explicaré para qué sirve y cómo usarlo. Además, te facilitamos una web gratuita donde puedes crear bordes y copiar el código necesario para implantarlo en tus imágenes.

Partiendo del último ejercicio, sólo será necesario modificar en la configuración de fila > ajustes generales> Uso personalizado de canalón de ancho, e introducir un valor de 2, por ejemplo. Esto creará espacio entre las imágenes para que pueda generarse la forma.

  • Insertar el código CSS

Como ya hemos hecho en otras ocasiones, para incluir el código, pulsamos en la pestaña CSS personalizado y buscamos la sección Artículo de Galería.

CSS Personalizado >> Artículo de galería
-webkit-clip-path: polygon(85% 0, 100% 13%, 100% 100%, 15% 100%, 0 86%, 0 0);
clip-path: polygon(85% 0, 100% 13%, 100% 100%, 15% 100%, 0 86%, 0 0);

De esta manera se genera el polígono que contendrá cada una de nuestras imágenes. Puedes experimentar con más formas en la web de Bennett Feely. Ahí podrás copiar el código necesario para hacer tus pruebas y pegarlo en tu web.

Y ya está, mira cómo debe quedar tu galería una vez hayas acabado de hacer el ejercicio.

* ¡OJO! estos bordes personalizados son compatibles con los navegadores Google Crhome, Safari y Opera, pero no con Firefox o internet explorer.

galeria-final-borde-personalizado

En el vídeotutorial puedes ver de nuevo los pasos y reforzar un poco más esta práctica.

4. Cambiar el número de columnas de nuestra galería Divi

Para este ejercicio utilizaremos los ajustes de ejercicio 1, esto es, una galería de ancho completa. Divi genera las galerías de forma automática con cuatro columnas. Pero puede ser muy útil aumentar o reducir las columnas en según qué casos. Por ejemplo, podríamos tener 15 fotos y querer mostrarlas en una galería sin paginación. De eso va este ejemplo.

Los únicos cambios que haremos en este ejemplo será añadir 3 imágenes a nuestra galería y añadir el código CSS. ¡Sólo eso! Mira cómo va a quedar:

galeria-final-5-columnas

  • Añadir el código CSS

Ya sabes, incluimos el código pulsando en la pestaña CSS personalizado y buscamos la sección Artículo de Galería.

CSS Personalizado >> Artículo de galería
margin: 0 !important;
width: 20% !important;
clear: none !important;

margin: esto centrará la imagen respecto al ancho establecido.

width: la anchura. Se divide el 100% del contenedor entre el porcentaje introducido, lo que genera las columnas resultantes. 100/20 =5 . Si quisiéramos 2 columnas el porcentaje sería 50%. Para 3 columnas, cambiamos margin a 33.33%. Para 6 columnas, será 16.66%, y así hasta el infinito y más allá…

clear: para que no haya espacio a la derecha o izquierda de la imagen. Como siempre, puedes hacer un repasito en el siguiente videotutorial.

5. Rollover sobre la imagen: de escala de grises a color

Y para rematar este megapost vamos a crear un efecto interesante. Convertiremos las imágenes a escala de grises y al pasar por cada una de ellas se verá la fotografía con su color. También, para este ejemplo, vamos a ocultar el icono que aparece al pasar el ratón por él. Todo esto con un poquito de CSS que, por supuesto, iremos explicando paso a paso.

Aunque podrás verlo mejor luego con el videotutorial, puedes hacerte una idea de este ejemplo viendo esta imagen.

galeria-final-ejercicio5-grises-color

Como otras veces, vamos a partir de una galería ya creada y personalizarla. En este caso será la del segundo ejercicio, por lo que mantenemos los parámetros de este ejercicio.

Ajustes del módulo galería

No vamos a necesitar ningún efecto adicional al pasar el cursor por una imagen, de manera que haremos totalmente transparente la capa superpuesta. Así, en Ajustes avanzados de diseño >> color de capa superpuesta al pasar el ratón, introducimos rgba(255,255,255,0). Esto es blanco con una opacidad de 0%, esto es, invisible.

CSS personalizado

Pulsamos la pestaña de CSS dentro de la configuración del módulo galería y en la zona artículo de galería añadimos:

CSS Personalizado >> Artículo de galería
padding: 3px

ajustes-galeria-css-articulo

Recuerda que este código añadía 3 píxeles de separación entre las imágenes.

Para conseguir el efecto de escala de grises insertamos, esta vez en la zona clase CSS de la misma pestaña CSS personalizado:

grayscale

ajustes-galeria-css-clase

Una vez que se agrega la clase, estamos diciendo al CSS que funcione en todo lo que se etiqueta con esa clase. Por lo tanto, ahora cada galería que tenga clase de «grayscale» creará el efecto gris/color.

Ahora, nos vamos a las opciones del tema Divi, en el escritorio de WordPress y nos desplazamos hasta la sección CSS personalizado (abajo del todo). Aquí es donde vamos a introducir el código CSS para el efecto.

ajustes-css-divi

.grayscale .et_pb_gallery_image {
 -webkit-filter: grayscale(100%);
 filter: grayscale(100%);
 opacity: .8;
}

Esto aplica la escala de grises a las imágenes y pone la opacidad al 80%. De esta manera, cuando pasemos el cursor por la imagen, el efecto destacará más.

.grayscale .et_pb_gallery_image:hover {
 -webkit-filter: grayscale(0%);
 filter: grayscale(0%);
 opacity: 1;
}

Este código controla el estado de la imagen cuando tenemos el cursor sobre ella. Por lo tanto, como puedes ver, la opacidad se establece en 1 (100%) y el porcentaje de escala de grises es 0%. O sea, el color de la imagen se mostrará cuando el ratón pase por encima.

.et_overlay:before {
 display: none;
}

Y, por último, con esto eliminamos el icono al pasar el ratón por cada imagen.

Y aquí está el videotutorial, que esperamos os aclare dudas.

Si quieres ver más opciones de personalización del módulo galería de divi, visita este artículo donde te explicamos cómo añadir un vínculo a cada imagen y muestra un texto on hover.