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

cabecera divi

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.

El resultado es el mismo, tus barras laterales y se pueden ocultar o mostrar a voluntad.

¿De cuánta utilidad te ha parecido este contenido?

¡Haz clic en los emoticonos para valorarlo!

Promedio de puntuación 4 / 5. Total de votos: 4

Hasta ahora ¡no hay votos!. Sé el primero en valorar este contenido.

Ya que has encontrado útil este contenido...

¡Sígueme en los medios sociales!

¡Siento que este contenido no te haya sido útil!

¡Ayúdame a mejorar este contenido!

Por favor, dime, ¿cómo puedo mejorarlo?

¿Te gustó este artículo? ¡Ni te imaginas lo que te estás perdiendo en YouTube!

Sobre el autor

1 comentario en “Cómo hacer para que la barra lateral de Divi se pueda contraer y expandir”

  1. Gracias… Está muy bien… pero supongo que la mayoría de visitantes no sabrán que hay una pequeña flechita mediante la que pueden contraer la barra… Y tiene el inconveniente de añadir más código a la cabecera que supongo que ralentizará un poco más la carga…

Deja un comentario

Tu dirección de correo electrónico no será publicada.

Información base sobre privacidad:
  • Responsable: Fernando Tellado ([email protected])
  • Fin del tratamiento: Moderación de comentarios para evitar spam
  • Legitimación: Tu consentimiento
  • Comunicación de los datos: No se comunicarán los datos a terceros salvo por obligación legal
  • Derechos: Acceso, rectificación, portabilidad, olvido

 

Ir arriba
Ir al contenido