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

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.

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.