Crea portafolios filtrables con Divi Pixel y Filtrable Grid

Crear portafolios filtrables puede ser una tarea complicada si no cuentas con las herramientas adecuadas. Por suerte, Divi Pixel ofrece una solución fácil y efectiva con su módulo de Filtrable Grid para filtrar cualquier tipo de contenido dentro de Divi.

Con este módulo, podrás organizar tu contenido de manera eficiente y presentarlo de forma atractiva a tus visitantes. En este artículo, te explicaremos cómo usar el módulo de Filtrable Grid de Divi Pixel para crear portafolios filtrables en tu sitio web con facilidad y rapidez. Además, te daremos algunos consejos útiles para que puedas sacarle el máximo provecho a esta herramienta. ¡No te lo pierdas!

Lo que más me gusta de los portfolios filtrables es que transforman al visitante de espectador pasivo a usuario activo. Cuando alguien llega a una galería estática, su única opción es hacer scroll hacia abajo. Cuando llega a un portfolio filtrable, puede elegir qué tipo de trabajo quiere ver primero: elige "Diseño web", hace clic en el botón de filtro y en menos de un segundo la cuadrícula se reorganiza para mostrar solo esos proyectos. Ese nivel de control aumenta el tiempo de permanencia en la página porque el usuario siente que la experiencia responde a sus intereses, no que está viendo un catálogo genérico que alguien más diseñó para un público amplio.

Y los casos donde esta diferencia realmente importa son muy concretos. Una agencia creativa con clientes en distintas industrias (web, branding, redes sociales, identidad corporativa) necesita que cada tipo de prospecto encuentre rápidamente el trabajo relevante para su proyecto, sin tener que revisar toda la galería. Un estudio de fotografía con categorías como retrato, producto, arquitectura y eventos enfrenta el mismo problema: mostrar todo junto genera ruido; filtrar por categoría hace que cada visitante sienta que el portfolio fue hecho para él. Lo mismo aplica para desarrolladores que muestran proyectos por tecnología (WordPress, Shopify, React) o para ilustradores que trabajan en distintos estilos. El filtrado no es un feature decorativo: es una herramienta de segmentación visual.

¿Tienes un sitio web con Divi y estás buscando formas de mejorar la presentación de tu contenido en tu sitio web? ¡No busques más! Te presento el módulo de Filtrable Grid de Divi Pixel, uno de los módulos más útiles que este plugin ofrece.

Dale un vistazo a nuestro curso de Pixel con todos sus extensos módulos para darle funcionalidad y diseño a tu sitio web con Divi.

Este módulo te permite crear un sistema de filtrado y ordenamiento de contenido en tu sitio web de manera súper fácil y personalizada. Puedes ordenar el contenido por categoría, etiqueta o cualquier otro tipo de taxonomía personalizada que hayas definido previamente en tu sitio. Además, puedes elegir entre una gran variedad de diseños y animaciones para que tu contenido luzca espectacular.

¿Tienes un sitio web con mucho contenido? No te preocupes, el módulo de Filtrable Grid es especialmente útil para ti. Si tienes una cartera, un catálogo de productos o una galería de fotos, este módulo te permitirá presentar tu contenido de manera fácilmente navegable y accesible para tus usuarios.

¿Quieres una alternativa para crear un sistema de filtrado de cualquier cosa con Divi? Checa nuestro otro tutorial donde te enseñamos a crear un sistema filtrable con Divi.

Cómo configurar el módulo Filtrable Grid paso a paso

Una vez que tienes Divi Pixel instalado, el módulo aparece en la librería de módulos del editor visual de Divi bajo el nombre "Filterable Grid". Lo arrastras a la sección donde quieres colocarlo, exactamente igual que cualquier módulo nativo. A partir de ahí, la configuración se divide en dos áreas principales: la pestaña Content, donde defines los items de la cuadrícula, y la pestaña Design, donde ajustas la apariencia y los efectos.

En Content, cada "Grid Item" es una tarjeta individual dentro del portfolio. Por cada item puedes configurar: la imagen de fondo o miniatura del proyecto, el título, la descripción breve, un botón con su enlace correspondiente, y —esto es lo más importante— las categorías de filtro a las que pertenece ese item. Las categorías no se conectan automáticamente a las taxonomías de WordPress; las defines directamente dentro del módulo como etiquetas libres. Esto tiene una ventaja enorme: no necesitas crear categorías en el admin de WordPress ni configurar CPTs. Todo vive dentro del módulo de Divi, lo que hace que la configuración sea completamente portable y fácil de duplicar en otros proyectos.

La clave del sistema de filtrado está en que cada item puede pertenecer a múltiples categorías al mismo tiempo. Si tienes un proyecto de branding digital que también incluyó diseño web, lo asignas a ambas categorías y el usuario puede encontrarlo filtrando desde cualquiera de las dos. Esto imita la lógica de los tags de WordPress pero dentro del builder visual, y es mucho más flexible que los sistemas de filtrado que solo permiten una categoría por item. En Design controlas el número de columnas, el espaciado entre tarjetas, los efectos de transición al filtrar (fade, scale, o una combinación de ambos), el estilo de los botones de filtro y la tipografía general de las tarjetas.

Consejo: Para portfolios pequeños de hasta 20 items, la configuración manual de cada Grid Item dentro del módulo es más rápida y te da control total sobre cada tarjeta. Para portfolios más grandes que se actualizan con frecuencia, vale la pena evaluar la opción de query dinámica conectada a un Custom Post Type de WordPress: agregas el proyecto como un post, le asignas una categoría de WP y el módulo lo toma automáticamente. El Filtrable Grid de Divi Pixel soporta ambos modos, así que puedes empezar con configuración manual y migrar a dinámico cuando el volumen lo justifique.

