6 modelos de bordes únicos para sus imágenes en el módulo de la Galería Div

El módulo Div Gallery es un gran lugar para presentar una galería de imágenes en su sitio web. Por defecto, el módulo de la galería mostrará sus imágenes en un aspecto de la cuadrícula, sin demasiado estilo, lo cual es excelente para mantener las imágenes como el elemento de diseño principal. Sin embargo, si desea obtener un poco de creatividad, puede colocar sus imágenes con diferentes bordes para ayudarlo a distinguir su galería de imágenes. El módulo de la galería hace que este proceso sea bastante fácil de hacer y los resultados pueden sorprenderlo. En este tutorial, le mostraré cómo crear bordes únicos para galerías de imágenes utilizando el módulo Div Gallery.
¡Vamos a empezar! Dibujar con el ojo # 1 Galería de imágenes Polaroid

Comience el diseño del diseño de edificios # 1 # 2 Diseño de cuadrícula limpia

Comience el diseño del edificio # 2 # 3 Imagen de fondo personalizada detrás de toda la galería

Comience el diseño del edificio # 3 # 4 Imagen de fondo personalizada detrás de cada artículo en la galería

Comience el diseño del diseño # 4 # 5 Combo de sombra y borde

Comience el diseño del diseño del edificio # 5 # 6 Diseño de borde de la tira de películas

Comience a diseñar el edificio # 6 Lo que necesita para comenzar a suscribirse a nuestro canal de YouTube para este tutorial, necesitará el tema instalado y activo. También necesitará 12 imágenes agregadas a su biblioteca de medios para ser utilizadas para construir la galería de imágenes. Para un módulo de galería DIP que usa una apariencia de cuadrícula, el tamaño de sus imágenes debe ser de aproximadamente 1500 PX con 800 PX si tiene la intención de abrir sus luces en la pantalla de la caja de luz, para que llene la hermosa pantalla en la mayoría de los escritorios. La configuración. De la nueva página para comenzar, deberá crear una nueva página, dar un título a su página e implementar Divi Builder. Seleccione la opción “Construir desde cero” y luego publique la página. Luego haga clic para construir en el frente. Guardar una plantilla Div Div Gallery porque diseñaremos 5 bordes diferentes para el módulo de la Galería Div, sería útil tener una plantilla básica de la galería guardada en nuestra biblioteca para que no tengamos que comenzar desde cero cada vez que diseñemos Una nueva galería. Cree una nueva sección con una fila con una columna y luego agregue el módulo de la galería en una fila.
Div completará el módulo de la galería con algunas imágenes en su galería de medios en una pantalla de cuadrícula, como la siguiente:

En la configuración del módulo de la galería, haga clic en el icono Gray Plus para agregar 12 imágenes a la galería. Utilizo imágenes del aspecto de la página de la galería de restaurantes.

Luego actualice la configuración del módulo Div Gallery de la siguiente manera: Número Imagen: 12 Mostrar título y leyenda: No muestre paginación: No

Esto funcionará como una buena plantilla para seguir adelante. Para guardar el módulo de la galería en la biblioteca de la Divic, haga clic en el icono Guardar en la biblioteca en el menú del módulo gris cuando pasa el mouse sobre el módulo. Luego llame a la plantilla “Módulo de la galería” y guárdela en la biblioteca. Cuando desee agregar el módulo de la galería a su página, todo lo que tiene que hacer es hacer clic para agregar un nuevo módulo como de costumbre. Luego seleccione la pestaña Agregar en la biblioteca en la ventana emergente y haga clic en el módulo de la galería llamado “Módulo de la galería de plantilla”.

Eso es todo. ¡Ahora pasemos a esos bordes! # 1 Galería de imágenes Polaroid

El siguiente diseño es un borde popular para imágenes que parecen una imagen Polaroid. Este es un aspecto útil, especialmente si desea mostrar los títulos de las imágenes. Aquí le mostramos cómo hacerlo. Sección de configuración Cree una nueva sección habitual con una fila con una columna. Luego agregue la plantilla del módulo de la Galería Div guardada en la biblioteca (explicada anteriormente). Antes de editar el módulo de la galería, abra la configuración de la sección y agregue un fondo gris para que nuestros bordes blancos parezcan un poco.

Antecedentes: #dddddd

