6 nuevas galerías de imágenes construidas con filas anidadas de Divi 5 (descarga gratuita)

Si alguna vez has intentado construir una galería de imágenes manualmente, sabes qué tan rápido las cosas se ponen desordenadas. Las imágenes desiguales, las filas desalineadas y los diseños que no responden convierten una galería simple en una pesadilla de diseño.

Incluso en Divi 4, las estructuras de imágenes complejas a menudo significaban apilar múltiples filas y secciones especializadas, ajustar el espacio y horas de personalización manual. Pero con Divi 5, puedes omitir todo eso.

Gracias a su nueva función de filas anidadas, puede construir estructuras de galería de imágenes más avanzadas. En esta publicación, le mostraremos cómo y le proporcionaremos 6 diseños de diseño de la galería para darle una ventaja.

Divi 5 está listo para usarse en nuevos sitios web, pero espere un poco antes de migrar los existentes.

Uso de filas anidadas para construir diseños complejos

Divi 4 ya tenía todo lo que necesitaba para construir galerías de imágenes, pero crear diseños complejos a menudo se sentía torpe. Divi 5 presenta filas anidadas que le brindan una forma más rápida y limpia de construir diseños de galería avanzados visualmente, sin requeridos.

Suscríbete a nuestro canal de YouTube

¿Qué son las filas anidadas?

Las filas anidadas son una nueva y poderosa característica de diseño en Divi 5 que le permite colocar una fila dentro de otra, lo que le brinda más control sobre cómo estructura su página. Esto permite diseñar secciones complejas directamente dentro del Visual Builder sin necesidad de escribir código o confiar en soluciones.

Anidar una fila es como agregar otro módulo. Solo necesita flotar sobre el elemento donde desea colocar su fila y hacer clic en el botón Plus para elegir una nueva fila. Luego puede elegir entre todos estos diseños de fila, que son perfectos para varias estructuras de la galería.

Esta fila anidada se comporta exactamente como una fila regular. Puede elegir una estructura de columna, agregar módulos y anidar otra fila si es necesario, gracias a su infinita nestabilidad. También puede cambiar el tamaño de las columnas arrastrando, por lo que ajustar los anchos se siente intuitivo y no involucra matemáticas o hacks de espaciado.

Las filas anidadas también responden totalmente por defecto. Desde el constructor, puede ajustar su diseño en varias pantallas. Dado que es parte del marco Divi 5, funciona perfectamente con otras características, como preajustes de grupos de opciones y variables de diseño. También compartiremos consejos para combinar filas anidadas con las características avanzadas de Divi 5 para optimizar el flujo de trabajo de diseño de su galería.

Aprenda todo sobre las filas anidadas de Divi 5

¿Qué hace que las filas anidadas sean diferentes?

En Divi 4, construyendo diseños de galería de imágenes personalizados involucrados creativamente utilizando filas, secciones especializadas y diseños para lograr diseños más avanzados. Esto significaba que sería un desafío si no tuvieras conocimientos de diseño. E incluso si tuviera la experiencia, estaba limitado a algunas estructuras de diseño.

Las filas anidadas ofrecen un enfoque más intuitivo. Ya no tiene que confiar en filas separadas o secciones especializadas. Puede anidar fácilmente las filas y mezclarlas y combinarlas con módulos para crear patrones de diseño ilimitados. ¿Quieres crear un escaparate de productos? Cree una fila de dos columnas, agregue su imagen destacada a la izquierda y descripción a la derecha, anida una fila de tres columnas debajo de la imagen izquierda y agregue imágenes de soporte. ¡Tu imaginación es el límite!

6 diseños de galería de imágenes que puede construir con filas anidadas

Para darle una idea de lo que es posible, hemos creado seis diseños de diseño de la galería de imágenes con instrucciones sobre cómo se usaron las filas anidadas para diseñarlas. Pasemos sobre ellos.

Diseño 1: Galería CTA en línea

El diseño de la cuadrícula en capas utiliza una red moderna de estilo de revista que resalta un proyecto con una combinación de grandes imágenes, tomas de soporte y texto cuidadosamente colocado. La primera sección es una fila anidada de 2 columnas (anidada en otra fila de 2 columnas) con dos imágenes, y el siguiente es otra imagen grande. Un banner de texto horizontal rompe la cuadrícula, agregando contexto y un llamado a la acción. La sección inferior trae otro diseño de tres columnas para continuar la historia, pero con espacio para una descripción de texto más larga.

Este diseño es perfecto para carteras, exhibiciones inmobiliarias o diseños editoriales que requieren ritmo visual y jerarquía de contenido clara. Funciona maravillosamente en los tamaños de pantalla mientras aún se siente estructurado e intencional.