Alternativas dentro de Divi para filtrar contenido

Antes de decidirte por el Filtrable Grid de Divi Pixel, vale la pena entender dónde se ubica este módulo dentro del ecosistema de opciones disponibles. Hay básicamente cuatro caminos cuando quieres filtrar contenido en un sitio Divi, y cada uno tiene un perfil de uso diferente.

El primero es el módulo de Blog nativo de Divi con filtros por categoría. Es la opción más básica: funciona de forma nativa, no requiere plugins adicionales y es suficiente cuando solo necesitas que el usuario filtre posts de blog por categoría. Su limitación es que no está pensado para portfolios personalizados: no puedes controlar el diseño de las tarjetas con la misma libertad, ni agregar campos personalizados por item, ni elegir el efecto de animación al filtrar.

El segundo camino son plugins especializados como WP Grid Builder, que es probablemente la solución más potente del mercado para filtrado de contenido en WordPress. Puede conectarse a cualquier CPT, soporta facetas complejas (filtros de precio, metafields, taxonomías combinadas) y tiene integraciones nativas con WooCommerce. El contra es el precio (es una inversión considerable) y la curva de aprendizaje, que es más pronunciada que la de un módulo de Divi. Para sitios de e-commerce con catálogos complejos, WP Grid Builder puede valer cada centavo; para un portfolio de servicios o proyectos de agencia, es excesivo.

El tercer camino es la solución 100% custom: ACF para los campos personalizados, un CPT para el tipo de contenido y JavaScript (generalmente con Isotope o Masonry) para el filtrado visual. Esto te da el máximo control posible sobre cada aspecto del sistema, pero requiere desarrollo real: no es algo que puedas configurar desde el builder visual de Divi, y cada cambio de diseño implica tocar código. Es la elección correcta cuando tienes requisitos muy específicos que ningún plugin estándar puede satisfacer.

El cuarto camino, y el que cubre la mayoría de los casos reales con la mejor relación esfuerzo/resultado, es el Filtrable Grid de Divi Pixel. Es lo suficientemente potente para portfolios y catálogos de mediano tamaño, se configura completamente desde el builder visual sin tocar código, y al ser parte de Divi Pixel se integra perfectamente con el resto del ecosistema del plugin. Para la mayoría de agencias, freelancers y sitios de servicios profesionales, este módulo es la respuesta correcta.

Consejo: Desde el punto de vista SEO, los filtros de JavaScript no generan URLs independientes: todo el contenido filtrado vive en una sola URL, y Google lo indexa como una sola página. Para la mayoría de los portfolios esto es completamente suficiente. Sin embargo, si necesitas posicionar categorías individuales de tu portfolio en Google (por ejemplo, quieres que "diseño web para restaurantes" tenga su propia URL indexable), el filtrado por JS no es la herramienta correcta para ese objetivo. En ese caso, conviene complementar el Filtrable Grid con páginas de archivo de WordPress que tengan su propio contenido optimizado. El módulo y las páginas de archivo no se excluyen: puedes usar ambos en la misma estrategia.

Pero lo mejor de todo es que el módulo de Filtrable Grid es muy fácil de configurar. Simplemente, arrastra y suelta el módulo en tu página de Divi y personalízalo según tus necesidades. Además, este módulo es compatible con cualquier tipo de contenido que se pueda mostrar en Divi, ¡desde imágenes hasta videos y publicaciones de blog!

¿Y sabes qué es lo más increíble? El módulo de Filtrable Grid es altamente adaptable a diferentes tipos de dispositivos, por lo que siempre se verá profesional y fácil de usar, independientemente del dispositivo que utilicen tus usuarios para acceder a tu sitio web.

En resumen, el módulo de Filtrable Grid de Divi Pixel es una herramienta poderosa y fácil de usar que te ayuda a organizar y presentar tu contenido de manera efectiva. ¡No dudes en probarlo y mejorar la experiencia de tus usuarios en tu sitio web!

Conclusión

El módulo Filtrable Grid de Divi Pixel es una de esas herramientas que, una vez que la incorporas a tu flujo de trabajo, te preguntas cómo diseñabas portfolios sin ella. Resuelve de forma elegante y sin código uno de los problemas más comunes en sitios profesionales: cómo presentar una colección diversa de trabajos de manera que cada visitante encuentre rápidamente lo que le es relevante. El resultado es un portfolio que no solo se ve bien, sino que trabaja activamente para convertir prospectos en clientes.

Si ya tienes Divi Pixel en tu stack, mi recomendación es que experimentes con este módulo en tu próximo proyecto de portfolio o catálogo de servicios. La curva de aprendizaje es mínima, el impacto en la experiencia del usuario es inmediato y las posibilidades de personalización son suficientes para la gran mayoría de casos de uso profesional. Y si quieres ir más allá de este módulo y aprovechar todo lo que el plugin tiene para ofrecer, el siguiente paso natural es el curso completo.

🎓 En el curso completo de Divi Pixel cubro el módulo Filtrable Grid y todos los demás módulos del plugin con tutoriales paso a paso, ejemplos descargables y proyectos prácticos. Es la forma más rápida de dominar el plugin completo y empezar a usarlo en proyectos reales de clientes.

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