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!

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:


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:


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:


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!

The post How To Remove Sidebars From Divi appeared first on Elegant Themes Blog.

Powered by WPeMatico

Canadian Web Hosting [Ad]

Canadian Web Hosting [Ad]