Ok, so how many of you Divi users love the 2/3 main section and 1/3 sidebar section options in pages that use Page Builder but don’t like how all the other pages are 3/4 by 1/4 by default?
Well there is an easy CSS fix for that.
If you are working with a child theme you can go to Appearance>Editor and open your stylesheet. If not, go to Appearance>Divi Theme Options>ePanel>Custom CSS (which is located at the bottom of the ePanel)
And just add this. The mobile friendly code is included.
/*Change Post, Project, Archive Page Sidebars from one fourth to one third*/
.container::before { display:none; }
.single-project div#left-area {width: 700px;}
.single-project div#sidebar {width: 300px;}
.single-post div#left-area {width: 700px;}
.single-post div#sidebar {width: 300px;}
.archive div#left-area {width: 700px;}
.archive div#sidebar {width: 300px;}
.search div#left-area {width: 700px;}
.search div#sidebar {width: 300px;}
/* LAPTOP - IPAD LANDSCAPE (981-1100) */
@media only screen
and ( min-width: 981px )
and ( max-width: 1100px ) {
.single-project div#left-area {width: 630px;}
.single-project div#sidebar {width: 240px;}
.single-post div#left-area {width: 630px;}
.single-post div#sidebar {width: 240px;}
.archive div#left-area {width: 630px;}
.archive div#sidebar {width: 240px;}
.search div#left-area {width: 630px;}
.search div#sidebar {width: 240px;}}
/* TABLETS - IPAD PORTRAIT (768-980) */
@media only screen and (max-width : 980px) {
.single-project div#left-area {width: 700px;}
.single-project div#sidebar {width: 700px;}
.single-post div#left-area {width: 700px;}
.single-post div#sidebar {width: 700px;}
.archive div#left-area {width: 700px;}
.archive div#sidebar {width: 700px;}
.search div#left-area {width: 700px;}
.search div#sidebar {width: 700px;}}
/* MINI TABLETS - IPHONE LANDSCAPE (480-767) */
@media only screen and ( max-width: 767px ) {
.single-project div#left-area {width: 400px;}
.single-project div#sidebar {width: 270px;}
.single-post div#left-area {width: 400px;}
.single-post div#sidebar {width: 270px;}
.archive div#left-area {width: 400px;}
.archive div#sidebar {width: 270px;}
.search div#left-area {width: 400px;}
.search div#sidebar {width: 270px;}}
/* CELL PHONES - IPHONE PORTRAIT */
@media only screen and ( max-width: 479px ) {
.single-post div#left-area {width: 280px;}
.single-project div#left-area {width: 280px;}
.single-project div#sidebar {width: 280px;}
.single-post div#sidebar {width: 280px;}
.archive div#left-area {width: 280px;}
.archive div#sidebar {width: 280px;}
.search div#left-area {width: 280px;}
.search div#sidebar {width: 280px;}}
Well that’s all for now. I hope you find this article useful.
Well that’s all for now. I hope you find this article useful.
The following two tabs change content below.
Geno is an entrepreneur who has been designing websites since 1996. He also enjoys all things design, traveling, hanging out with friends, encouraging other believers, and experimenting with new technologies. When not doing any of the above, you can find Geno blogging or writing Divi customization tutorials here on Quiroz.co.
H geno, does it matter if the sidebar is on the left or right ? I’m assuming this code will work for either. Thanks, I totally need this .
Excellent question Susan. I have not tested this out with a sidebar on the left. Let me know if you come across any problems and I would be more than happy to give it a look. If I get some time this week, I will also try testing it out and post any notes I think may be useful on this post.
Hi Geno,
does this code also work for a sidebar left and right? I would like sidebar, content, sidebar, but the content area is really small. Would love to hear!!
Thank you,
Lotte
Hi Lotte. By default there is no option for such a layout on the posts/project/archive/category pages. You would have to enable Divi’s Page Builder feature for those types of pages. You can use the Divi Booster plug-in to turn that setting on. You can get it here http://www.wpthemefaqs.com/divi-booster-the-easy-way-to-customize-divi/?ref=10
Hi Geno,
Thanks for the code. How can I add the category pages to this code. I don’t know what the template name for a category page would be.
Never mind. I figured out the issue. 🙂
🙂
For some reason, this code did not work on my site – my sidebar is still 1/4 – any ideas where I might be going wrong?? I tried adding the code in the Divi theme options section and I also tried it in the Custom CSS section. Thanks in advance 🙂
Hi Sherri. I’m not sure. Can you post a link to the page in question so that I can take a look?
This is great Geno! BTW the images used for avatars are covering text for comments on my screen. Hope that’s helpful!
Colin Smith
Thanks Colin.
Hiho!, i had a problem in divi widgets and i hope that maybe you could help me a little bit!. I dont know why but today i have only three colums in the footer (without edit anything in css or php)
i tried to put diferent widgets in the fourth colum but this make the fourth colum show just below the third colum.
I have quit diferent widgets from every place of the footer widgets and add diferent widgets too but this didnt work either.
Could it be because i am using now the theme in another language (spanish)?, this is really weird i think and i have no idea how to fix it!
Try deactivating your plugins one at a time to see if there is a conflict with one of your plugins. Be sure to clear your cache on your browser as well. Each time.
Exactly!, one plugin was making the error, but right now i dont know how to fix it, the plugin is aeolus portfolio, i think is a great plugin and i want to use it yet, so any idea to fix this thing? or i should just take another portfolio plugin?
PD: the idea is only show photos in the proyects, maybe it could be best get other plugin for gallery instead of portfolio because it get the user to another page.
It could be best open a lightbox where he/she could see all the images without leave the proyect page, but i have not found a beautifull good plugin for this, could you recommend me one?
You can use the default image gallery that comes with WordPress. When you Add Media to your project page it gives you the option to insert a gallery slideshow or gallery grid. They should open in a lightbox.
I dont think this is working in DIVI 2.4 and above. Is there a way to do this in newer versions?
Thanks Rene. Divi 2.4 changed the way they handle column widths and moved from fixed widths to flexible widths using percentages. You could try manipulating this code by using percentages and !important tags instead of the px.
Hi Geno… excellellent tutorial. I’m looking to make a diagonal left sidebar and diagonal right sidebar. Do you have a tutorial for that?
Thanks.
I don’t have one yet but it sounds like something to add to my list 🙂
Hey there
I’ve copied the lines into my divi css file. However, nothing ever changed.
I want a wider side bar on my blog http://www.gympferormance.ch/blog
Can you help me out?
Thanks in advance
Are you using page builder on that page? I tried the link but the site was down 🙁
I use page builder of divi.
I’ve misspelled my own domain name. How embarrassing.
-> http://www.gymperformance.ch/blog
The code is for pages that do not use the Page Builder feature such as search results, category, tag and single posts not using Page Builder. If you are using Page Builder make sure you select the 2/3 – 1/3 column option like shown here http://screencast.com/t/LCeSEUgj8GZB
Hi there
I tried your code and seems work fine for standard Divi width.
I’m using 1180 width for content and I tried with an 880px for the left area to achieve the same result, but resizing the browser window under 1400px broke something and put the sidebar under the content, even if I still have room to show it on side. Do you have any suggestion? I’m missing some media query i had to look to?
The newest Divi has this option in the Customizer making this tutorial unnecessary for anything other than learning purposes or for legacy Divi users 2.3 and below. Sorry about that. I just hate to remove it in case I ever need it as a reference for a client with an old Divi install 🙂
Yep! I noticed that right after posting 🙂 thanks anyway
Geno, what is your solution for making sure all templates display the same sidebar weather I’m using the default editor or the divi editor. I’m sure you’ve noticed that the default design for both of those pages is very different.
Yes, the sidebars are different. We have another tutorial for formatting the sidebars, and if you remove the class references in the CSS it will apply the formatting to the divi builder sidebars and the normal WordPress sidebar. Here is the link to that tutorial: https://quiroz.co/modify-your-divi-search-widget-and-widget-titles/
I believe she is talking about keeping the page template sidebar active on the pages even when using Divi Builder? If so, I have the same issue – when I activate the Divi Builder the sidebar disappears from the page and it automatically goes full width. I don’t want to add a sidebar module in the Builder, I want the sidebar from the page template to be displayed. How can I do this?
Hmmm… I do not know of a way to do that without using the sidebar module. My guess would be that it would require modifying the php files.
Hello,
Can I create Section with Blog and Sidebar with 3 blog post for each row instead of the default 2.
bpost bpost bpost sidebar
bpost bpost bpost
Thanks in advance
Best Regards,
Alex
Its possible with quite a bit of CSS. Unfortunately I do not have a tutorial on that just yet.