We are not huge fans of sidebars. Here is the argument against them…. They narrow your page. Modern design tends to favour wider layouts. Widescreen devices are very standard on the desktop. If you prefer longer pages and posts, having a sidebar makes for an awful lot of empty space. On mobile devices, themes will either push the sidebar to below the page (Divi does this) or may not even display the sidebar at all. This article shows you how to disable the sidebar in Divi.

In Divi, the sidebar can be enabled or disabled on a per-page basis. The default is to have it switched on, so you would need to switch it off everywhere, and you would need to remember to switch it off for each new page/post created. It’s a surprise that you can’t switch it off globally. Luckily, it can be done easily from CSS.

We recommend you use a child theme for this but you can put your CSS into the Divi->Theme Options->Custom CSS if you want.

So, all that the CSS below does is to make the main content, the left-area, as wide as it can be. It then stops the vertical bar that separates the main content from the sidebar, and the sidebar itself from being displayed. It’s not necessary, because you just switched it off, but it might be a good idea to also remove any widgets from your sidebar.

div#left-area {
  width:100%;
}

div.container:before, div#sidebar {
  display:none;
}

If you wanted to be more selective about this, say, by disabling the sidebar on posts but keeping it on pages, you could do that by modifying the Divi theme files (in your child theme). If you don’t have it already, copy the Divi single.php file into your child theme folder and just comment out the line near the bottom of the file that displays the sidebar. Here is what the code looks like with the sidebars disabled –

<?php /* get_sidebar(); */ ?>

 

Subscribe To Our Blog

If you found our blog article useful, why not subscribe? Get all of our articles and tutorials delivered direct to your inbox!

You have Successfully Subscribed!