Cómo construirlo

Comience con una fila de dos columnas. Agregue una imagen a la derecha y anide otra fila en la columna izquierda. Agregue imágenes a todos. Luego, otra fila anidada se coloca bajo un banner para sostener un párrafo de texto junto con otro conjunto de imágenes. Repita la estructura completa o realice algunos cambios, como colocar la fila de texto sobre imágenes anidadas.

Este diseño es único en la forma en que se usan filas anidadas dentro de cada sección visual. Las filas anidadas de Divi 5 permiten flexibilidad estructural, mezclando formatos de fila dentro de una sola columna y colocándolas en elementos contextuales.

Diseño 2: Galería de enfoque dividido

Un diseño de dos columnas donde la columna izquierda apila una imagen vertical sobre un bloque de texto corto, y la columna derecha presenta una imagen grande seguida de una fila de tres imágenes de soporte más pequeñas. Esta disposición resalta un momento visual principal al tiempo que permite espacio para el contexto escrito y una tira de imagen secundaria dentro del mismo diseño.

El diseño de la galería Split Focus es perfecto para las galerías de bodas, eventos o florales donde cada bloqueo visual captura un solo momento o emoción. También funciona bien cuando desea combinar una imagen focal en negrita con miniaturas de soporte y un pequeño mensaje de cita, testimonio o introducción.

Cómo construirlo

Crea una fila de 2 columnas. En la columna izquierda, apile una imagen vertical en la parte superior y un módulo de texto debajo de ella con dos filas separadas. En la columna derecha, inserte un solo módulo de imagen en la parte superior para la foto destacada, luego agregue una fila anidada con tres columnas directamente debajo para contener imágenes de soporte más pequeñas.

La llave es ajustar el relleno y establecer el ancho de canaletas en 1 en la fila anidada para mantener todo apretado y limpio. Más tarde, cuando haya agregado las imágenes, cree un preajuste de borde (establezca el ancho del borde en 2 y el color de borde blanco ) y aplíquela a todos los elementos.

Diseño 3: Galería de Spotlight del proyecto

Este diseño transforma su galería de imágenes en una exhibición de proyectos u ofertas individuales. En lugar de solo mostrar imágenes, cada elemento obtiene su propia etiqueta y llamada a la acción, lo que lo hace ideal para carteras, recetas, reflejos de productos o estudios de casos.

Una corta fila de dos columnas sigue cada imagen. El lado izquierdo contiene una descripción rápida o el nombre del proyecto, y el lado derecho presenta un botón que invita al usuario a tomar medidas, como el pedido ahora . El diseño del proyecto Spotlight Gallery aporta más propósito e interacción a su galería.

Cómo construirlo

Bajo cada imagen, hemos agregado una fila anidada de dos columnas. Usamos la columna izquierda para una descripción breve y la columna derecha para un botón de llamada a la acción. Luego diseñamos el botón usando estilos globales y repitimos esta estructura para cada elemento de la galería para mantener la consistencia. Para hacer que la fila superponga la imagen, hemos establecido la posición en absoluto con el índice de compensación vertical 40px y z 1000.

También hemos agregado un preajuste de sombras a todas las imágenes, que no solo le dieron a la galería un aspecto pulido, sino que también me ahorró tiempo al permitirme aplicar la marca consistente en múltiples módulos en solo unos pocos clics.

Diseño 4: Galería de revelación de desplazamiento

El diseño de la galería de revelación de desplazamiento está diseñado para la narración visual que se desarrolla a medida que los usuarios se desplazan. Cada sección presenta una imagen grande combinada con imágenes de soporte más pequeñas (creadas por anidando múltiples filas).

Es perfecto para galerías editoriales, exhibiciones de recetas (resaltar pasos o ingredientes) o páginas de equipo de la compañía que desean capturar los momentos grupales de manera interactiva. En lugar de espectadores abrumadores, los guía a través de cada historia visualmente, un bloque a la vez.

Cómo construirlo

La estructura es simple: crea una fila de dos columnas. Agregue un módulo de imagen, encabezado, texto y un botón a la izquierda. A la derecha, anida una nueva fila con dos columnas e inserte módulos de imagen en cada uno para admitir imágenes. Luego, alternativamente, puede apilar filas de una sola y dos columnas para crear una cuadrícula similar a la mampostería.

El jugador clave de este diseño es la sección izquierda, que se pega. Para que su sección destacada se adhiera, debe crear un grupo de módulos y habilitar la configuración de efectos de desplazamiento . Haga clic en su grupo de módulos y vaya a Configuración> Avanzado> Efectos de desplazamiento.

