6 diseños de bordes únicos para las imágenes del módulo de la galería Divi


El módulo de la galería Divi es un gran lugar para exhibir una galería de imágenes en su sitio web. De forma predeterminada, el módulo de la galería mostrará sus imágenes en un diseño de cuadrícula sin mucho estilo, lo que es excelente para mantener las imágenes como elemento de diseño principal. Sin embargo, si está buscando ser un poco creativo, puede enmarcar sus imágenes con diferentes diseños de bordes para ayudar a que su galería de imágenes se destaque. El módulo Galería hace que este proceso sea bastante fácil de hacer y los resultados pueden sorprenderte.

En este tutorial, le mostraré cómo crear diseños de bordes únicos para sus galerías de imágenes utilizando el módulo Galería Divi.

¡Empecemos!

Vistazo

# 1 galería de imágenes Polaroid

Comience el diseño de edificios n. ° 1

# 2 Diseño de cuadrícula limpia

Comience el diseño de construcción n. ° 2

# 3 imagen de fondo personalizada detrás de toda la galería

Comience el diseño de edificios n. ° 3

# 4 imagen de fondo personalizada detrás de cada elemento de la galería

Comience el diseño de edificios # 4

# 5 Combo de borde y sombra de caja

Comience el diseño de edificios n. ° 5

# 6 Diseño de borde de tira de película

Empiece a construir el diseño n. ° 6

Lo que necesitas para empezar

(incrustar) https://www.youtube.com/watch?v=XLiBMJjz2Pc (/ incrustar)

Suscríbete a nuestro canal de Youtube

Para este tutorial, necesitará el tema Divi instalado y activo. También necesitará agregar 12 imágenes a su biblioteca de medios para usarlas en la construcción de la galería de imágenes. Para un módulo de galería Divi que utiliza un diseño de cuadrícula, el tamaño de tus imágenes debe ser de alrededor de 1500 px por 800 px si planeas que tus imágenes se abran en la pantalla de la caja de luz para que llene bien la pantalla en la mayoría de los escritorios.

Configuración de su nueva página

Para empezar, necesitará crear una nueva página, darle un título a su página e implementar Divi Builder. Seleccione la opción "Construir desde cero" y luego publique su página. Luego haga clic para construir en la parte frontal.

Guardar una plantilla de módulo de la Galería Divi

Dado que vamos a diseñar 5 estilos de borde diferentes para el módulo de la Galería Divi, sería útil tener una plantilla básica del módulo de la galería guardada en nuestra biblioteca para que no tengamos que empezar de cero cada vez que diseñamos una nueva galería. .

Cree una nueva sección con una fila de una columna y luego agregue el Módulo Galería a la fila.

Divi llenará el módulo de la galería con algunas imágenes de su galería multimedia en una pantalla de cuadrícula como la siguiente:

En la configuración del módulo de la galería, haga clic en el ícono gris más para agregar 12 imágenes a la galería. Estoy usando imágenes de Diseño de página de la galería del restaurante.

Luego actualice la configuración del Módulo de la Galería Divi de la siguiente manera:

Número de imágenes: 12
Mostrar título y pie de foto: NO
Mostrar paginación: NO

Esto funcionará como una buena plantilla para avanzar. Para guardar el módulo Galería en su Biblioteca Divi, haga clic en el icono Guardar en biblioteca en el menú del módulo gris cuando se desplaza sobre el módulo. Luego, nombre la plantilla "Plantilla de módulo de galería" y guárdela en la biblioteca.

Cuando desee agregar el módulo de la galería guardada a su página, todo lo que necesita hacer es hacer clic para agregar un nuevo módulo como de costumbre. Luego, seleccione la pestaña Agregar desde la biblioteca en la ventana emergente y haga clic en el módulo de la galería con el nombre "Plantilla del módulo de la galería".

Eso es. ¡Ahora vayamos a esos diseños de bordes!

# 1 galería de imágenes Polaroid

El siguiente diseño es un borde popular para imágenes que se parecen a una imagen polaroid. Este es un diseño especialmente útil si desea mostrar los títulos de sus imágenes.

He aquí cómo hacerlo.

Configuración de la sección

Cree una nueva sección regular con una fila de una columna. Luego agregue la plantilla del módulo de la galería Divi guardada de la biblioteca (explicado arriba). Antes de editar el módulo Galería, abra la configuración de la sección y agregue un color de fondo gris para que nuestros bordes blancos resalten un poco.

Fondo: #dddddd

Configuración de filas

A continuación, actualice la configuración de la fila con lo siguiente:

Ancho del canal: 1

Esto eliminará el espacio de margen predeterminado entre las imágenes. Agregaremos nuestro propio espaciado personalizado más adelante.

Configuración del módulo de galería

Abra la configuración del módulo Galería y actualice lo siguiente:

Mostrar título y pie de foto: SÍ

