How To Remove Sidebars From Divi

Posted on March 29, 2017 by in Divi Resources | 46 comments

How To Remove Sidebars From Divi

Removing the Sidebar from Divi’s default page template can easily be done when you are using the Divi Builder. However, since the default template still shows on pages like 404’s and archives, you may want to take out the sidebar from you template altogether.

This can be done in a few different ways. You can hide sidebars globally or for individual templates using CSS only. You can also hide sidebars by editing the actual template files using a child theme.

Today I’m going to show you the different ways to hide sidebars globally and for individual templates. Hopefully this will equip you with the tools you need to create a consistently designed fullwidth website.

Let’s get started!

How To Remove Sidebars From Divi

Subscribe To Our Youtube Channel

Removing Sidebars Per Page with Divi Page Settings

This first method doesn’t allow you to take out sidebars globally but I thought it was worth mentioning.

If you aren’t using the Divi Builder and simply want to change your page layout on a per page basis, simply find the Divi Page Settings box at the top right when editing your page and select fullwidth for your page layout.

This is a good solution for most pages. However, this fix won’t be able to address other templates like the post and portfolio archive pages. These templates must be changed using CSS or editing template files.

Hiding The Sidebar Globally Using CSS Only

To hide the sidebar globally or site-wide, all you have to do is add some custom CSS to your child theme style.css file. Or you can go to Divi → Theme Options and add the CSS in the Custom CSS box.

First add the following CSS to hide the light gray separator line that divides the content and the sidebar:

/*** Take out the divider line between content and sidebar ***/
#main-content .container:before {background: none;}

Next, add this CSS to expand your content section to fullwidth:

/*** Expand the content area to fullwidth ***/
@media (min-width: 981px){
#left-area {
    width: 100%;
    padding: 23px 0px 0px !important;
	float: none !important;
}
}

Finally, add this CSS to hide the Sidebar:

/*** Hide Sidebar ***/
#sidebar {display:none;}

Altogether your CSS should look like this:

/*** Take out the divider line between content and sidebar ***/
#main-content .container:before {background: none;}

/*** Hide Sidebar ***/
#sidebar {display:none;}

/*** Expand the content area to fullwidth ***/
@media (min-width: 981px){
#left-area {
    width: 100%;
    padding: 23px 0px 0px !important;
	float: none !important;
}
}

Your pages and posts will have a fullwidth layout like this:

Hiding the Sidebar for Certain Templates Using CSS

Instead of using the above CSS snippet to hide the sidebar globally, you can use the following snippets to hide the sidebar on certain templates.

Note: each of the following CSS snippets should be used with CSS that takes out the separator line and adjusts the width of the content section:

/*** Take out the divider line between content and sidebar ***/
#main-content .container:before {background: none;}

/*** Expand the content area to fullwidth ***/
@media (min-width: 981px){
#left-area {
    width: 100%;
    padding: 23px 0px 0px !important;
	float: none !important;
}
}

To hide the sidebar for all archive pages, use this custom CSS:

/*** Hide Sidebar for archive pages ***/
.archive #sidebar {display:none;}

To hide the sidebar for all pages, use this custom CSS:

/*** Hide Sidebar for all pages ***/
.page  #sidebar {display:none;}

To hide the sidebar for single posts (including single project posts), use this custom CSS:

/*** Hide Sidebar for single posts ***/
.single  #sidebar {display:none;}

To hide sidebar only for single project posts only, use this custom CSS:

/*** Hide Sidebar for single project posts ***/
.single-project  #sidebar {display:none;}

To hide sidebar only for all category archive pages, use this custom CSS:

/*** Hide Sidebar for category archive pages ***/
.category  #sidebar {display:none;}

To hide sidebar only for project category archive pages only, use this custom CSS:

/*** Hide Sidebar project category archive pages ***/
.tax-project_category  #sidebar {display:none;}

To hide sidebar only for 404 pages, use this custom CSS:

/*** Hide Sidebar for 404 pages ***/
.error404  #sidebar {display:none;}

Disabling the Sidebar Globally by Editing the sidebar.php File

It is alway better to edit your Divi theme files using a child theme. Once you have a child theme installed and active, add the template files you want to edit into the child theme folder. Now when you update Divi, your edited child theme files won’t be overridden.

In order to disable the sidebar globally (on all templates), open your child theme folder (using a FTP client and a text editor) and add a file with the exact name “sidebar.php”.

That’s it!

Make sure you don’t put any content in the sidebar.php file. Now whenever your theme calls for the file, there won’t be any content and nothing will be displayed.

