Select Page

How to Hide or Remove Divi Sidebar?

  1. Home
  2. »
  3. Divi
  4. »
  5. How to Hide or Remove Divi Sidebar?

Mozsteps content is free. When you purchase through referral links on our site, we earn a commission. Learn More

remove divi sidebar
  • Facebook
  • Pinterest
  • reddit
  • LinkedIn
  • Myspace
  • Tumblr

For some reason you might need to remove Divi sidebar either from the whole website or from specific pages but let's face it, if you're new to the Divi theme and don't have any experience building websites then removing things is not that easy!

Sometimes, you don't find the options you want available and built-in the settings of the theme you bought, or you just afraid to try then cause a problem to your website. For this reason, I have created this full article to help you out.

So, we'll be explaining all the points you need to know about the Divi theme sidebar then spotlight on how to remove them the right way mentioning all the various options and methods available from hiding it from the whole website to removing it from specific pages.

Get ready … bring your cup of coffee and Let's Get into it!

Things to know

1 – Reasons to remove the Divi Theme sidebar

Every individual has their own reasons to get rid of his website sidebar and If you're designing websites for clients, you'll definitely encounter a situation where the client wants to remove the sidebar from the entire site or just from specific pages.

The following are some reasons why you would need to remove Divi sidebar:

1 – Building a custom template so you need to remove the sidebar and create a more customized one with the information you need.

2 – Running an e-commerce shop and you want to remove the sidebar from all the product pages to remove distracting the buyers.

3 – You're trying to enhance the user experience in your website especially in the blog posts to let your readers read more comfortably without distracting them with a sidebar full of content and ads.

4 – You're designing a one page website and you don't need the sidebar to appear.

Oftentimes, you might need to write PHP codes to customize a theme but as a total beginner, I don't recommend you this road. I always recommend that you just use some lines of CSS code to be able to personalize your website easily and effectively.

2 – Important Before You start

Before we start doing any changes to our website, it's very very important that you use a child theme instead of modifying the functions.php and style.css file of the main Divi theme. Now, you might ask me why?

Simply, because when you start implementing and using code snippets to customize the theme the way you want, it's saving your changes in the theme main files once you hit “save changes”.

The main problem is a new update of the Divi theme is released and you go ahead and update the theme all the files we'll be replaced by the new updated ones which mean all the customizations you did will be gone away. which the worst thing that can ever happen to you.

By having a child theme in place you'll be able to customize it without worrying about the update as it only affects the parent theme. You'll be safe and save a lot of headaches (:

How to Remove Divi Sidebar?

Now that we have discussed all the important points to keep in mind, let's see the process of removing the sidebar from your website.

1 – Remove Divi sidebar from entire website

To remove the Divi sidebar from the entire website, it's easier to use CSS code by following these simple steps:

Copy the following code snippet:

/** Remove Sidebar from entire site **/
#sidebar
{
   display:none;
}

1 – Login in to WordPress dashboard, Hover over “Divi” the choose “Theme options”

Divi theme customizer
  • Facebook
  • Pinterest
  • reddit
  • LinkedIn
  • Myspace
  • Tumblr

2 – Paste the code you just copied in the additional CSS box (as shown below)

WordPress theme additional CSS
  • Facebook
  • Pinterest
  • reddit
  • LinkedIn
  • Myspace
  • Tumblr

Perfect! the sidebar is now removed globally from your website.

Note: In case you've already set up a child theme, then go ahead and paste the code snippet we provided in the style.css file and you'll see the same result.

2 – Remove Divi sidebar from all pages

Now, we want to remove the sidebar from all the pages only and leave it in the rest of website.

Here are the steps to remove Divi sidebar from all pages of your website:

1 – Go to Appearance > customize or alternatively, Divi > Theme options

2 – Copy and paste the following CSS code snippet in the custom CSS box

.page-template-default #sidebar {
    display:none;
}

Now, that the sidebar is removed, if you want to expand the left area content of the pages to be full width then you can use the following code:

/** Make The Pages content area full width **/
@media (min-width: 981px){
.page-template-default #left-area {
    width: 100%;
    padding: 23px 0px 0px !important;
    float: none !important;
}
}

Hide the sidebar from a specific page

To remove Divi sidebar from a specific page follow these steps:

1 – In the WordPress left-hand side menu click on “pages”

WordPress pages
  • Facebook
  • Pinterest
  • reddit
  • LinkedIn
  • Myspace
  • Tumblr

2 – Hover the mouse on “Edit” just below the name of your page then look at the link bottom left corner, we need the number located after “post=” . in my case it's 5 as shown below.

wordpress edit page
  • Facebook
  • Pinterest
  • reddit
  • LinkedIn
  • Myspace
  • Tumblr

3 – Go to Divi > Theme options in the custom CSS section paste the following lines, don't forget to change the number 5 with the number shown in the link in your case.

.page-id-5 #sidebar
{
   display:none;
}

