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 | 32 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

¿Te ha gustado este tutorial? 🚀

¡Los Tutoriales Premium te van a encantar! Desde solo $10 USD al mes accede a más de 200 (¡y contando!) tutoriales únicos y exclusivos sobre Divi y WordPress. ¡Únete ahora y aumenta al 200% tus habilidades de diseño web con Divi!

Tutoriales Relacionados

32 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
    • Gabrirl

      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

      Responder
      • Oscar Viedma

        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…

        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
  6. Camilo Lopez

    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

    Responder
        • Oscar Viedma

          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 😉

          Responder
          • Camilo Lopez

            tenias toda la razón Oscar, muchas gracias! muy Crack!!!

  7. sebastian

    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?

    Responder
    • Oscar Viedma

      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

      Responder
  8. Cristhian Herrera

    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/

    Responder
    • Oscar Viedma

      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.

      Responder
  9. Ricardo

    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.

    Responder
    • Oscar Viedma

      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

      Responder
      • Ricardo

        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.

        Responder
        • Oscar Viedma

          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

          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.

$10 USD / mes

Pin It on Pinterest