Now add the following custom CSS to your child theme style.css file, or you can add it in the Custom CSS section in your Theme Options:

/*** Take out the divider line between content and sidebar ***/
#main-content .container:before {background: none;}

/*** Expand the content area to fullwidth ***/
@media (min-width: 981px){
#left-area {
    width: 100%;
    padding: 23px 0px 0px !important;
	float: none !important;
}
}

Disabling the Sidebar For Specific Templates

Divi has a number of templates that are used to display different page layouts on your website. Some of these templates file include:

Page.php – Template for all pages
Single.php – Template for all single posts
Single-project.php – Template for all single projects
404.php – Template for all 404 pages

To disable the sidebar on any of these templates, you can access the template file and take out this small snippet of php code that calls the sidebar:

<?php get_sidebar(); ?>

If you haven’t already, make sure you have your child theme installed and active. You can add any of the template files mentioned earlier to the child theme folder for editing.

Here is an example of how to disable the sidebar for all pages by editing the page.php file.

Using an FTP client and a text editor, access your Divi theme files and copy the page.php file. Paste the page.php file with all of its code into your child theme folder (make sure it has the exact same name “page.php”.

Now, open the child theme page.php file and delete this php code snippet:

<?php get_sidebar(); ?>

Save your changes and you are done!

Disabling Sidebars on Your Archive Pages

The Divi theme does not have a separate archive template file. The archive pages for things like category and tag archives use the index.php template file.

Simply copy over the index.php file from the Divi parent theme to your child theme folder and take out the same snippet of php code:

<?php get_sidebar(); ?>

That’s it!

Final Thoughts

When building a website, it is important that all of your pages keep the same consistent layout and design. So, If you are building a site with a fullwidth layout using the Divi Builder, you may want to keep this layout for all of you pages by default. This could improve user experience. If anything, you now have the power to customize your sidebar displays however you see fit.

I hope you will find this useful for you site and future projects.

I look forward to hearing from you in the comments.

Cheers!

46 Comments

  1. I asked this query in the forum earlier today. Thanks for the tutorial.

    To remove the sidebar globally on post. – the code you given is applied to all the post.

    How about we add the code for the above settings, you mentioned. Then in the post(divi settings) to add the sidebar for that post. Like Monarch Settings, we can do the settings overdrive in the post editor.

  2. Thanks for such a great post…

  3. Awesome to have an officially endorsed way to do this now!

  4. Very interesting! And what will happen when side wide all sidebars are disabled and I create a new page only with the Divi builder WITH sidebar?

    • Jason Champagne

      Joffry,

      This shouldn’t affect any of the pages built with the divi builder. Is this what you are asking?

      • E.g. if I load ‘page with sidebar’ from the library, will the sidebar than still be visable?

        • Jason Champagne

          Yes. That is correct. If you import a layout from the library using the Divi Builder, you will be able to see the sidebars from there.

  5. Is there a way where I could just edit the default selected value of the Page layout? So that by default it would only show full page.

    • Yes, but you would need to be comfortable using a child theme and editing the functions.php file. If so, here’s how I did it.

      1. Copy the ‘et_single_settings_meta_box’ function that’s in Divi’s functions.php file to your child theme’s functions.php file.

      2. Find this part of the function:

      $page_layouts = array(
      ‘et_left_sidebar’ => esc_html__( ‘Right Sidebar’, ‘Divi’ ),
      ‘et_right_sidebar’ => esc_html__( ‘Left Sidebar’, ‘Divi’ ),
      ‘et_full_width_page’ => esc_html__( ‘Full Width’, ‘Divi’ ),
      );

      3. Then, change the order of the $page_layouts array to fit your needs. So in your example, you would just move the line containing ‘et_full_width_page’ to the beginning.

      Like this:

      $page_layouts = array(
      ‘et_full_width_page’ => esc_html__( ‘Full Width’, ‘Divi’ ),
      ‘et_left_sidebar’ => esc_html__( ‘Right Sidebar’, ‘Divi’ ),
      ‘et_right_sidebar’ => esc_html__( ‘Left Sidebar’, ‘Divi’ ),

      );

      One note is that this will only affect new pages, you’ll need to manually update any existing pages.

      Hopefully this helps!

  6. I’ve been looking for a post like this for a long time – but it still doesn’t solve the problem I’m yet to successfully achieve

    HOW DO IT REMOVE THE SIDEBAR ON ALL SINGLE PRODUCT PAGES?

    Yes, I know the page builder allows it but I upload products in bulk through an import function so don’t want to have to go back and edit every product thereafter.

    Please help, nothing works 🙁

    • I’m also looking for a solution to hide the sidebar on all PRODUCT PAGES and PRODUCT CATEGORY PAGES – i.e all Woocommerce pages.

      • Same here! How to hide the side bar on a Single Page. The Divi Page Setting function in this case has no the Page Layout Option on on the Product Page… Help will be appreciated!

        • Hello All,

          If you are comfortable implementing child themes and creating/editing the functions.php file, you can use the method I outlined above for @Lee. This will default all new product pages, regular pages and posts to the “Full Width” template in Divi. Keep in mind this will only affect new pages you create.

          If you’d like to change the page layout in bulk on existing pages, only way I’ve done this is by editing the database which may or may not be something you’re comfortable doing.

          Additionally, you can force a full width layout on the shop and category pages. In Divi Theme Options, there’s a setting called “Shop Page & Category Page Layout for WooCommerce”, where you can change to “Full Width”

    • Jason Champagne

      Jason,

      The following CSS works for me:

      #main-content .container:before {background: none;}
       
      /*** Expand the content area to fullwidth ***/
      @media (min-width: 981px){
      #left-area {
          width: 100%;
          padding: 23px 0px 0px !important;
          float: none !important;
      }
      }
      
      .single  #sidebar {display:none;}
      

      You could also try adding this if that doesn’t work:

      .single-product  #sidebar {display:none;}
      

      Let me know how it goes. Thanks.

  7. Excellent post, thank you! but this should be an theme setting, most of the “big themes” have this option…

  8. Great work. But I bought Divi Booster and I can do that in less than a minute.

  9. Love the idea of this post, but just reporting that adding this css to my child theme css file does absolutely nothing on my site. Obviously changing the page option works, but that doesn’t help me on pages that are automatically generated by plugins. Would love some advice. What am I missing? Adding the blank sidebar php file got rid of the side bar but the sodding divider remains.

    • Jason Champagne

      Hey Josh,

      Not sure what could be overriding that custom CSS. I would try inspecting to see if that stylesheet is even being applied.

      Also, what do you mean by “pages that are automatically generated by plugins”? What plugin are you using?

      Thanks

  10. Yeees, that is exactly what I was looking for! Thanks a lot!

  11. Hey Jason, thanks for this post and the many other amazing posts you wrote past weeks. I interestingly have exactly the complementing question: How to use sidebars officially on DIVI Page Builder pages?

    It was and still is a big need for many clients, and I found half my way through last year. Since then I run DIVI flawless with the option of the regular sidebar as it is also available in posts. I wrote an article on my website, and it is amongst the most read posts of my site, so I guess I am not alone with this need.

    But I would be very happy to see you writing officially about it, making sure that I didn’t miss anything and completing the solution, since for example I couldn’t get the Page Title back into the game. Otherwise the solution runs flawless since one year on many websites, so I guess it just needs a final check by your team. Thanks in advance.

    • Jason Champagne

      Hey Sofian,

      Thanks for the suggestion! Are you referring to best practices for using sidebars with the Divi Builder?

      • Actually I mean the regular built-in sidebar of WP as it can still be used on posts. I always wondered why DIVI is not offering the same option for pages. I wrote all my reflections and solutions in my post that you can reach when clicking on my name, it was the only way I could make it accessible since links are not allowed in the comments as I found out. If you have a minute to read through it will explain my need and how far I got in accomplishing it. Thanks for the open ear, I am very glad you joined the team and enrich us with all those helpful tutorials.

        • And congratulations to your daugther, I watched the DIVI nation earlier on 🙂

  12. Many thanks! Thorough as always.

  13. Thanks for a simple approach to a oft-needed “fix”!

    –Marc

  14. Adding the code to the child theme does not work globally. It removes the line but does not expand the left side content out 100%. If you change the page type it works. Would like to do it globally so don’t have to open every single page and change it.

    • Jason Champagne

      Hey Guy,

      Could you clarify what you mean by “change the page type”? I’m trying to understand. Thanks.

  15. Many thanks. I was looking for such an advice for a long while.

  16. Thanks for the post! I was just looking to do this.

    You provide two options for removing it globally. I’m already using a child theme. Which one is preferred method…editing sidebar.php & CSS or adding only the CSS? And maybe why? 🙂

    • Jason Champagne

      I would say best practice would be to edit the sidebar.php file or take it out of the other template files. CSS works great as will but I think search engines are still able to read content that have “display:none” attached to it. Which isn’t a big deal but may be misleading for SEO purposes.

      Hope that helps.

  17. Wow, Thanks! That is just what i was looking for! I would not have figured it out by myself, so thanks a lot.

  18. Thanks for that Post. That´s what I am looking for. By by Sidebar.

    Best wishes,

    Jojo

  19. That´s what I am looking for. By by Sidebar.

    Thanks a lot!

    Best wishes,

    Jojo

  20. I like divi theme so much. But, why divi theme has not a separate customization for sidebar? Why should i write css if i just want to change the side of sidebar globally?

    • Jason Champagne

      I hear you Sina. This may be something added to Divi down the road. Thanks for the feedback.

  21. Great post. Anyway there should be a simple way to remove the sidebar in the woocommerce products in the same way that there is for the categories. In my case I have shops with thousands of products and I can’t go one by one changing their settings.

    Thanks!!!

    • Jason Champagne

      If you look at my comment to Jason above, that may help you.

      Thanks for the feedback.

  22. Divi need to have sidebar option on each page/post even when Builder is active like Extra.
    Builder’s mimicked layout is not enough.

  23. I used the css given in this article to remove the sidebar and make the content to cover the full width and didn’t work completely for me. The sidebar is gone, but the content does not cover the full width in the desktop view. It works in the mobile view. I will appreciate any help, thanks.

    • Jason Champagne

      Rosy,

      Did you ever get this fixed? Are you using a standard page layout or using Divi Builder layout?

  24. Hi, I was afraid to remove Sidebar globally because a few pages do use a Sidebar. But I wanted it removed from all Events Calendar pages that pop up as full pages when you click on a particular event.

    I’m using Timely’s All-in-One Event Calendar plugin. I guessed that this code *might* work:

    /*** Take out the divider line between content and sidebar ***/
    #main-content .container:before {background: none;}

    /*** Hide Sidebar for Events ***/
    ai1ec_event-template-default #sidebar {display:none;}

    /*** Expand the content area to fullwidth ***/
    @media (min-width: 981px){
    #left-area {
    width: 100%;
    padding: 23px 0px 0px !important;
    float: none !important;
    }
    }

    It worked (got rid of divider and sidebar) but all the posts that were in sidebar are still visible, just shunted to bottom of full width page. I don’t want those. Nothing to do with actual event. People need to be able to print page with event details. Here are types of posts that STILL appear at bottom of full width page. How do I get rid of these on Calendar pages?

    Recent Posts…
    Recent Comments…
    Archives…

    Thanks!

  25. Me again. I used your take all sidebars out code—that got rid of the above “dangling posts” I don’t want. But now if I click on the blog posts—which are in a blog module with sidebar—they open up full width—too wide for easy reading. So I really want to fix above code to target only specific pages—not go global nuclear.

    /*** Take out the divider line between content and sidebar ***/
    #main-content .container:before {background: none;}

    /*** Hide Sidebar ***/
    #sidebar {display:none;}

    /*** Expand the content area to fullwidth ***/
    @media (min-width: 981px){
    #left-area {
    width: 100%;
    padding: 23px 0px 0px !important;
    float: none !important;
    }
    }

  26. Me again (sorry I’d edit my post if I could)—I forgot to put a “.” for class in front of “ai1ec_event-template-default #sidebar {display:none;}” That solved dangling posts. But new CSS in Custom CSS panel seems to be global, darn it. Blog posts have also lost sidebars:

    /*** Take out the divider line between content and sidebar ***/
    #main-content .container:before {background: none;}

    /*** Hide Sidebar for Events ***/
    .ai1ec_event-template-default #sidebar {display:none;}

    /*** Expand the content area to fullwidth ***/
    @media (min-width: 981px){
    #left-area {
    width: 100%;
    padding: 23px 0px 0px !important;
    float: none !important;
    }
    }

    #left-area {
    width: 100%;
    padding: 23px 0px 0px !important;
    float: none !important;
    }
    }

  27. Thanks Jason,

    What if i only wanted to hide the side bar items from mobile devices while keeping them visible on desktops?

    I’ve tried to change some of your code but so far no success. I’m using Divi Extra, Blossom and Monarch to give you some background.

500,591 Customers Are Already Building Amazing Websites With Divi. Join The Most Empowered WordPress Community On The Web

We offer a 30 Day Money Back Guarantee, so joining is Risk-Free!

Sign Up Today

Pin It on Pinterest