Are you looking to remove the sidebar from your Divi theme? If yes, this guide can definitely help you.
Elegant Themes’ Divi theme is very popular among business owners all over the world, and it has a responsive design that works across all devices and browsers. One of the most attractive features of the theme is the sidebar, which can display important links, social media feeds, and even blog posts.
However, some website owners prefer using a full-width layout with no sidebar for several reasons that I have mentioned below. In this blog post, I will show you how to remove the sidebar from your Divi theme pages.
So, without any delay, let’s start with our guide.
Why Remove Sidebar From Your Website?
There are various reasons why you might want to remove the sidebar from your website. Maybe you want to create a more minimalistic design, or perhaps you want to focus your visitors’ attention on a specific area of your site. Whatever the reason, removing the sidebar can be a great way to streamline your site’s design.
Here are a few things to keep in mind before making this change:
- You need to make sure the site’s content is easily accessible without the sidebar. You can achieve this by creating a clear hierarchy for the content and by properly using design elements like whitespace to guide visitors’ eyes around the pages.
- While removing the sidebar, you need to consider whether it affects the website’s functionalities. In case there are any important features of links located on the sidebar, you must relocate them to another location.
- Not every website is designed in the same way, so depending on the website you’re building, you need to make it more mobile-friendly. It’s because the number of users accessing the internet on their smartphones is increasing day by day, and it’s important to ensure that your website is easy to navigate and use on smaller screens.
These are some of the reasons you need to keep in mind before removing the sidebar from your Divi website. By removing them from your website, you can simplify the website and make it easier for visitors to find what they’re looking for.
But before removing the sidebar, it’s important to carefully plan out the changes to the website’s design and functionality. This can involve conducting user testing and analyzing site metrics to understand how visitors currently use the website and how the changes will impact their experience.
How to Remove Sidebar in Divi Theme
There are three different methods to remove the sidebar in the Divi theme, depending on the type of page you want to remove the sidebar from. These methods are;
- Removing Sidebar From Divi Post or Page
- Removing Sidebar Using Divi Custom CSS
- Removing Sidebar From WooCommerce Pages
Here, we’ll take you through each and every step in detail, so that you will no longer have any issues while removing the sidebar from your Divi theme.
Removing Sidebar From Divi Post or Page
Probably the most common place where Divi users want to remove a sidebar is from an individual post or page. If you’re one of them and want to remove the sidebar from specific posts or pages, then here are some simple steps you can follow;
If you want to remove the sidebar from specific posts or pages, simply go to your WordPress dashboard and open the post or page you wish to remove the sidebar from (if you wish, you can also create a new page).
Now, click on the “Setting” icon navigate to the “Divi Page Settings,” and select “No Sidebar” from Page Layout as shown in the above image.
Once you’ve made the changes, click on the “Publish” or “Preview” buttons to see the live changes. Now, you’ll see the sidebar has been removed from your website.
You need to follow the same procedure for removing the sidebar from divi pages.
Removing Sidebar Using Divi Custom CSS
In this method, we will use the custom CSS feature. This method is perfect for those who want to remove the default sidebar that comes with the default theme page layouts.
Here are a few quick steps of the procedure:
To begin with, all you need to do is copy the provided code and paste it into your clipboard. Once you’ve copied the code, we’ll proceed with the next step outlined in this guide.
Once you’ve copied the code, you need to navigate to the “Divi > Theme Options“; here, you’ll find the “Custom CSS” option, as shown in the image above.
Once you’re on this page, you simply need to paste the code under the “Custom CSS” box and save the changes. This code will do the following things on a website:
- It removes the divider line between the content and sidebar by setting the background of a pseudo-element to transparent.
- After this, the code will hide the sidebar by setting the display property of the sidebar element to none.
- Lastly, it expands the content area to fill the entire width of the viewport and removes any left or right margins or padding when the viewport is at least 981 pixels wide.
Removing Sidebar From WooCommerce Pages
Divi is also an excellent theme for eCommerce stores as it offers tons of functionalities that make a store more accessible to visitors. And, if anyone has WooCommerce installed on their website, they can choose from multiple page layout settings for pages like Shop, Category, and Product.
And even if you’re using WooCommerce on your website, the Divi theme allows you to easily change or remove the sidebar from your store.
Here is how you can do that:
If you want to remove the sidebar from the “Shop” or “Product Category” pages, all you need to os is go to “Divi > Theme Options” and navigate to “Shop Page & Category Page Layout for WooCoomerce“.
Once you’re on this page, you need to select the “Fullwidth” option from the dropdown items, as shown in the above image. And you also need to select the “No Sidebar” option in the “Sidebar Layout“.
After this, save the changes and refresh your website.
Frequently Asked Questions (FAQs)
Here are some common questions that users may have about removing the sidebar in the Divi theme:
Q. How do I remove the sidebar in the Divi theme?
There are several methods for removing the sidebar in the Divi theme. You can either edit the page settings in the Divi builder, use the Divi theme customizer, or add custom CSS code to hide the sidebar.
Q. Is it possible to remove the sidebar on specific pages only?
Yes, the Divi theme allows you to remove the sidebar from a specific page or post. To do so, all you need to do is open your post and then select “Divi Page Settings” > “Page Layout” and hide the sidebar from there.
Q. Can I still use the sidebar on some pages but not others?
Yes, you can choose to use the sidebar on some pages but not others. You can select the “Default” layout option in the page settings or customizer to use the theme’s default sidebar settings.
This will allow you to use the sidebar on some pages and remove it on others.
Q. Will using custom CSS code affect the overall design of my website?
If you’re using custom CSS on your website and making changes on the site level, then it can surely affect the overall design of your website. So, its always better to use this method with caution, and its always good to test your code on a staging or development site before implementing it on a live one.
Plus, we highly recommend taking a complete backup of your website before proceeding further with this step.
In this article, we’ve discussed how to remove the sidebar from your Divi theme pages. Removing the sidebar can provide several benefits, such as improving the readability of your website and decluttering the page layout.
And with the steps we shared in this guide, you can remove the sidebar from any post, whether it’s a normal post, page, or even a WooCommerce page. However, if you still have queries in your mind, feel free to comment in the below section. I will try to help you as much as possible.
Let’s meet in the next article!