En este tutorial gratuito para el canal de youtube aprenderás a agregar filtros de pestañas (tabs) horizontales a cualquier grupo de módulos de divi (ver demo). Lo mejor que no necesitaremos ningún plugin para agregar esta funcionalidad.
En el ejercicio de este tutorial hacemos un ejemplo de filtros para un grupo de módulos anuncio o blurb, aunque en realidad puedes elegir cualquier módulo estático de divi, por ejemplo, puedes hacer filtros para el módulo imagen, el módulo llamada a la acción, el módulo video, módulo blog, módulo de productos o cualquier otro módulo, incluso módulos de algún plugin como Divi Torque del cual ya hicimos un tutorial 😍
La sección filtrable es completamente personalizable, tenemos la posibilidad de personalizar el estilo de las pestañas, agregar las pestañas que sean necesarias, podemos agregar diferente número de columnas para distintas resoluciones de pantalla, por ejemplo, podemos mostrar 4 columnas en escritorio, 2 en tableta y 1 en móvil, en fin, eres libre de seleccionar cuantas columnas quieres mostrar por resolución.
Este tutorial es un tutorial gratuito pero con calidad de premium, así qué, aprovéchalo y empieza a aplicar esta funcionalidad en tus proyectos.
Para la realización de este tutorial vamos a necesitar de unos pequeños fragmentos de código, te los dejo a continuación para que al seguir el tutorial solamente los copies y pegues…
1. Código CSS para crear una grilla de módulos:
display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px;
2. Estructura HTML de las pestañas filtrables:
<ul class="ov-tabs-filters"> <li class="ov-tab-filter active" data-filter="all">Todos</li> <li class="ov-tab-filter" data-filter="color">Color</li> <li class="ov-tab-filter" data-filter="icons">Iconos</li> <li class="ov-tab-filter" data-filter="extensions">Extensiones</li> </ul>
3. Estilos CSS de las pestañas filtrables:
/* Estilos pestañas filtrables ov divi */ .seccion-tabs-filtrables .ov-element-item { opacity: 0; transition: opacity 0.5s ease; } .seccion-tabs-filtrables .fade-up { opacity: 1; transform: translateY(0); } .seccion-tabs-filtrables .hide { display: none; } .seccion-tabs-filtrables .ov-tabs-filters { display: flex; justify-content: center; /* alinea las tabs */ align-items: center; flex-wrap: wrap; list-style-type: none !important; padding: 0 !important; margin: 0; font-size: 16px; } .seccion-tabs-filtrables .ov-tab-filter { font-weight: 600; text-align: center; padding: 10px; margin: 5px; cursor: pointer; transition: background-color 0.3s ease; list-style-type: none; width: 170px; /* anchura tab */ } .seccion-tabs-filtrables .ov-tab-filter.active { background-color: #4741D7; /* color fondo tab activa */ color: #ffffff; /* color texto tab activa */ } .seccion-tabs-filtrables .ov-tab-filter:not(.active) { background-color: #e2eaf9; /* color fondo tab */ color: #4741D7; /* color texto tab */ } @media (max-width: 767px) { .seccion-tabs-filtrables .ov-tabs-filters { flex-direction: column; align-items: flex-start; } .seccion-tabs-filtrables .ov-tab-filter { padding: 10px; margin: 2px 0; width: 100%; } }
4. Funcionalidad JavaScript de las pestañas filtrables:
<script> document.addEventListener('DOMContentLoaded', function() { const tabs = document.querySelectorAll('.ov-tab-filter'); const galleryItems = document.querySelectorAll('.ov-element-item'); showAllItems(); tabs.forEach(tab => { tab.addEventListener('click', () => { const filter = tab.getAttribute('data-filter'); tabs.forEach(tab => { tab.classList.remove('active'); }); tab.classList.add('active'); galleryItems.forEach(item => { item.style.opacity = 0; item.style.transform = 'translateY(20px)'; setTimeout(() => { if (filter === 'all') { item.style.opacity = 1; item.style.transform = 'translateY(0)'; item.classList.remove('hide'); } else if (item.classList.contains(filter)) { item.style.opacity = 1; item.style.transform = 'translateY(0)'; item.classList.remove('hide'); } else { item.style.opacity = 0; item.style.transform = 'translateY(20px)'; item.classList.add('hide'); } }, 300); }); }); }); function showAllItems() { galleryItems.forEach(item => { item.style.opacity = 1; item.style.transform = 'translateY(0)'; item.classList.remove('hide'); }); } }); </script>
5. CSS para agregar la transición suave a los módulos en su estado hover:
transition: all .8s cubic-bezier(.2,.8,.2,1.2) 0s!important;
Si quieres descargar la demo del ejercicio puedes hacer click en el botón de abajo, es completamente gratis pero si deseas donarme un café será bien recibido 😋
Excelente Oscar.. Se me ocurre que podriamos combinar este tutorial de pesteñas filtrables con el último tutorial pro de características que abren popups al hacer click.. ¿Como se aplicaría ese código? 🤔 Saludos y atento como siempre a tu respuesta 😁
Hola Joathan, gracias.
Lo mismo solamente es combinar los dos y hacer pruebas 🙂
Hola Oscar, mira que hice todo al pie de la letra y al abrir la pagina esta invisible el contenido pero si doy clik en el botón si se se muestra.
https://www.internacionalsystem.com/productos/
Hola Elvis, revisa bien las clases que estén colocadas correctamente en los elementos
Hols Oscar! He hecho el tutorial al pie de la letra pero cuando cargo la pestaña y sin hacer scroll, clickeo otro botón algunos de los últimos las imágenes no cargan incluso el CTA que tengo abajo no carga tampoco las animaciones de texto y botón que tengo que es otra sección no tiene nada que ver con los filtros, hasta que no selecciono en todos y hago scroll no carga bien las imágenes ni el CTA. Me podrías ayudar ? Te paso el link
Hola Gabriel, quita la animación a cada imagen del módulo anuncio. Esto lo haces desde los ajustes del módulo / Diseño / Animación…
Hola Oscar, me funciono perfecto el tutorial, pero necesito que cuando cargue la pagina no se vean todos los item, únicamente el primero, me puedes ayudar con eso.
Gracias
Hola Saray, simplemente quita la pestaña de todos 🙂
hola oscar, genial el tutorial, solo me falta resolver este aspecto, que me figuren solo los item de esa categoria cuando cargo la página, podrias explicarle a un principiante que seria quitar la pestaña de todos. gracias oscar
En el código HTML usa este fragmento:
Y para el código javascript es este:
Hola Oscar, me sumo a las felicitaciones!! Tengo una duda, este código muestra la categoría «color» por defecto y elimina la vista «todos», ahora, cómo hago para tener «color» como default y al final tenga la categoría «todos» y que muestre todos los items?
Desde ya muchas gracias!
Hola Marcelo, muchas gracias.
¿Te refieres al orden o como?
Hola Oscar, fui haciendo todo al pie de la letra pero me quedaron como filas independientes en cada tarjeta, no quedaron agrupadas … como lo puedo solucionar?
Hola Bernabe, ¿Cuál es la url de tu web?
Hola Oscar, ya pude solucionarlo.
Muchas gracias!
como lo solucionaste hermano?
El tutorial más funcional que he visto en DIVI. No dejes de hacer videos bro, eres increíble. Así apliqué la funcionalidad yo, ¿alguna recomendación? https://iloveloscabostours.com/
Sin duda alguna me suscribiré a tu lista de videos pro en estos días, saludos Oscar!
Hola Rogelio, perdona, apenas te ando leyendo por acá.
Veo que ya me has contactado por el soporte premium, eso es genial, seguramente desde ahí puedo resolver de mejor manera tus dudas.
Muchas gracias por unirte a los tutoriales Rogelio, estamos en contacto.
Un abrazo.
Hola Oscar:
Tengo una duda, he aplicado esto en mi web pero en vez de hacerlo con anuncios lo he hecho con un archive loop que tira de un custom post type llamado Actividades que estan ordenados en tres pestañas: Congresos, encuentros y jornadas, la cuestion es como hago para que al pinchar en las pestañas me coja cada pestaña su correspondiente Actividad. Espero haberme explicado bien. Necesito tu ayuda.
Hola Oscar como estas? excelente tutorial ya lo estoy implementando en mi web, solo tengo un pequeño error, cuando selecciono otra categoría deja en blanco lo espacios donde están las otra secciones
Hola Camilo. ¿Cuál es el link?
Hola Oscar! Muchas gracias
https://agenciamakoto.com
Hola Camilo, al inspeccionar el código veo que te hace falta la clase «seccion-tabs-filtrables» en la sección que contiene los elementos.
Revisa ese detalle por fa 😉
tenias toda la razón Oscar, muchas gracias! muy Crack!!!
Hola Oscar , excelente tutorial. Lo que me está pasando es que cuando quiero guardar el código del script me salta que NO SE PUEDE GUARDAR , que intente de nuevo o que descargue una copia..
Ya revisé todo el servidor y divi, tengo todas las funciones de PHP correctas de acuerdo al support center de DIVI. Tienes idea cómo hacer para que me tome el script?
Hola Sebastian, puede ser que un código esté interfiriendo a la hora de guardar. También puede ser la versión de Divi, asegúrate de tener la versión más reciente instalada por fa
Excelente tutorial, me alegra contarte que ya soy parte de la comunidad premiun 🙂
Tengo un problema con este ejercicio, aplique a un sitio y al momento abrir la página, muestran un segundo y desaparecen los anuncios, pero si aprieto el botón TODOS u tro ahi aparecen, y no se me cargan todos los anuncios. Gracias nuevamente.
https://hola.celibro.org.ec/afilados/
Hola Cristhian, apenas ando leyendo tu comentario por aquí.
Muchas gracias por ser parte de los tutoriales premium 🙂 ¡Gracias a ti puedo seguir creando mucho contenido para Divi!
Escríbeme por el chat de soporte desde el área de tu cuenta para ayudarte a solucionar el problema que me comentas por fa.
Quedo atento, saludos.
Hola, Oscar, excelente el complemento.
Quería preguntarte si, por casualidad, ¿No se pueden agregar subpestañas? Onda poner un elemento llamado Zapatos y que haga un desplegable con marcas o con modelos y que el hacer clic los muestre?
Gracias de antemano, saludos.
Hola Ricardo, por ahora no tengo esa funcionalidad. Pero si tienes ejemplos podrías compartírmelos y considerarlos para un tutorial más adelante.
Saludos
Yo te digo por ejemplo que tengan las pestañas como un selector que despliegue y uno pueda meter opciones ahí, sería genial para cuando hay muchos elementos y no poner 20 pestañas, sino agrupar dentro de otras.
Gracias por tu respuesta, abrazo.
Si encuentras algo parecido por internet me lo compartes para darle un vistazo y de esta manera tenga una mejor idea 🙂
o incluso un grafico puede servir