Filtros para cualquier módulo en Divi con Divi Filter

Uno de los elementos que más me piden los clientes cuando diseño portfolios o catálogos con Divi es la capacidad de filtrar el contenido por categorías — que el usuario pueda hacer clic en "Diseño web", "eCommerce" o "App design" y ver solo los proyectos de esa categoría, sin recargar la página. Esto que parece complejo resulta ser bastante accesible gracias al plugin Divi Filter de Daniel Voelk, que permite crear filtros para cualquier módulo en Divi usando simples clases CSS.

En este tutorial te explico cómo funciona el plugin, qué diferencia hay entre la versión gratuita y la premium, y te guío paso a paso para crear un sistema de filtrado funcional en tu sitio Divi. El resultado es exactamente ese efecto de galería filtrable donde los elementos que no corresponden a la categoría seleccionada desaparecen con una transición suave.

¿Qué es Divi Filter y qué versión necesitas?

Divi Filter es un plugin creado por Daniel Voelk, un desarrollador alemán especializado en extensiones para Divi. La versión gratuita, disponible en el repositorio oficial de WordPress, te permite filtrar columnas y módulos asignando categorías con clases CSS. La versión premium amplía esas capacidades añadiendo filtrado por filas completas, animaciones de filtrado adicionales, y soporte para un número ilimitado de filtros en todas las páginas del sitio.

Para la mayoría de casos de uso — portfolios, galerías, listados de servicios — la versión gratuita es suficiente. Si necesitas filtrar filas completas o quieres animaciones más elaboradas, vale la pena considerar la premium. Lo interesante es que si eres suscriptor de UXDivi, puedes acceder al plugin premium dentro de los recursos del Curso de Divi 5 completo para probarlo en tu proyecto.

Consejo: antes de empezar a configurar el plugin, revisa la documentación oficial de Divi Filter (incluida en la descripción del plugin) — específicamente la sección de preguntas frecuentes, que explica con claridad las clases CSS para cada caso: filtrar columnas, filtrar filas, y configurar el starting class.

Paso 1: Instala el plugin Divi Filter

Ve a Plugins → Añadir nuevo en tu panel de WordPress y busca "Divi Filter". Instala y activa el plugin. Si tienes la versión premium, sube el archivo ZIP desde Plugins → Subir plugin. Una vez activo, aparecerá una opción en Ajustes → Divi Filter donde puedes ingresar la licencia premium si corresponde.

Paso 2: Prepara los botones de filtro con las clases correctas

El sistema funciona asignando clases CSS específicas a tres tipos de elementos: los botones de filtro, la sección contenedora, y las columnas (o módulos) que quieres filtrar.

Empieza creando una nueva sección en tu página de Divi con los botones de filtro. Agrega un módulo de botón por cada categoría que quieras mostrar — por ejemplo: "Diseño web", "eCommerce", "App design". Para cada botón, ve a Avanzado → ID y clases CSS y agrega dos clases:

• df-button — identifica al elemento como botón de filtro del plugin.
• dfc-nombre-categoria — define qué categoría activará ese botón (ej: dfc-web-design, dfc-ecommerce, dfc-app-design). Usa nombres simples sin acentos ni espacios.

🎓 ¿Quieres dominar el uso de clases CSS en Divi?
En uxdivi.com/cursos tenemos el Curso de Divi 5 completo donde cubrimos en profundidad el sistema de clases, IDs CSS y personalización avanzada de módulos. Accede como suscriptor y construye sitios más profesionales y personalizados.

Si también quieres un botón "Todos" que muestre todos los elementos al mismo tiempo, créalo como un botón adicional y asígnale la clase df-button-reset junto con df-button. Ese botón limpiará cualquier filtro activo y mostrará todos los elementos del área.

Paso 3: Marca la sección contenedora como área de filtrado

La sección de Divi donde están los módulos o columnas que quieres filtrar — no la sección de botones, sino la que tiene el contenido — debe marcarse como el área de filtrado del plugin. Para eso, haz clic en la configuración de esa sección, ve a Avanzado → ID y clases CSS y agrega la clase: df-area.

Este es un paso que se suele olvidar y hace que el filtrado no funcione. La clase df-area le dice al plugin cuál es el contenedor sobre el que debe aplicar la lógica de mostrar y ocultar elementos.