Haga que su grupo de módulos se adhiera a la parte superior y configure el límite inferior adhesivo en el área del cuerpo. A medida que los usuarios se desplazan hacia abajo, la imagen destacada se mantendrá, mientras que las otras imágenes siguen avanzando.

Diseño 5: Galería de productos escalonados

No todas las galería necesitan una imagen focal o una estructura compleja. A veces, todo lo que necesitas es un conjunto de imágenes dispuestas en una estructura escalonada, y ahí es donde brillan en silencio las filas.

Este diseño es ideal para el comercio electrónico o sitios centrados en productos donde desea resaltar una colección sin hacer que se sienta como una cuadrícula típica. Utiliza mucho espacio en blanco y filas anidadas para romper la monotonía visual mezclando una, dos y tres filas de imagen de tres columnas dentro de una sola sección. El resultado es un diseño bien equilibrado que se siente hecha a mano y editorial, perfecta para exhibir detalles del producto, primeros planos de material o artículos complementarios.

Funciona especialmente bien para marcas con productos táctiles o de lujo como artículos de cuero, cerámica o artículos hechos a mano donde es importante la narración visual.

Cómo construirlo

Crea una fila de dos columnas. Agregue un diseño apilado de imágenes con filas anidadas en la columna izquierda. Una fila tiene dos pequeñas fotos una al lado de la otra, y la otra tiene una imagen vertical. En la columna derecha, anida una nueva fila con tres columnas e inserte imágenes del producto. Debajo de eso, coloque su texto y botón.

Para crear el efecto de bolso superpuesto (como en la sección hecho a mano) , agregue un módulo de imagen en su fila y use el posicionamiento absoluto (avanzado> posición> absoluto ). Luego use los controles deslizantes de desplazamiento y el índice Z para colocarlo entre las dos secciones. Esto le permite crear diseños de estilo de revista donde las imágenes rompen la cuadrícula para un interés visual adicional.

Diseño 6: cuadrícula de cartera asimétrica

El diseño de la cuadrícula de cartera asimétrica combina la narración y las imágenes en un formato limpio de dos columnas. Use la columna izquierda para introducir un proyecto con un encabezado, una descripción corta y CTA. En la columna derecha, una fila anidada de tres columnas se presenta por encima de una gran imagen destacada, lo que brinda una oportunidad perfecta para mostrar imágenes clave con tomas de soporte.

Este diseño es ideal para diseñadores, fotógrafos o agencias que presentan estudios de casos o carteras curadas. Mantiene la atención enfocada mientras ofrece un ritmo de desplazamiento natural y un flujo amigable para los dispositivos móviles.

Cómo construirlo

Comience con una fila de dos columnas. En la columna izquierda, agregue un módulo de texto para su título y descripción, seguido de un módulo de botón (si lo desea).

Agregue una fila anidada en la columna derecha. Elija el diseño de tres columnas y apile otro módulo de imagen. Inserte tres imágenes de soporte en la fila anidada y una imagen grande en el módulo de imagen apilada. Use otras estructuras de fila para crear más patrones.

Para mantener todo alineado, coloque el ancho de canalones en 1 y recorte sus imágenes en alturas consistentes antes de cargar. Use un preajuste de imagen global (como un borde suave o una sombra de caída) y los efectos del paseos para mantener las cosas interactivas pero refinadas.

También notaría otra fila anidada que superpone la imagen. Hemos establecido la posición en absoluto para crear el efecto de superposición .

Consejos principales para construir galerías de imágenes interactivas

Una vez que su diseño esté en su lugar, espolvoree algunos detalles adicionales para que sus galerías sean más pulidas. Aquí está como:

1. Crear efectos de desplazamiento

Agregar efectos de desplazamiento es una de las formas más fáciles de hacer que sus galerías de imagen se sientan más dinámicas. Agrega interactividad sin distraer del contenido y ayuda a las imágenes a sentirse vivas cuando los usuarios se relacionan con ellas.

En Divi 5, agregar efectos de desplazamiento a sus imágenes es fácil. Mientras edita, puede cambiar fácilmente a Hover (y modos de respuesta) y personalizar su configuración.

No tiene que cambiar a desplazamiento para cada imagen o opción de configuración diferente; Simplemente cambie una vez, haga cambios en todos los elementos que desea personalizar y guarde. Cambiamos el color del borde, pero también puede probar filtros, transformar, agregar sombras y más fácilmente.

Puede aplicar esto a imágenes individuales o guardarlo como un preajuste si desea que todas sus imágenes se comporten de la misma manera. Es un pequeño detalle, pero hace que su galería se sienta atenta e interactiva, y Divi lo hace fácil.

2. Use atributos de copia/pegar para aplicar estilos a las imágenes rápidamente

