Sur certains sites, il peut être utile de supprimer la sidebar pour afficher le contenu sur toute la largeur disponible.
Contenu avancé #
Cet article utilise du code CSS. Une mauvaise manipulation peut modifier la mise en page de plusieurs pages du site.
Objectif #
Supprimer la sidebar et élargir la zone de contenu principale sur une page utilisant la structure classique de Divi.
Code CSS à utiliser #
Ajoute le code suivant dans le CSS principal du site :
/* PLUS DE SIDEBAR */
/* Remove sidebar */
/*#sidebar {
display:none;
}*/
/* Remove thin line */
#main-content .container:before {
background: none;
}
/* Make content 100% width */
@media (min-width: 981px){
#left-area {
width: 100%;
padding-right: 0px !important;
}
}
Comprendre le fonctionnement #
- Le sélecteur
#sidebarpermet de masquer la colonne latérale - La règle sur
#main-content .container:beforesupprime la fine ligne verticale - Le bloc
@media (min-width: 981px)élargit la zone de contenu sur desktop
Où ajouter ce code #
- Dans Divi → Options du thème → CSS personnalisé
- Dans Apparence → Personnaliser → CSS additionnel
- Dans le CSS d’une page spécifique si tu veux limiter l’effet
Limiter l’effet à une page précise #
Si tu ne veux pas supprimer la sidebar sur tout le site, il est préférable de cibler une page spécifique avec une classe ou un identifiant propre à cette page.
Points d’attention #
- Ce code repose sur la structure classique de Divi avec
#sidebaret#left-area - Il peut ne pas fonctionner de la même manière avec un template personnalisé ou un builder de thème
- Appliqué globalement, il peut modifier toutes les pages utilisant une sidebar
Astuce utile #
Avant d’appliquer ce CSS globalement, teste-le sur une seule page pour vérifier que le rendu reste cohérent avec la structure du site.
Compatibilité #
Cette méthode reste utile sur des sites Divi utilisant la structure standard du thème. Si ton site utilise un template personnalisé ou une mise en page construite différemment, le sélecteur peut devoir être adapté.
Pour conclure #
Supprimer la sidebar permet de gagner de l’espace et de simplifier la mise en page. Cette méthode est efficace, à condition de bien cibler les pages concernées.