Consejo: si en algún momento quieres que el filtro arranque mostrando solo una categoría específica (en lugar de mostrar todo), agrega también la clase dfs-nombre-categoria a la sección de área. El prefijo dfs (Divi Filter Start) define cuál es la categoría activa por defecto al cargar la página.

Paso 4: Asigna las categorías a cada columna o módulo

Ahora viene el trabajo iterativo: para cada columna (o módulo) que quieras categorizar, ve a Avanzado → ID y clases CSS y agrega la clase dfc-nombre-categoria que corresponda a esa columna. Por ejemplo, si un módulo es de la categoría "Diseño web", agrega dfc-web-design. Si quieres que aparezca en dos categorías a la vez, agrega ambas clases separadas por un espacio.

Si tienes muchas columnas, este proceso puede llevar unos minutos — es trabajo manual repetitivo, pero es lo que le da al sistema su lógica de filtrado. En un portfolio de 9 proyectos con 3 categorías, tardarás unos 10 minutos en asignar todas las clases.

Paso 5: Verifica el resultado en el navegador

Guarda los cambios y recarga la página. Al entrar deberían verse todos los elementos. Cuando haces clic en uno de los botones de categoría, los elementos que no corresponden desaparecen y quedan solo los de esa categoría. Si quieres ver un sistema así en acción, en el blog tenemos también un tutorial sobre Divi Ajax Filter para tiendas WooCommerce, que usa una lógica similar pero aplicada a productos.

Filtrar filas completas (versión premium)

Si tienes la versión premium y quieres filtrar filas enteras en lugar de columnas individuales, el proceso es casi idéntico con un paso adicional: además de marcar la sección como df-area, agrega también la clase df-rows. Luego, en lugar de agregar las clases de categoría a las columnas, las agregas a las filas. La lógica de los botones y del área de filtrado es exactamente la misma.

Esta funcionalidad es especialmente útil cuando cada fila representa un proyecto completo con múltiples columnas — en ese caso, al filtrar quieres que toda la fila aparezca o desaparezca como una unidad, no elemento por elemento. Para portfolios con un diseño más editorial o layouts de portafolio personalizado en Divi con CSS, esta opción cambia completamente las posibilidades de diseño.

Preguntas frecuentes sobre Divi Filter

¿Funciona Divi Filter con Divi 5?

El plugin está pensado principalmente para Divi 4, aunque muchos usuarios lo usan también con versiones recientes. Antes de instalarlo en un proyecto con Divi 5, verifica la compatibilidad en la página del plugin y haz pruebas en staging primero.

¿Puedo usar el filtrado en módulos distintos al portafolio?

Sí, eso es precisamente lo más potente de Divi Filter — funciona con cualquier módulo dentro de una columna. Puedes filtrar galerías, blurbs, testimonios, módulos de persona, cards personalizadas con el módulo de código. Cualquier cosa que puedas meter en una columna de Divi puede filtrarse.

¿El filtrado afecta el SEO?

No de forma negativa, porque Divi Filter oculta elementos con CSS/JS pero no los elimina del DOM. Google puede indexar todo el contenido. La única consideración es que si tienes muchos proyectos ocultos, Google puede tardar más en rastrearlos todos.

¿Puedo tener varios sistemas de filtrado en la misma página?

Con la versión premium sí. La versión gratuita está limitada a un sistema de filtrado por página.

Conclusión

Divi Filter es de las herramientas que más agradecen los clientes cuando ven el resultado: un portfolio o catálogo filtrable que funciona sin recargar la página y con una transición limpia. La lógica es simple una vez que la entiendes: botones con df-button + clase de categoría, sección con df-area, y columnas o filas con la clase de categoría correspondiente. El trabajo es manual pero el resultado siempre vale la pena.

🎓 ¿Quieres construir portfolios y sitios avanzados con Divi?
En uxdivi.com/cursos tenemos el Curso de Divi 5 completo donde aprendes a usar clases CSS, Theme Builder, módulos avanzados y plugins como Divi Filter para crear sitios profesionales y diferenciados. Accede como suscriptor y lleva tus proyectos al siguiente nivel.

Recursos y descargas del tutorial