Galería filtrable en Divi con Divi Pixel (tutorial)

Mostrar muchas imágenes en una página siempre plantea el mismo dilema: o las pones todas y la página se hace eterna, o seleccionas pocas y dejas trabajo fuera. La galería filtrable resuelve ese problema de raíz — el visitante elige qué categoría quiere ver y la galería se reorganiza al instante con una animación fluida. En este tutorial te muestro cómo crear una con el módulo Filterable Gallery de Divi Pixel, uno de los add-ons más completos del ecosistema Divi.

Es la solución que uso cuando un proyecto necesita portafolio, galería de fotografía o catálogo visual organizado por categorías: combina diseño atractivo, filtrado interactivo y un nivel de personalización que el módulo de galería nativo de Divi no alcanza.

¿Qué es el módulo Filterable Gallery de Divi Pixel?

Divi Pixel es un plugin add-on que agrega más de 50 módulos y cientos de opciones extra al constructor de Divi. Su módulo de Galería Filtrable (Filterable Gallery) te permite crear galerías de imágenes con una barra de filtros por categoría en la parte superior: el visitante hace clic en una categoría y la cuadrícula se reorganiza mostrando solo las imágenes de ese grupo, con transiciones animadas.

La diferencia clave con el módulo de galería estándar de Divi está en tres frentes: el filtrado interactivo (que el módulo nativo simplemente no tiene), las opciones avanzadas de cuadrícula y los efectos hover personalizables. Si tu proyecto es un portafolio profesional, también te puede interesar nuestro tutorial de portafolios filtrables con Divi Pixel y Filterable Grid, el módulo hermano orientado a proyectos en lugar de imágenes sueltas.

Características clave del módulo

1. Lightbox integrado: los visitantes pueden ampliar cualquier imagen y verla en un lightbox a pantalla completa, navegando entre imágenes sin salir de la galería.
2. Configuración avanzada de cuadrícula: controlas el número de columnas, el espaciado entre imágenes y la alineación, con valores independientes para desktop, tablet y móvil.
3. Superposición de imagen (overlay): agrega una capa de color o degradado al pasar el mouse, con título y descripción de la imagen si lo necesitas.
4. Animaciones personalizadas: efectos de entrada y transición al filtrar, con control de velocidad y comportamiento.
5. Enlaces por imagen: cada imagen puede llevar a una URL personalizada — ideal para conectar la galería con páginas de proyecto o fichas de producto.
6. Campos de CSS personalizado: si quieres ir más allá de las opciones visuales, tienes acceso directo a los selectores del módulo para aplicar tus propios estilos.

Cómo crear tu galería filtrable paso a paso

Con Divi Pixel instalado y activo, el flujo es directo:

1. Agrega el módulo: en el constructor visual, busca "Filterable Gallery" en la lista de módulos (los de Divi Pixel aparecen identificados con su ícono propio).
2. Sube tus imágenes: en la pestaña de contenido, agrega las imágenes de la galería desde la biblioteca de medios.
3. Define las categorías de filtro: asigna a cada imagen una o varias categorías — estas se convierten automáticamente en los botones de filtro de la parte superior.
4. Configura la cuadrícula: elige columnas (3 o 4 funcionan bien para la mayoría de casos), espaciado y comportamiento responsive.
5. Activa el lightbox y los efectos: en la pestaña de diseño, habilita el lightbox, define el overlay y elige la animación de filtrado.

Consejo: usa nombres de categoría cortos y claros (una o dos palabras). Los filtros se muestran como botones horizontales y los nombres largos rompen la línea en móvil. "Branding", "Web", "Foto" funcionan mejor que "Proyectos de identidad corporativa".

Personalización del diseño: que la galería se sienta tuya

Todo el estilo se controla desde las opciones de diseño del módulo: tipografía y colores de los botones de filtro (estado normal y activo), bordes y sombras de las imágenes, color del overlay y velocidad de las transiciones. Mi recomendación es mantener el overlay sutil — un degradado oscuro al 40-60% de opacidad con el título en blanco suele verse profesional sin pelear contra la imagen.

