How to remove the sidebar on the Divi theme on listing archive pages

In this example we are going to show you how to remove the sidebar from the Divi theme on the listing archive pages. These pages are also your search results page when a user performs a listing search.

Removing the Sidebar from Divi's page template can be done with the Divi builder when using [listing] shortcodes. However the Divi builder doesn't provide options for archive pages. Thankfully with a bit of CSS as explained below you can remove the sidebars from your listing archive pages.

How to Remove Sidebars from Divi

Tutorial based on How To Remove Sidebars From Divi

CSS Solution

How to Remove Sidebars from Divi on Pages with Shortcodes using Divi Page Settings

This method works on a per page basis. So lets say you create a page called /for-sale/ and use the [listing] Shortcode you can select fullwidth under the Divi Page Settings.

Here is a demo of a for sale page with the Full Width option selected in the Divi Page settings.

Hiding The Divi Sidebar Globally on Listing Archive an Search Results Using CSS Only 

To hide the sidebar on all your listing archive pages like /property/ , /rental/ , /land/ which are also your search results page you can add some custom CSS to your child theme style.css file. Or you can use the Divi > Theme Options and add the CSS in the Custom CSS box. Another alternative is to use the WordPress Admin Bar > Theme Customiser > Additional CSS.

Hide the light grey separator line that divides the content and sidebar with the following CSS.

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

Next, add this CSS to expand the content on the listing archive pages to full width:

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

Lastly, add this CSS to hide the Sidebar:

/*** Hide Sidebar ***/
.epl-post-type-archive #sidebar {
	display:none;
}

Altogether your CSS should look like this:

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

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

/*** Hide Sidebar ***/
.epl-post-type-archive #sidebar {
	display:none;
}

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

Disabling the Sidebar Globally by editing archive-listing.php File

Whenever you want to edit theme files its always better using a child theme. Once you have a child theme installed and activated, add the template files you want to edit into the child theme folder. Now when you update the parent Divi theme your edited files in your child theme will not be removed or altered. 

In order to disable the sidebar globally on your listing archive pages, open your child theme folder (using a FTP client and text editor) and create a file called archive-listing.php and copy the contents from the file located in the Easy Property Listings plugin. We specifically added the Divi templates to Easy Property Listings.

The file is locate in wp-content/plugins/easy-property-listings/lib/templates/themes/divi

There are two files, one for the listing archive and another for a single listing.

• archive-listing.php
• single-listing.php

Inside both of these files are the hook that generates the sidebar. <?php get_sidebar(); ?> change that to <?php // get_sidebar(); ?> which will disable the sidebar when the template is loaded.

Once that is completed you will need to use CSS to hide the Grey line and widen the content to full width.

Archive CSS

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

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

Single CSS

This is the full example code for making single listing pages full width.

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

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

/*** Hide Sidebar (not needed if sidebar removed in single-listing.php )***/
.epl-single-listing #sidebar {
	display:none;
}