Cerrar video

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

por | Jul 20, 2023 | Tutorial gratuito | 16 Comentarios

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.

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

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

Tutoriales Relacionados

16 Comentarios

  1. Joathan

    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 😁

    Responder
    • Oscar Viedma

      Hola Joathan, gracias.

      Lo mismo solamente es combinar los dos y hacer pruebas 🙂

      Responder
    • Oscar Viedma

      Hola Elvis, revisa bien las clases que estén colocadas correctamente en los elementos

      Responder
  2. Saray

    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

    Responder
    • Oscar Viedma

      Hola Saray, simplemente quita la pestaña de todos 🙂

      Responder
      • jonatan borget

        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

        Responder
        • Oscar Viedma

          En el código HTML usa este fragmento:

          <ul class="ov-tabs-filters">
            <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>
          

          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>
          
          Responder
          • Marcelo

            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!

          • Oscar Viedma

            Hola Marcelo, muchas gracias.

            ¿Te refieres al orden o como?

  3. Bernabe Marcelo Lorio

    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?

    Responder
      • Marcelo

        Hola Oscar, ya pude solucionarlo.
        Muchas gracias!

        Responder
  4. Rogelio Jaime

    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!

    Responder
    • Oscar Viedma

      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.

      Responder
  5. Amaia

    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.

    Responder

Enviar un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Tutoriales Exclusivos

Tutoriales exclusivos OV Divi

Lleva tus sitios web creados con divi al siguiente nivel.

Accede a tutoriales exclusivos y únicos de divi y saca el máximo provecho del mejor tema y constructor visual para WordPress.

$8 USD / mes

Pin It on Pinterest