Configuración de fila La siguiente actualización de la fila Configuración con lo siguiente: El ancho del canal: 1
Esto escapará del espacio de margen predeterminado entre las imágenes. Agregaremos nuestra propia distancia personalizada más adelante. Configuración del modo de galería Abra la configuración del módulo de la galería y actualice lo siguiente: Mostrar título y leyenda: Sí

El peso de la fuente del título: Fuente del título de Bold: TT Alineación del texto del título: Centro La altura de la línea del título: 2em

Ancho del borde superior de la imagen: 10 px color del borde superior: #ffffff Imagen del borde izquierdo: 10 px color color borde izquierdo: #fffffffo ancho de la imagen borde derecho: 10 px imagen del color derecho: #ffffff a Cree espaciado entre nuestras imágenes, agregue el siguiente borde a los elementos de la galería: el ancho del borde: 10 PX Color Edge: #DDDDD (coincide con el color del fondo de la sección)

Para colorear la parte inferior de nuestro diseño de borde polaroid, debemos agregar un fondo blanco al módulo. Color de fondo: #ffffff

El resultado final aquí es el resultado final del diseño del borde de Polaroid.

# 2 Diseño de cuadrícula limpia

Si está buscando un estilo de red simple y limpio para sus imágenes, este diseño de flexión es una hermosa opción. Está bien equilibrado y fácil para los ojos.

Aquí le mostramos cómo hacerlo. Cree una nueva sección habitual con una fila con una columna. Luego agregue la plantilla del módulo de la Galería Div guardada en la biblioteca (explicada anteriormente). Configuración de fila Antes de editar el módulo de la galería, abra la configuración de la sección y actualice lo siguiente: Gugaab Ancho: 1 trenza personalizada: 0 px arriba, 0 px por el ancho del borde: 10 px El color del borde: #dddddd


Este borde de la fila es necesario para adaptarse al espacio exterior de nuestra galería con el espacio entre las imágenes. Modo de galería de configuración ahora abra la configuración del módulo de la galería y agregue una ventaja a los elementos de su galería y sus imágenes de la galería actualizando lo siguiente:

Ancho de borde de la imagen: 20 PX Imagen Edge Color: #ffffff
Ancho de Chenar: 10 px El 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 (esto coincide con el color de la fila)

Debido a que el borde del artículo en la galería es transparente, hereda el color del fondo. Diseño final
Cambiando los colores de borde cambiando el color de fondo si desea jugar con diferentes colores de borde, puede actualizar el color de fondo a lo que desee. Pero, tendrá que eliminar el borde de la fila, agregar el siguiente espacio al camino:

Trenza personalizada: 10 px arriba, 10 px abajo, 10 px izquierda, 10 px a la 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 servir como una especie de fondo de textura para sus imágenes de fondo del módulo. La configuración es muy similar al diseño limpio de la cuadrícula anterior. Aquí le mostramos cómo hacerlo. Cree una nueva sección habitual con una fila con una columna. Luego agregue la plantilla del módulo de la Galería Div guardada en la biblioteca (explicada anteriormente).

Configuración de fila Antes de editar el módulo de la Galería, abra la configuración de la sección y actualice lo siguiente: Ancho de Gugaab: 1 trenza personalizada: 0 px hacia arriba, 0 px abajo

Modo de galería de configuración ahora actualice la configuración del módulo de la galería de la siguiente manera: Imagen de fondo: [Agregar imagen] (aún no podrá verlo) Imagen: 10 PX Color Edge Imagen: #FFFFFFFFLULULUI (para el módulo): 10 PX Edge Color: #ffffff y luego agregue los siguientes CSS personalizados al artículo en la Galería: Pading: 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 artículo en la galería Este diseño le permite usar una imagen de fondo para servir como borde para cada elemento de la galería individual. Puede crear cualquier imagen personalizada deseada o puede usar una de las imágenes de fondo incluidas en nuestros aspectos prefabricados. Utilizo una de la página de destino IEETUP. Aquí le mostramos cómo hacerlo. Cree una nueva sección habitual con una fila con una columna. Luego agregue la plantilla del módulo de la Galería Div guardada en la biblioteca (explicada anteriormente). Configuración de fila Antes de editar el módulo de la galería, abra la configuración de la sección y actualice lo siguiente: Haga esta fila ancho completo: Sí, el ancho de la canaleta: 2

