Cerrar video

Cómo agregar pestañas verticales en el módulo pestañas (divi tabs module) por defecto de divi sin plugins

por | Abr 6, 2023 | Tutorial gratuito | 2 Comentarios

En este tutorial gratuito aprenderás a agregar pestañas verticales laterales en el módulo pestañas (divi tabs module) por defecto de divi sin plugins 😍

Si ya eres un miembro «antiguo» de divi sabrás que divi incluye un módulo llamado pestañas, con este módulo podemos agregar información agrupada en tabs, lamentablemente este módulo solamente nos permite agregar las pestañas o tabs de forma horizontal en la parte superior y no tenemos una opción para cambiar las pestañas en un formato vertical lateral, algo que muchas veces necesitamos a la hora de estar construyendo nuestro diseño.

Por lo tanto, en este tutorial te enseñaré como lograr un diseño personalizado con pestañas laterales verticales, estas pestañas las vas a poder personalizar completamente (color, tipografía, tamaño, etc.) e incluso podrás definir de que lado quieres el grupo de pestañas; si en la parte izquierda de la información o en la parte derecha.

Cómo agregar pestañas verticales con el módulo pestañas (divi tabs module) por defecto de divi sin plugins

Esta nueva estructura de pestañas verticales la vamos a lograr con pequeños fragmentos de código CSS que te dejaré a continuación y que en el transcurso de este video tutorial te iré mostrando donde colocar…

1. Fragmento de código CSS para alinear de manera vertical las pestañas (pegar en el elemento principal del módulo pestañas):

display: flex;
flex-direction: row;
/*flex-direction: row-reverse;*/

2. Definir la anchura y color del contenedor de las pestañas (pegar en controles de pestañas):

width: 50%;
background-color: #fff;

3. Ajustar el diseño de las pestañas (pegar en el área CSS pestañas):

width: 100%;
height: 80px;
border: none;
border-bottom: 3px solid #fff;

4. Agregar un indicador (flechita) a cada pestaña activa (pegar en el CSS Personalizado de la página):

/* Arrow pestañas */
.ov-tab-arrow .et_pb_tabs_controls li.et_pb_tab_active:after {
    top: 50%;
    right: -32px;
    border: solid transparent;
    content: "";
    position: absolute;
    border-color: transparent;
    border-left-color: #1AE0E0;
    border-width: 16px;
    margin-top: -16px;
}
@media only screen and (max-width: 768px) {
  .ov-tab-arrow .et_pb_tabs_controls li.et_pb_tab_active:after {
    display: none;
	}
}

Nota: Debes agregar el nombre de clase «ov-tab-arrow» al módulo pestañas.
 
5. Agregar un icono al título de cada pestaña (pegar en el CSS Personalizado de la página):

/* Iconos en pestañas */
.ov-tab-icon .et_pb_tabs_controls li a:before {
    font-family: ETmodules;
    padding-right: 14px;
}

.ov-tab-icon .et_pb_tabs_controls li:nth-child(1) a:before {
    content: '\e009';
}

.ov-tab-icon .et_pb_tabs_controls li:nth-child(2) a:before {
    content: '\e007';
}

.ov-tab-icon .et_pb_tabs_controls li:nth-child(3) a:before {
    content: '\e030';
}

.ov-tab-icon .et_pb_tabs_controls li:nth-child(4) a:before {
    content: '\e105';
}

.ov-tab-icon .et_pb_tabs_controls li:nth-child(5) a:before {
    content: '\e031';
}

Nota: Debes agregar el nombre de clase «ov-tab-icon» al módulo pestañas.
 
Aquí te comparto el listado de iconos disponibles de divi, solamente tienes que copiar y reemplazar el dígito de la propiedad content de cada pestaña.

¿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

2 Comentarios

  1. Paula Rios

    Buen día Oscar! como estas? Soy Paula, te pedi ayuda por las pestañas verticales en youtube, que cuando clickeas sobre la pestaña se cambian los tamaños de una en una, me pediste que te pase el url para que puedas ver el problema o si hice algo mal. Al parecer no me permite pasarte la url en youtube porque te escribi y no aparedce mi respuesta asi que te escribo por ca.
    Te agradezco de ante mano y te paso la URL.
    https://walit.com.ar/plan-base-2/
    Gracias.

    Responder
    • Oscar Viedma

      Hola Paula, qué tal, perdona la demora.

      Para solucionar el problema que tienes en los ajustes de la página / Avanzado / CSS Personalizado agrega este código CSS:

      @media only screen and (min-width: 981px) {
          .ov-tab-arrow.et_pb_tabs .et_pb_tabs_controls li {
              width: 300px !important;
          }
      

      Con este código definimos una anchura para las tabs en Escritorio. El valor «300» lo puedes cambiar si así lo deseas 😉

      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