Tutorial pestañas verticales en Divi para móvil y sobremesa

Mi objetivo ante todo es conseguir unas pestañas laterales para móviles, que se mantuvieran en la pantalla (sticky) y facilitando así la navegación al máximo posible.

Después de mirar el tutorial que tienen en diviextended  hay un par de puntos que para mi gusto le faltan para lo que yo quería conseguir y he decidido hacer una versión que también es más sencilla y en español.

Así que vamos a ello, veamos como conseguir pestañas laterales en Divi que sean realmente útiles en móviles.+

Primero, crear una fila con un modulo de pestañas:

 

Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.

Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.

Asignar la clase pes-vertical al modulo pestañas en avanzado > id y clases CSS > clase CSS

Lo siguiente, ajustar la fila / row (el verde) al 100% de width y 10px de padding-right en móviles:

Configuración pestañas verticales divi
Configuración pestañas verticales divi
Con todo esto y para finalizar pondremos el siguiente código CSS en Divi > opciones del tema en el backend o en ajustes de la página > avanzado > custom CSS.
Hay anotaciones para que sea más sencillo modificar ciertos valores que seguro que cada uno querrá a su gusto.
Así mismo es importante ajustar el ancho  de la pestañas porque varia según la cantidad de texto y la altura a la que se pegan a la parte superior ya que varia dependiendo de vuestro menú.

***COMIENZO DEL CÓDIGO***

/* Divi pestañas verticales */
/*ajustar el row al 100% y 10px de padding-right en moviles, es la seccion verde*/

.pes-vertical ul.et_pb_tabs_controls {
float: left;
width: 100px; /* ancho de la pestanas, ajustar */
margin-right: 2%;
position:sticky;
top:70px; /* altura a la que se fijan las pestanas, ajustar segun el menu */
}
@media (max-width:480px;){
.pes-vertical ul.et_pb_tabs_controls {top:40px} /*altura en moviles*/
}

/* color pestanas inactivas */
.pes-vertical .et_pb_tabs_controls li {
width: 100%;
border-right: none !important;
border-left: 5px solid transparent;
background: #f4f4f4;
}

/* decoracion de la pestana activa*/
.pes-vertical .et_pb_tabs_controls li.et_pb_tab_active {
border-left: 5px solid #14C05D !important;
background: #ffffff;
}

.pes-vertical .et_pb_tabs_controls li a {
padding: 10px;
}
/* color texto ventana activa*/
.vertical-tabs .et_pb_tabs_controls li.et_pb_tab_active a {
color: #14C05D !important;
}

.pes-vertical .et_pb_tab {
padding: 0;
}

.pes-vertical .et_pb_tab_content {
display: flex;
flex-wrap: wrap;
}

***FIN DEL CÓDIGO***

Y nos quedara algo como lo siguiente, totalmente adaptable a móviles y muy cómodo para navegar, por supuesto tiene un limite de pestañas y texto que permitan una buena navegación.

Si veis que queda muy estrecho en móviles utilizad el siguiente código para reducir los paddings que usa Divi, este si recomiendo usarlo solo en la página que sea necesario, usado de forma general puede romper el diseño:

@media (max-width:600px){
.et_pb_post_content{width:100%!important;padding-left:0px!important;}
.et_pb_column{padding-left:0px!important;}
.et_pb_row{padding:8px!important;width:95%!important;}
}
Espero que os haya sido de utilidad este tutorial sobre como modificar las pestañas de Divi para verlas de forma vertical y completamente adaptadas a móviles.

Consejo de Óniro Webs:
Aplicando buenas estrategias SEO y SEM ante todo generaremos tráfico a nuestra web pero, también conseguiremos mejorar nuestro posicionamiento orgánico.
Para más info....