How to Change the Divi Sidebar to the Left Side

 Web Design %tags

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

 Web Design %tags


.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:
 Web Design %tags

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!

Leave a Reply

%d bloggers like this: