MakeInOff – Tabs con scroll horizontal
Para crear una página con tabs y scroll horizontal en Divi, se pueden seguir los siguientes pasos:
1. Crear una nueva página en Divi y agregar una sección completa.
2. En la sección completa, agregar un módulo de Tabs.
3. Configurar el módulo de Tabs con las pestañas que se desean mostrar y agregar el contenido de cada pestaña.
4. En la pestaña de Design, seleccionar la opción de "Full Width" para el módulo de Tabs y ajustar el ancho de las pestañas y el contenido.
5. Agregar un módulo de Barra de desplazamiento horizontal justo debajo del módulo de Tabs.
6. Configurar el módulo de Barra de desplazamiento horizontal para que se ajuste al ancho completo y para que se ajuste automáticamente al contenido.
7. En la pestaña de Advanced, agregar la siguiente clase CSS al módulo de Tabs: "scrollable-tabs"
8. En el archivo de CSS personalizado de Divi, agregar las siguientes líneas de código:
.scrollable-tabs .et_pb_tabs_controls {
overflow: auto;
white-space: nowrap;
}
.scrollable-tabs .et_pb_tab {
display: inline-block;
vertical-align: top;
white-space: normal;
}
Este código permitirá que las pestañas se desplacen horizontalmente con la barra de desplazamiento agregada.
9. Guardar y publicar la página.
Con estos pasos, se habrá creado una página con tabs y scroll horizontal en Divi.