El módulo Galería de Divi te permite crear una galería con imágenes que tengamos en la biblioteca de medios.
En el video te muestro cómo funciona el módulo Galería de imágenes de Divi y cómo puedes aprovecharlo para incluir una serie de imágenes dentro de una página de tu web.
Cuando insertamos un nuevo módulo Galería lo primero que vemos es la pestaña Contenido, donde encontraremos una zona para añadir las imágenes que queremos incluir en la galería.
En esta sección podremos observar un recuadro con un botón gris que al pulsar nos permitirá insertar múltiples imágenes seleccionándolas desde la Biblioteca de medios.
Podemos ordenarlas al azar o definir el número de imágenes a mostrar por cada renglón.
En esta sección podemos activar o desactivar la visualización del título y leyenda que acompaña las imágenes, así como de la paginación que aparece en la parte inferior de las mismas.
Si deseamos cambiar el título y leyenda de alguna de las imágenes debemos hacerlo desde la Biblioteca de Medios.
Pulsamos sobre la imagen de nuestro interés y se abrirá una ventana donde veremos, en la parte derecha, las casillas correspondientes al título y leyenda de la imagen. Colocamos la descripción para ambas y cerramos la ventana.
Aunque no haya un botón de guardar los cambios serán aplicados, así que no hay que preocuparse por ello.
En esta opción podemos indicar una URL a la que será dirigido el usuario que haga clic en cualquier parte de la galería.
Si nos desplazamos hacia abajo en la misma pestaña Contenido encontramos la sección Fondo donde encontrarás un conjunto de opciones para configurar este atributo.
Cambiar el color de fondo de la galería de Divi es tan fácil como hacer clic en una paleta de 8 colores, o bien formar el color que queramos moviéndonos por la gama de colores y regulando la intensidad y transparencia.
Más abajo, en la misma pestaña, encontramos la opción Etiqueta de administración. Se trata un campo donde podemos escribir un nombre para identificar al módulo actual cuando estemos en la vista de esquema del editor Divi.
Avanzando a la pestaña Diseño encontramos todas las opciones que nos permitirán configurar el módulo Galería de Divi aplicando modificaciones en sus principales atributos. Estas opciones las veremos agrupadas dentro de las siguientes secciones:
Aquí también podremos fijar la orientación para las imágenes en grilla mostrándolas Apaisadas (horizontal) o en Retrato (vertical).
Con las opciones presentes en esta sección podemos configurar el aspecto de la opacidad, así como del icono de zoom que aparece en la imagen cuando colocamos el puntero del mouse sobre ella.
Aquí podemos ajustar el color del icono del zoom así como de la opacidad y cambiar el icono del zoom.
En esta sección tendremos la oportunidad de ajustar tanto el borde como las esquinas de las imágenes.
Aquí podemos colocar un valor para aumentar la curvatura en las esquinas y redondearlas hasta el punto que queramos, fijar un grosor al borde, asignarle un color, seleccionar un estilo, aplicar sombra a las imágenes así como filtros en la tonalidad de las imágenes.
En esta sección podemos ajustar la orientación de los textos que conforman el título y leyenda de la imagen, fijar una tonalidad clara u oscura, así como agregar una sombra en ellos.
Podemos asignar un jerarquía de encabezado para el caso de Título texto, elegir el tipo de letra, enfatizarla, asignarle un estilo, fijar una orientación, elegir un color para el texto, el tamaño, distancia entre caracteres, altura y por último añadir una sombra para crear la sensación de profundidad en el texto.
? Margen personalizado. Hace referencia al margen externo (margin en el CSS). Es el espacio que hay entre el borde del módulo y el borde de la columna o la fila que lo contiene.
? Relleno personalizado. Hace referencia al margen interno (padding en el CSS). Es el espacio que hay entre el borde del módulo y el texto que contiene.
A la derecha de cada opción hay un ícono de un teléfono que nos habilita opciones para asignar márgenes diferentes según el tipo de dispositivo con el que se conecta un usuario a nuestra página.
? Redondeo de esquinas (rounded corners). Acá podemos agregar una medida en píxeles que aumentará o reducirá el tamaño del redondeo de las esquinas del módulo. Si abrimos el candado que está en el medio podemos asignar un tamaño diferente para cada esquina. Cero significa que la esquina termina en punta.
? Bordes (border styles). Con esta opción podemos definir qué bordes mostrar. Podemos mostrar los cuatro bordes o solo alguno de ellos.
? Anchura del borde (border width). Desplazamos el selector para encontrar en espesor más apropiado.
? Color del borde.
? Estilo del borde. El estilo de borde puede ser sólido, guiones, puntos, doble y muchas opciones más.
Con ayuda de las opciones presentes en esta sección podremos darle sensación de profundidad a la galería, creando un efecto de relieve aplicado al módulo.
Aquí disponemos de un conjunto de efectos que podremos aplicar a la galería para alterar su tonalidad natural y darle el acabado que deseamos a través de la graduación de los siguientes atributos:
✦ Tonalidad
✦ Brillo
✦ Contraste
✦ Invertir
✦ Sepia
✦ Opacidad
✦ Desenfoque
Si abrimos la sección Tamaño vemos que tenemos un selector para definir al ancho (width) del módulo.
El valor predeterminado es 100% y significa que el módulo ocupa todo el ancho de la columna donde está ubicado. Reduciendo este valor podemos hacer que sea más angosto.
La animación es el efecto con el que aparece el módulo en la página. Si elegimos la opción None (desactivado) el módulo se carga junto con el resto de los elementos de la página de forma natural.
Si en cambio, seleccionamos alguna de las siete opciones de efectos que tiene Divi, el módulo permanece apagado hasta que el usuario llegue hasta su lugar y, en ese momento, irrumpirá en la página con el efecto elegido.
Por el momento la galería de Divi cuenta con siete efectos posibles:
Según el efecto que elijamos se van a activar más opciones de configuración para que podamos definir cómo funciona el efecto. Por ejemplo podemos definir:
? La duración del efecto.
? El retardo del efecto.
? Y varias cosas más…
Si nos vamos a la pestaña Avanzado del módulo Galería de Divi nos encontramos con tres secciones de configuración más:
Si bien la galería de Divi cuenta con un montón de opciones de configuración y personalización. Es posible que necesites hacer algún ajuste más fino que no está entre las opciones disponibles.
Entonces vas a tener que recurrir a la hoja de estilos, o a la opción CSS personalizado del Personalizador. Pero antes es necesario asignarle a la galería un ID o bien una clase CSS que puedas utilizar en la hoja de estilos para referirte a ella.
Consta de tres cajas en las que podemos escribir directamente el CSS que queramos aplicarle al módulo. La limitación de ésto es que solo podemos aplicarle estilos al módulo en si mismo, pero no a los elementos que contiene.
La sección Visibilidad del módulo Galería de Divi nos permite definir si el módulo se ve en todos los dispositivos o solo en alguno de ellos (teléfono, Tablet y/o escritorio).
Mediante esta sección podemos configurar el modo en que la animación asignada al módulo se comportará al pasar la flecha del mouse sobre el módulo Galería de Divi.
Estas son todas las posibilidades que nos ofrece, hasta la fecha de redacción de este manual, el módulo Galería de Divi.
Al momento de activar el constructor Divi se crea una nueva opción en el menú…
Divi es un constructor para WordPress que se instala como un si fuera un tema…
En esta guía te muestro paso a paso cómo crear una caja con información del…
En esta guía te muestro cómo cambiar el encabezado de la página home para que…
En esta guía vamos a ver cómo asignar con Divi un diseño diferente a entradas…
En esta guía te muestro paso a paso cómo crear un CV digital con WordPress…