Peso de la fuente del título: negrita
Estilo de fuente del título: TT
Alineación del texto del título: centro
Altura de la línea de título: 2em

Ancho del borde superior de la imagen: 10 px
Color del borde superior de la imagen: #ffffff
Ancho del borde izquierdo de la imagen: 10px
Color del borde izquierdo de la imagen: #ffffff
Ancho del borde derecho de la imagen: 10px
Color del borde derecho de la imagen: #ffffff

Para crear un espacio entre nuestras imágenes, agregue el siguiente borde a los elementos de la galería:

Ancho del borde: 10px
Color del borde: #dddddd (coincide con el color del fondo de la sección)

Para colorear la parte inferior de nuestro diseño de borde polaroid, necesitamos agregar un fondo blanco al módulo.

Color de fondo: #ffffff

Resultado final

Aquí está el resultado final del diseño del borde polaroid.

# 2 Diseño de cuadrícula limpia

Si está buscando un estilo de cuadrícula simple y limpio para sus imágenes, este diseño de borde es una buena opción. Está bien equilibrado y agradable a la vista.

He aquí cómo hacerlo.

Cree una nueva sección regular con una fila de una columna. Luego agregue la plantilla del módulo de la galería Divi guardada de la biblioteca (explicado arriba).

Configuración de filas

Antes de editar el módulo Galería, abra la configuración de la sección y actualice lo siguiente:

Ancho del canal: 1
Relleno personalizado: 0px arriba, 0px abajo
Ancho del borde: 10px
Color del borde: #dddddd

Este borde de fila es necesario para hacer coincidir el espacio exterior de nuestra galería con el espacio entre las imágenes.

Configuración del módulo de galería

Ahora abra la configuración del módulo de la galería y agregue un borde a los elementos de su galería y las imágenes de su galería actualizando lo siguiente:

Ancho del borde de la imagen: 20px
Color del borde de la imagen: #ffffff

Ancho del borde: 10px
Color del borde: transparente (esto es importante para mostrar el color de fondo)

Ahora agregue un color de fondo al módulo de la galería para completar el diseño.

Color de fondo: #dddddd (coincide con el color del borde de la fila)

Debido a que el borde del elemento de la galería es transparente, hereda el color del fondo.

Diseño final

Cambiar los colores del borde cambiando el color de fondo

Si quieres jugar con diferentes colores de borde, puedes actualizar el color de fondo a lo que quieras. Pero, deberá eliminar el borde de la fila y agregar el siguiente espaciado al módulo:

Relleno personalizado: 10px arriba, 10px abajo, 10px izquierda, 10px derecha

Ahora puedes ajustar el color de fondo a lo que quieras:

# 3 imagen de fondo personalizada detrás de toda la galería

Este diseño le permite usar una imagen de fondo para que sirva como una especie de fondo de textura para los bordes de sus imágenes. Esta es una buena manera de hacer que cada borde de imagen sea único, ya que muestra un área específica de la imagen de fondo del módulo. La configuración es muy similar al diseño de cuadrícula limpia anterior.

He aquí cómo hacerlo.

Cree una nueva sección regular con una fila de una columna. Luego agregue la plantilla del módulo de la galería Divi guardada de la biblioteca (explicado arriba).

Configuración de filas

Antes de editar el módulo Galería, abra la configuración de la sección y actualice lo siguiente:

Ancho del canal: 1
Relleno personalizado: 0px arriba, 0px abajo

Configuración del módulo de galería

Ahora actualice la configuración del Módulo de galería de la siguiente manera:

Imagen de fondo: (agregar imagen) (aún no podrás verla)
Color de fondo: #dddddd (esto solo se muestra si usa una imagen de fondo png con transparencia)
Ancho del borde de la imagen: 10px
Color del borde de la imagen: #ffffff

Ancho del borde (para el módulo): 10px
Color del borde: #ffffff

Luego, agregue el siguiente CSS personalizado al elemento de la galería:

padding: 3%;

Esto crea la separación entre los elementos de la galería para completar el diseño.

Resultado final

# 4 imagen de fondo personalizada detrás de cada elemento de la galería

Este diseño le permite usar una imagen de fondo para que sirva como borde para cada uno de los elementos de la galería individualmente. Puede crear cualquier imagen personalizada que desee o utilizar una de las imágenes de fondo incluidas en nuestros diseños prediseñados. Estoy usando uno de Diseño de la página de destino de Meetup.

He aquí cómo hacerlo.

Cree una nueva sección regular con una fila de una columna. Luego agregue la plantilla del módulo de la galería Divi guardada de la biblioteca (explicado arriba).

Configuración de filas

Antes de editar el módulo Galería, abra la configuración de la sección y actualice lo siguiente:

Hacer esta fila de ancho completo: SÍ
Ancho del canal: 2

Configuración del módulo de galería

Ahora actualice la configuración del Módulo de galería de la siguiente manera:

