Cómo hacer para que la barra lateral de Divi se pueda contraer y expandir

Las barras laterales, a pesar del aumento de la navegación móvil, siguen teniendo sentido para los visitantes que ven tu web desde un ordenador de escritorio o con una pantalla lo suficientemente grande como para visualizarlas.

Son recursos fantásticos para añadir ayudas de navegación, anuncios y otras utilidades, así que no vamos a descartarlas definitivamente, pero sí podemos hacerlas más prácticas.

Las barras laterales tienen algunos inconvenientes, y uno muy claro es que el espacio que ocupan hace que la zona de contenido sea más estrecha y, en consecuencia, más complicada de leer, que requiera hacer más scroll para ver todo el contenido, y luego también está el hecho de que pueden distraer al visitante que quiere leer tu contenido.

Pues bien, todos estos inconvenientes se solucionarían si facilitas que la barra lateral se pueda contraer, con un simple clic, para que el visitante pueda concentrarse en la lectura de tu contenido, ahora ya en ancho completo, y sin distracciones.

Me refiero a algo como esto…

Si usas el tema Divi hay 2 maneras de ofrecer esta funcionalidad ¿nos ponemos?

Hacer contraíble la barra lateral con un poco de código

No te asustes que es muy fácil, solo tienes que copiar y pegar el siguiente código:

<style>
@media only screen and (min-width: 981px) {
/* Boton de ocultar y mostrar barra lateral en Divi */
#db_hide_sidebar {
z-index: 10000;
padding: 10px;
cursor: pointer;
}
.db_right_sidebar_collapsible #db_hide_sidebar {
right: 0;
}
.db_left_sidebar_collapsible #db_hide_sidebar {
left: 0;
}
.et_fixed_nav #db_hide_sidebar { 
position: fixed; 
}
.et_non_fixed_nav #db_hide_sidebar { 
position: absolute; 
}
#db_hide_sidebar:before {
font-family: 'ETModules';
font-size: 24px;
}
.et_right_sidebar #db_hide_sidebar:before,
.db_left_sidebar_collapsible.et_full_width_page #db_hide_sidebar:before {
content: '\39';
}
.db_right_sidebar_collapsible.et_full_width_page #db_hide_sidebar:before,
.et_left_sidebar #db_hide_sidebar:before {
content: '\38';
}

/* Ensure fullwidth formatting matches sidebar formatting */
.db_sidebar_collapsible.et_full_width_page .et_post_meta_wrapper:first-child {
padding-top: 58px !important;
}
}
</style>

<script>
jQuery(function($){
if($('#sidebar').length) {
if ($('body.et_right_sidebar').length) {
$('body').addClass('db_sidebar_collapsible db_right_sidebar_collapsible');
$('#main-content').prepend(
$('<span id="db_hide_sidebar" title="Alternar barra lateral"></span>').click(function(){
$('body').toggleClass('et_right_sidebar et_full_width_page');
$('#sidebar').toggle();
})
);
$('body').addClass('db_collapsible_sidebar');
} else if ($('body.et_left_sidebar').length) { 
$('body').addClass('db_sidebar_collapsible db_left_sidebar_collapsible');
$('#main-content').prepend(
$('<span id="db_hide_sidebar" title="Alternar barra lateral"></span>').click(function(){
$('body').toggleClass('et_left_sidebar et_full_width_page');
$('#sidebar').toggle();
})
);
}
}
});
</script>

Un poco largo ¿no? Pero no hay ningún problema, solo tienes que ir al a administración de tu web WordPress y, en Divi → Opciones del tema → Integración, activar la opción «Habilitar código de la cabecera» y, pegar el código en la caja llamada «Agregar código al <head> de su blog».

Guarda los cambios y ya lo tienes, ahora tu barra lateral se podrá contraer y expandir, ocultar y mostrar si lo prefieres llamar así.

Hacer contraíble la barra lateral con un plugin

Si no te atreves con los códigos no hay problema, puedes aplicar esta misma funcionalidad con el plugin Divi Booster, pues entre sus muchas personalizaciones y cambios para Divi que ofrece, permite activar esta característica a un clic.

Lo tienes en Sidebar → Make the sidebar collapsible.