Modo de galería de configuración ahora actualice la configuración del módulo de la galería de la siguiente manera: Ancho de borde de la imagen: 10 PX Color Edge: #FFFFFF

Luego agregue los siguientes CSS personalizados al artículo en la galería: Pading: 30px;
IMAGEN DE ACTUALO: URL (& quot; & quot;);

Tamaño de fondo: contener;


Background-Read: No-Reed;

Presión de fondo: correcto;

Luego deberá cargar la imagen de fondo personalizada que desea colocar detrás de cada artículo en la galería. Para este ejemplo, uso una imagen de uno de nuestros paquetes de diseño premiados. Una vez que la imagen se carga en la Galería de Medios de WordPress, copie la URL de la imagen al portapapeles. Ahora regrese y abra la configuración del módulo de la galería y pegue la URL en CSS CSS, donde escribe “Ingrese la URL aquí”. Asegúrese de mantener la URL en comillas.
El resultado final aquí es el resultado final.
# 5 Box Shadow and Border Combo
Las sombras de la caja son excelentes para darle a su galería un toque personalizado. Puede usar las sombras de cassette en las imágenes del módulo de la Galería Div para crear un diseño de cuadrícula roto 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. Aquí le mostramos cómo hacerlo. Cree una nueva sección habitual con una fila con una columna. Luego agregue la plantilla del módulo de la Galería Div guardada en la biblioteca (explicada anteriormente). Agregue el borde de la imagen y la sombra de la caja Abra la configuración de la galería y actualice lo siguiente: Imagen Edge Ancho: 10 PX Edge de imagen: #FFFFFF Caja de imagen Sombra: Consulte Posición horizontal de captura de pantalla de la caja: -30px Box Sombra Posición vertical: -30px Potencia de extensión Power the Shadow of the Box: -10px Shade Color: # E08474
Agregue el borde del elemento de la galería El diseño de las sombras de la caja se ve bien como es ahora.Pero también puede agregar un borde adicional para el elemento de su galería actualizando lo siguiente: El ancho del borde recto: 7 PX Color de borde recto: #DDDDDD El estilo del borde derecho: en maceta el ancho del margen inferior: 7 PX Color del borde inferior: #DDDDDD El estilo del margen inferior: punto agregó un estilo de borde puntiagudo solo para recordarle los diferentes estilos disponibles.Siéntase libre de usar otros estilos (como sólidos o vinculados).Configuración de fila para darle a su diseño más espacio, abrir la configuración de la fila y actualizar lo siguiente: Haga la fila de ancho completo: Sí, el diseño final aquí es el diseño final.

# 6: Diseño de diseño de cinta de películas

Para este último diseño, pensé en mostrarte algo más único. Este diseño utiliza un estilo de borde interrumpido solo a la derecha e izquierda de los artículos de la galería, que divide cada columna de imágenes de una manera que se asemeja a las tiras de películas. Aquí le mostramos cómo hacerlo. Cree una nueva sección habitual con una fila con una columna. Luego agregue la plantilla del módulo de la Galería Div guardada en la biblioteca (explicada anteriormente). Configuración de fila Antes de editar el módulo de la galería, abra la configuración de la fila y cambie el ancho de canalones a 1. El ancho de la canaleta: 1 Esto se eliminará del espacio de margen predeterminado entre sus imágenes. Modo de la galería, luego abra la configuración de la galería y actualiza Lo siguiente: Agregar bordes de imagen interrumpió el ancho del borde recto de la imagen: 8 px El borde derecho de la imagen: #dddddd el estilo del borde recto: apuntó el ancho del margen izquierdo: 8 px borde izquierdo del Imagen: #DDDDD El estilo de la imagen en el borde izquierdo: punto Galería de artículos para espaciar el ancho del borde izquierdo: 20 px Color del borde izquierdo: #ffffff El ancho del borde recto: 20 PX Bordamiento recto: #FFFFFF

Agregue el cuadro de imagen de la imagen de la imagen Sombra: vea la captura de pantalla El poder de la sombra de la caja: 0 px El poder de la sombra de la caja: -10px Color de la sombra: # 222222


Agregue un fondo de fondo de fondo: # 222222

Luego agregue los siguientes CSS personalizados al artículo en la galería: Pading: 5px 10px;

El resultado final ahora es verificar el resultado.