Personalizar manualmente cada imagen en una galería puede llevar mucho tiempo, especialmente cuando se aplica estilos consistentes como bordes, sombras o efectos de desplazamiento. Si bien los preajustes son excelentes para los estilos globales, es posible que no desee crear un nuevo preajuste para cada ajuste menor.

El sistema de gestión de atributos de Divi 5 ofrece una solución simplificada. Con solo unos pocos clics, puede copiar estilos de una imagen y aplicarlos a otros. No tiene que repetir manualmente el mismo proceso de personalización para cada imagen. Puede copiar y pegar y mantener la consistencia.

Por ejemplo, personalice un elemento y copie y pegue sus atributos a los otros elementos para replicar el estilo.

Divi 5 también permite un control más granular. Por ejemplo, puede copiar y pegar grupos de atributos específicos, como solo la configuración de diseño o solo los efectos de desplazamiento. Esto hace que su flujo de trabajo sea eficiente y cohesivo.

3. Use la abrazadera para crear imágenes fluidas y receptivas

En un diseño moderno de la galería, sus imágenes no solo deberían escalar, sino que también responder de manera inteligente a diferentes tamaños de pantalla. Eso es exactamente lo que la función Clamp () te ayuda a lograr.

Divi 5 es compatible con Clamp () y muchas otras unidades avanzadas que le permiten ingresar manualmente los valores de tamaño en cualquier lugar, incluidos el ancho de la imagen, el relleno y los campos de margen. Clamp () es ideal para la capacidad de respuesta. Le permite establecer un valor mínimo, ideal y máximo, todo en una línea.

Por ejemplo, una abrazadera (1200px, 30VW, 1400px) le dice a Divi que nunca vaya por debajo de 1200px, escala hasta el 30% del ancho de la visión, pero la limita a 1400px.

Esto es especialmente útil para tiras de imágenes o diseños escalonados donde desea una cuadrícula más fluida sin puntos de interrupción. Cuando se combina con filas anidadas, Clamp () ayuda a cada bloque a adaptarse naturalmente sin necesidad de ajustes móviles separados.

4. Vista previa y ajustado para diferentes dispositivos

Una vez que su diseño se ve bien en el escritorio, es fácil ajustarlo para tabletas y dispositivos móviles utilizando las herramientas de edición receptivas incorporadas de Divi. Alterne entre vistas del dispositivo y ajuste la configuración como el tamaño de la imagen, el espacio y la alineación de texto para cada pantalla.

Por ejemplo, es posible que desee reducir el relleno entre filas en columnas móviles o de pila de manera diferente para una mejor experiencia de desplazamiento. Tomar unos minutos para ajustar estas configuraciones puede hacer que su galería se sienta limpia y profesional en cada pantalla.

Descargue los diseños de la galería gratis

¿Quieres comenzar a usar los diseños de la galería dentro de Divi 5? Suscríbase a continuación para obtener acceso a los archivos JSON. Puede subirlos a su biblioteca Divi e importarlos a sus páginas después.

Descargar los archivos

Descargar gratis

Únase al boletín Divi y le enviaremos una copia del último paquete de diseño de la página de destino de Divi, además de toneladas de otros recursos, consejos y trucos de Divi increíbles y increíbles. Sigue y serás un Divi Master en poco tiempo. Si ya está suscrito, simplemente escriba su dirección de correo electrónico a continuación y haga clic en Descargar para acceder al paquete de diseño.

DESCARGAR

Te has suscrito con éxito. ¡Consulte su dirección de correo electrónico para confirmar su suscripción y obtener acceso a paquetes de diseño semanales de Divi gratuitos!

Construir galerías de imágenes anidadas (y más) con Divi 5

Las filas anidadas de Divi 5 simplifican diseños complejos al permitirle colocar filas dentro de las filas. También ofrecen una nestabilidad infinita y un control preciso sobre sus diseños.

Las filas anidadas son solo una de las características exclusivas de Divi 5. Esté atento al nuevo sistema de diseño basado en FlexBox de Divi, que también presenta una amplia gama de nuevas plantillas de fila y controles FlexBox para brindarle todas las herramientas y simplicidad para crear cualquier diseño que pueda imaginar.

A medida que continuamos mejorando Divi 5, puede esperar aún más características que mejoren sus capacidades de diseño y simplifiquen su flujo de trabajo.

Si ha estado construyendo galerías de la manera difícil, ahora es el momento perfecto para probar Divi 5 y experimentar cómo las filas anidadas y las herramientas de diseño visual pueden simplificar todo.

Divi 5 está listo para usarse en nuevos sitios web, pero espere un poco antes de migrar los existentes.