3 – Remove Divi sidebar from all posts

Now let's suppose you want to get rid of all the posts sidebar and leave it in the rest of the website.

Here are the steps to remove Divi sidebar from all posts of your website:

1 – Go to Appearance > Customize or use the custom CSS box in the the Divi theme options

2 – Copy and paste the following CSS code snippet in there

.post-template-default #sidebar
{
   display: none;
}

The sidebar of all posts is removed , if you want to expand the left area content of the posts to be full width then you can use the following code:

/** Make The Posts content area full width **/
@media (min-width: 981px){
.post-template-default #left-area {
    width: 100%;
    padding: 23px 0px 0px !important;
    float: none !important;
}
}

Hide the sidebar from a specific post

Here's how to remove the sidebar from a specific post in Divi:

Just like we did to the pages, you'll go to “Posts” in the WordPress dashboard. Hover over “Edit” below your target post name, see the number located after “post=”. In the example below the number is 3 so you need to replace it with your own one.

.postid-3 #sidebar
{
   display: none;
}

4 – Remove sidebar from Divi product pages

If you're running an e-commerce store using Woocommerce and Divi theme then you might be looking to remove the ugly sidebar from your product pages which is something I also like to do.

Here are the steps to remove Divi sidebar from Divi product pages of your website:

1 – Add the CSS code snippet in the custom CSS box by going to Divi > Theme options or in the additional CSS box by going to Appearance > customize

/** remove sidebar from product page **/
.single-product #sidebar 
{
    display:none!important;
}

similarly, to make the the product page full width here's the CSS code to use:

/** Make The Product page area full width **/
@media (min-width: 981px){
.single-product #left-area {
    width: 100%;
    padding: 23px 0px 0px !important;
    float: none !important;
}
}

Hide divi sidebar from a specific product page

To remove divi sidebar from a specific page you can follow the pretty much the process we did for posts.

Once you get the number of that particular product page from Products > All Products, replace the number “102” with your own and copy-paste the code in the custom CSS box in Divi theme options.

.postid-102 #sidebar
{
   display: none;
}

5 – Remove sidebar from Divi category pages

If you're in a situation where you need to hide the sidebar in category pages only like I personally did for this website then let me tell you that this is also possible.

Well, to remove the sidebar from Divi category pages follow these steps:

1 – After logging in to your admin dashboard, from the left-hand side menu, hover over the “Divi” tab and select “Theme options”.

2 – In the custom CSS box, copy and paste the following CSS code snippet

/** hide sidebar on category pages **/
.category #sidebar 
{
	display: none;
}

Hide the sidebar from a specific category page

Every category has a unique ID number so all what you have to head over to Posts > categories, hover the mouse on “edit” link below the category name as shown below.

wordpress category pages
  • Facebook
  • Pinterest
  • reddit
  • LinkedIn
  • Myspace
  • Tumblr

Look at the left bottom corner of your screen you will see a link, the one we need is the number located after “ID=” and it's 19 in my case (as you clearly see from the screenshot below)

remove wordpress sidebar
  • Facebook
  • Pinterest
  • reddit
  • LinkedIn
  • Myspace
  • Tumblr

6 – Remove Divi sidebar from search results page

If you have enabled the search box on your Divi website, then users we'll see a page of search results whenever they use the search functionality. it also has the same default sidebar.

Here are the steps to follow to remove divi sidebar from search results page:

  1. after logging in to WordPress, From the left-hand side menu of your screen go to Divi > Theme options
  2. scroll down until you see the custom CSS box then copy and paste the following CSS code snippet.
/** hide sidebar from search result page **/
.search-results #sidebar 
{
	display: none;
}

7 – Remove The Divi sidebar line (border)

When you remove the sidebar anywhere on your WordPress website, you'll notice a small line that divides between the main content area and the sidebar. it's actually the border right set to the content area using CSS.

Divi sidebar line
  • Facebook
  • Pinterest
  • reddit
  • LinkedIn
  • Myspace
  • Tumblr

Here are the steps to remove divi sidebar line (border):

  • Go to Divi Theme Options, scroll down until you see the box of custom CSS then copy and paste the following CSS code snippet in there.
/** hide divi sidebar line **/
#main-content .container:before
{
		background: none;
}

Congratulations for making it this far and learning how to remove Divi sidebars.

The mentioned CSS codes will also work if you're using a child theme, copy and paste the desired codes inside style.css file.

Further Reading:

Roundup

You might encounter a situation where you need to remove the sidebar from your website or a specific page, knowing these tips would make your life easier to a greater extent particularly if you're designing websites with the Divi theme for your clients.

If still have any questions kindly drop them in a comment below. Otherwise, let me know what do you think about removing the sidebar from a website? is it a good idea?

Cheers!

0 Comments
Submit a Comment

Your email address will not be published. Required fields are marked *

Start a blog at 2.75$/mo

Categories

Pin It on Pinterest

Share This