How to Change the Divi Sidebar to the Left Side

  • Post author:
  • Post category:Blog
  • Post comments:0 Comments
You are currently viewing How to Change the Divi Sidebar to the Left Side

Here is how you change the Divi sidebar from right to left by default in WordPress using simple CSS.

So I love the Divi Theme for WordPress. It offers a lot of great features and is easy for most people to use. I love that I don’t have to re-invent the wheel every time I’m building a website, and I can customize it brilliantly. It’s also fast and responsive, so that’s my plug for Divi. However, there was one problem I wrestled with for far too long before finding the perfect answer.

I wanted to move my sidebar from the default right position to the left. It may not seem like a big deal, but there is some intriguing research surrounding blog layouts and where the user’s eyes fall first. So for this particular project, I wanted to have the engagement first and foremost on the layout. That meant that the “Read More” stuff needed to be one of the first things the user noticed.

Divi doesn’t have a setting for moving the sidebar to the left for every page. You can use the Page Builder that comes with the theme to manipulate the sidebar, but there are limitations. For instance, you can change it for the blog page, but not for the automatically created pages for categories and archives.

I’m a pretty good Googler, so when I discovered that I couldn’t easily find how to change the divi sidebar, I decided to help you guys out and write it up!

Go to your Divi Theme Options and add below CSS to your Custom CSS area

divi sidebar left css

.et_right_sidebar #main-content .container::before{
left: 29% !important;
right: auto !important;
body #page-container #left-area{
float: right;
padding-left: 3%;
padding-right: 0;
body #page-container #sidebar{
padding-left: 0;
padding-right: 3%;
float: left;

Here is an example of the end results:
divi sidebar

Note that the width is 29% here because my sidebar is wider than the default. You can adjust this width to suit your own needs.

.et_right_sidebar #main-content .container::before{
left: 29% !important;
right: auto !important;

Let me know if you have any questions!


Jen has been a freelance web designer for over 20 years. In that time she has developed a keen eye for design as well as the technical skill to build top-tier online systems, funnels, and sites. Her loves include her teenagers, her boxers, Bentley & Rena, her Converse and anything Star Wars.

Leave a Reply