Si te gustan los efectos al pasar el mouse, combina esta galería con las técnicas de nuestro tutorial de galería con efecto hover con Divi Pixel, donde profundizamos en los estilos de superposición disponibles. Y para secciones de contenido más narrativas, el slider de contenidos personalizados de Divi Pixel es otro módulo del mismo plugin que vale la pena conocer.

Galería filtrable vs. galería nativa de Divi

La lectura honesta: si solo necesitas mostrar 6 fotos sin filtros, el módulo nativo cumple. En cuanto el proyecto pide organización por categorías o una experiencia más cuidada, el módulo de Divi Pixel justifica la inversión — y recuerda que el plugin trae 50+ módulos más, no solo este.

🎓 ¿Quieres dominar Divi Pixel completo?
En nuestro curso de Divi Pixel exploramos sus módulos más potentes uno a uno — galerías, sliders, menús, efectos — con casos reales de uso en proyectos de clientes. Accede como suscriptor y sácale el máximo al plugin.

Errores comunes al montar una galería filtrable

Imágenes sin optimizar

Una galería de 30 imágenes a 4 MB cada una destruye el tiempo de carga de la página. Optimiza antes de subir: 1200-1600px de ancho máximo para imágenes de galería y compresión WebP. La galería más bonita del mundo no sirve si tarda 12 segundos en cargar.

Demasiadas categorías de filtro

Más de 5-6 filtros confunden en lugar de organizar. Si tienes 10 categorías con 2 imágenes cada una, agrúpalas en 4 categorías más amplias. El filtrado es para ayudar al visitante a explorar, no para reflejar tu taxonomía interna.

Proporciones de imagen mezcladas sin criterio

El módulo soporta imágenes de distintas proporciones, pero una cuadrícula con verticales, horizontales y cuadradas mezcladas al azar se ve desordenada. Decide una proporción dominante (o usa el modo masonry si el diseño lo pide) y recorta las imágenes con ese criterio antes de subirlas.

Preguntas frecuentes

¿El módulo Filterable Gallery funciona con Divi 5?

Divi Pixel mantiene compatibilidad activa con las versiones recientes de Divi. Como con cualquier add-on en Divi 5, mi recomendación es probar primero en un entorno de staging antes de actualizar el sitio en producción — la arquitectura nueva de Divi 5 cambió la forma en que los módulos de terceros se integran al constructor.

¿Puedo usar la galería filtrable sin saber CSS?

Sí. Todas las opciones de filtros, cuadrícula, overlay y animaciones se configuran visualmente desde el módulo. El campo de CSS personalizado existe para quien quiera afinar detalles, pero no es necesario para un resultado profesional.

¿Cuántas imágenes soporta una galería filtrable?

Técnicamente no hay límite, pero por rendimiento y experiencia te recomiendo mantenerla entre 12 y 40 imágenes optimizadas. Si necesitas más, divide en varias páginas o usa lazy loading para que las imágenes carguen a medida que el usuario hace scroll.

¿El filtrado afecta el SEO de la página?

No negativamente. Todas las imágenes están en el HTML desde el inicio (el filtro solo las muestra u oculta con JavaScript), así que Google las indexa normalmente. Aprovecha y llena el texto alternativo de cada imagen — eso sí suma para SEO de imágenes.

Mis recomendaciones finales

1. Optimiza todas las imágenes antes de subirlas — formato WebP y máximo 1600px de ancho.
2. Mantén los filtros entre 3 y 6 categorías con nombres de una o dos palabras.
3. Activa el lightbox siempre — los visitantes esperan poder ampliar las imágenes de una galería.
4. Revisa la galería en móvil: ajusta a 2 columnas en pantallas pequeñas para que las imágenes no queden diminutas.
5. Si la galería es un portafolio, enlaza cada imagen a su página de proyecto — convierte la galería en una herramienta de navegación, no solo de exhibición.

Conclusión

El módulo de Galería Filtrable de Divi Pixel lleva la presentación de imágenes en Divi a otro nivel: filtrado interactivo, lightbox, overlays y control total del diseño, todo sin tocar código. Para portafolios, estudios de fotografía y catálogos visuales es de los módulos con mejor relación esfuerzo-resultado del plugin. Configúralo con imágenes optimizadas y categorías bien pensadas, y tendrás una sección de galería que invita a explorar.

Descarga los recursos mencionados en este tutorial acá abajo 👇 siendo premium ⭐