Cómo agregar filtros de pestañas (tabs) horizontales a cualquier grupo de módulos de divi sin plugins

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 😋

Descargar JSON desde