Ancho del borde de la imagen: 10px
Color del borde de la imagen: #ffffff

Luego, agregue el siguiente CSS personalizado al elemento de la galería:

padding: 30px;
background-image: url("");
background-size: contain;
background-repeat: no-repeat;
background-position: right;

A continuación, deberá cargar la imagen de fondo personalizada que desea colocar detrás de cada uno de los elementos de su galería. Para este ejemplo, estoy usando una imagen de uno de nuestros paquetes de diseño prediseñados. Una vez que la imagen se cargue en la galería de WordPress Media, copie la URL de la imagen en su portapapeles.

Ahora regrese y abra la configuración del módulo de la galería y pegue la URL en el CSS personalizado donde dice "inserte la URL de la imagen aquí". Asegúrese de mantener la URL dentro de las citas.

Resultado final

Aquí esta el resultado final.

# 5 Combo de borde y sombra de caja

Las sombras de caja son ideales para darle a tu galería un estilo personalizado. Puede usar sombras de cuadro en las imágenes del módulo de la galería Divi para crear un diseño de cuadrícula rota que enmarca las imágenes de una manera única. También puede combinar la sombra de la caja con diseños de bordes para todo tipo de posibilidades.

He aquí cómo hacerlo.

Cree una nueva sección regular con una fila de una columna. Luego agregue la plantilla del módulo de la galería Divi guardada de la biblioteca (explicado arriba).

Agregar borde de imagen y sombra de cuadro

Abra la configuración de la Galería y actualice lo siguiente:

Ancho del borde de la imagen: 10px
Color del borde de la imagen: #ffffff

Image Box Shadow: ver captura de pantalla
Posición horizontal de la sombra del cuadro: -30px
Posición vertical de la sombra del cuadro: -30px
Fuerza de propagación de la sombra de caja: -10px
Color de sombra: # e08474

Agregar el borde del elemento de la galería

El diseño de la caja de sombra se ve bien como está ahora. Pero también puede agregar un borde adicional para el elemento de su galería actualizando lo siguiente:

Ancho del borde derecho: 7px
Color del borde derecho: #dddddd
Estilo del borde derecho: punteado
Ancho del borde inferior: 7px
Color del borde inferior: #dddddd
Estilo del borde inferior: punteado

Agregué un estilo de borde punteado solo para recordarle los diferentes estilos disponibles. Siéntase libre de usar otros estilos (como sólido o discontinuo).

Configuración de filas

Para darle más espacio a su diseño, abra la configuración de fila y actualice lo siguiente:

Hacer fila de ancho completo: SÍ

Diseño final

Aquí está el diseño final.

# 6: Diseño de borde de tira de película

Para este último diseño, pensé en mostrarte algo un poco más único. Este diseño utiliza un estilo de borde punteado solo en el lado derecho e izquierdo de los elementos de la galería que divide cada columna de imágenes de una manera que se asemeja a las tiras de película.

He aquí cómo hacerlo.

Cree una nueva sección regular con una fila de una columna. Luego agregue la plantilla del módulo de la galería Divi guardada de la biblioteca (explicado arriba).

Configuración de filas

Antes de editar el módulo Galería, abra la configuración de la fila y cambie el ancho de la canaleta a 1.

Ancho de la canaleta: 1

Esto eliminará el espacio de margen predeterminado entre sus imágenes.

Configuración del módulo de galería

A continuación, abra la configuración de la Galería y actualice lo siguiente:

Agregar bordes de imagen discontinua

Ancho del borde derecho de la imagen: 8px
Color del borde derecho de la imagen: #dddddd
Estilo del borde derecho de la imagen: discontinuo
Ancho del borde izquierdo de la imagen: 8px
Color del borde izquierdo de la imagen: #dddddd
Estilo del borde izquierdo de la imagen: discontinuo

Agregar borde de elemento de galería para espaciar

Ancho del borde izquierdo: 20px
Color del borde izquierdo: #ffffff
Ancho del borde derecho: 20px
Color del borde derecho: #ffffff

Agregar sombra de cuadro de imagen

Image Box Shadow: ver captura de pantalla
Fuerza de desenfoque de sombra de caja: 0px
Fuerza de propagación de la sombra de caja: -10px
Color de sombra: # 222222

Agregar color de fondo

Color de fondo: # 222222

Luego, agregue el siguiente CSS personalizado al elemento de la galería:

padding: 5px 10px;

El resultado final

Ahora mira el resultado.

Pensamientos finales

Espero que estos seis ejemplos de diseño de bordes le sirvan de inspiración para crear algunos diseños de bordes personalizados para sus imágenes cuando utilice el módulo Galería Divi. Una vez que controle la configuración disponible con el módulo Divi Gallery, todo lo que necesita es un poco de creatividad. Así que diviértase explorando sus propias opciones de diseño con diferentes imágenes, colores y espaciado.

Espero tener noticias tuyas en los comentarios.

¡Salud!