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:
<script> document.addEventListener('DOMContentLoaded', function() { const tabs = document.querySelectorAll('.ov-tab-filter'); const galleryItems = document.querySelectorAll('.ov-element-item'); // Establecer la pestaña "Color" como activa por defecto const defaultTab = document.querySelector('.ov-tab-filter[data-filter="color"]'); defaultTab.classList.add('active'); // Función para filtrar y mostrar elementos function filterItems(filter) { galleryItems.forEach(item => { if (filter === 'all' || 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'); } }); } // Mostrar solo los elementos de "Color" al cargar la página filterItems('color'); tabs.forEach(tab => { tab.addEventListener('click', () => { const filter = tab.getAttribute('data-filter'); tabs.forEach(tab => { tab.classList.remove('active'); }); tab.classList.add('active'); filterItems(filter); }); }); }); </script>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!!!