By default, on pages the Page Layout Settings let you choose whether or not to use a left or right sidebar, or a full width layout. When activating the DIVI Page Builder, these options disappear. This makes sense, because if we would use the regular sidebar (as it appears in posts alongside the content all the way from top to bottom) we basically ruin all fullwidth possibilities of the DIVI Page Builder. The Page Builder will then “squeeze” into the regular content area.
Yet most of my clients need a good old sidebar, visible throughout their website, on all their pages and posts. For the moment they would need to refrain from using the Builder. The DIVI Page Builder admittedly offers a sidebar module to reintegrate it, but this comes with a few obstacles and limitations, namely that it is limited to a row, or if you use the speciality sections to make it full height, your column options diminish – and after all it is simply not the same as activating the regular sidebar with one click.
Becoming aware of all the aspects that need to be considered, I found my perfect solution: The DIVI Page Builder need to continue working in default mode, using the existing layout that offers full width pages – BUT on simple pages, where the clients will activate the page builder not to create elaborated landing pages, but simply to have access to columns, toggle, tabs or other basic functionality, they should be able to assign their sidebar.
First we need to bring the settings back into the Page Layout Meta Box. This can be achieved very simple by adding CSS to the admin area, which can unfortunately not be done directly into a stylesheet or the Custom CSS box, but by putting this code into the functions.php of your child theme. Now the option is back into the box and we can select our preferred layout.
|
1 2 3 4 |
add_action( 'admin_head', 'add_my_admin_styles' ); function add_my_admin_styles() { echo '<style>.et_pb_page_layout_settings { display: block!important;}</style>'; }; |
Next we need to prepare the page.php for this. After digging a bit through page.php and comparing with single.php, it turned out to be quite simple to achieve. Copy the original file from the DIVI folder into your child-theme folder, and add the following line after the get_header() right on top:
|
1 |
$divi_page_layout = get_post_meta( get_the_ID(), '_et_pb_page_layout', true ); |
Now replace the three lines that say
|
1 |
<?php if ( ! $is_page_builder_used ) : ?> |
with
|
1 |
<?php if ( ! $is_page_builder_used || $divi_page_layout!=='et_full_width_page' ) : ?> |
For your understanding: The first addition gets the set page layout for us, and then we extend the IF condition from “if the page builder is inactive” to “if the page builder is inactive OR if the page layout is not full width“. In this way, pages with activated page builder and a setting of left or right sidebar will now receive the HTML framework as the pages without page builder, including our sidebar! Also the title of the page will be displayed (yet I hope to also find out how to implement the Show/Hide Title setting from posts into pages. If you know how, let me know). To use the Page Builder in its default page layout with all fullwidth functionality, we just need to set the page layout to Fullwidth.
We can furthermore use the following CSS code to make the rows span across the whole width of our container, which is needed to avoid indent that only makes sense in the regular builder environment. By doing so the resulting page will initially (meaning after we activate the builder with all the page content taken over into a text module) look identical with the non-builder page, just that now we have all the modules available!
|
1 |
#left-area .et_pb_row {width: 100%;} |
That’s all, and after accomplishing I wondered first of all that it was so easy, and second of all why it doesn’t work like this in standard DIVI, especially because posts behave like this already. Maybe DIVI 2.7 brings it, let’s see. If you find any issues please report them in the comments.
UPDATE 2017-02-12: To learn how to use variable sidebars on different pages and posts – in this example according to different authors – read this article.
Great article mate, I totally don’t understand why this is standard functionality. I have 1 site with 45 pages, absolute pain to maintain as every sidebar has about 8 modules in it. Major shortcoming in Divi me reckons…
Hello, and thank you so much for your detailed instruction posts.
I ran into some troubles, and am wondering if you might be able to sort through where I went astray. I am more than happy to contract you on a formal basis to help me solve my problem — I don’t want to assume your time and goodwill are free.
I have a sketch of what I’m trying to do on the site page noted below if that would be helpful, but in short:
1.Transparent Full-width Top Navbar; 2. Full height Left sidebar (extends up under top nav ) anchored to left edge of window and sitting over full page BG image; 3.Logo in top nav bar sits on top of left hand sidebar (it’s content drops down to start below logo.
And, if you don’t have any time or patience to help me, I totally understand, but if you know of someone who you could point me to, I’d be very grateful :)
Dear Katie, sorry for the late reply, I didn’t find the time to take care for my site and the comments for quite a while now. I hope you meanwhile found your way. I aim to go through all my posted fixes to check and improve them and integrate them into a nice child-theme.
Loved this post! really helpfull!
I do have an addition in version 3.0.14.
In the page.php file just under at the bottom. is the following if statement:
I needed to remove the if statement (not the body!) in order to get it to work
Thanks for sharing Richwald. Unfortunately the line with the if statement was cut out, maybe by WP cleaning the comments from code :( In case you come back and remember you can try again, maybe using the code formatting.
I solved it buy comparing the code to that of single.php. You have to remove the if statements from the beginning and the end of the code which checks if builder is used and if not adds left-area and at the end adds the sidebar. I actually used the code from single.php at the beginning and the end.
Doh! (correction: ah-HA! See below…) I was really relieved to find this tutorial, I had beating my head against the wall trying to figure out why one seemingly normal page was missing the sidebar, then discovering that Builder ≠ Sidebar (except as a module, which is pointless for my setup).
Unfortunately, the above isn’t working for me on Divi 3.0.5/WP 4.6.1 – I get a blank white screen after the modifications. The culprit appears to be first page.php change ($divi_page_layout…). Without that, the page loads fine (without the sidebar, of course), but as soon as I bring it back, white screen again.
I’m not really a PHP dev, so I would have no idea how to troubleshoot the issue…
Addendum: Deleting the rest of the above because your hack DOES work in Divi 3.0.15, but without aforementioned $divi_page_layout… addition! That’s a huge relief, I wasn’t sure what the hell I was going to do. :) So thanks a lot!
Thanks Whit for the sharing. For me everything keeps on working with exactly the same code throughout the DIVI Updates, so I can’t replicate, but am glad that it solved for you.
Seriously awesome! Thank you for this. I never understood why divi does things this way. But this is the solution, I’ve been looking for sometime.
Thank you, that is what I needed!
Thanks! Exactly what I needed.
Could you please confirm if you was able to add the ‘Title’ in these page settings? Need to remove the title on this page. Unless you know how to do this by CSS? I want to implement this on my front-page as the Sidebar that I have doesn’t span properly to the top of the page like my post sidebars. Thanks in advance.
Hey Jakob, I didn’t integrate the title settings yet, but it is on my list of things I would like to see in my child-theme. It just doesn’t have any priority. You can remove titles manually in CSS. Use e.g. #post-777 h1 {display: none;} or #post-777 .entry-title {display: none;} replacing 777 with the post ID of your frontpage. Let me know if it works.
Thank you!! Shame on Divi guys for removing this :(
Considering the enormous gift of DIVI, I wouldn’t put shame on the guys :) But I agree that for me such an option is standard that I need on most of my websites, so I can also not really follow why it was not implemented, especially since it is possible with just a few changes. Anyhow, I have my child-theme in which this is implemented and ever since I enjoy my sidebar-available-on-pages DIVI version. I am glad you can enjoy it now as well and in case you are a regular website creator I recomment the plugin Duplicator to create a Divi Master that you just need to clone.
Someone just shared this with me on a FB group…and it’s exactly what I’ve been looking for. I tried following all the steps, and was successfully able to have the menu whoing Right/Left and Full-Width.
When I went ahead and tried to apply it to a divi build page, I did not see the the right or left sidebar.
This page is the published page that I am testing everything on.
http://divisetup.doralevich.com/testing/
Ii figured out Thank you! This is perfect for what I’ve been looking to do.
Now, the follow up:
How to remove Page Title:
How to add a Full-Width area above the page body and sidebar. Allowing me to add a hero banner above the main page.
I am glad to figured it out. If you want to add a static header on top, you might find this post useful:
http://sundari-webdesign.com/divi-background-image-header-transparent-logo/
Another post about “Adding an automatic static header image on all pages and posts – fully responsive” is waiting in the draft box for a while already, guess I should finish and publish it soon :)
Has anyone figure out how to add a full width hero section/image above the content and sidebar, below the navigation? When I try to add it, it still fits in next to the sidebar.
Thank you so much for this. Found exactly what I was looking for.
Thanks so much, absolutely awesome :-)
I just need to investigate why it does not work for layouts in the Divi library. Checked sidebar to left or right but sidebar does not appear on screen…
I am not sure if this has stopped working. I get a sidebar which is black and lines running down it on a fresh DIVI build. I cannot figure out what I am missing.
Also, it looks like someone took your content word for word. https://www.timeweb.co.uk/3386/divi-regular-sidebar-page-builder-pages/
Nevermind! :) Thank you! I missed the part that said “change the 3 lines” I only changed the first line when I had the issue. THANK YOU!!! I have been frustrated with this issue in DIVI for years! Today I could not take it anymore and I took the time to research. You are awesome!!!! :)
THANK YOU!!!!!!! This post saved my butt with a client!
Good article, thanks for posting it. I couldn’t figure out why some of my older pages didn’t have the sidebar settings option. Article saved me some time for sure!
Thanks a lot!
Does this still work for you? I tried it, and after replacing the first WordPress throws a 500 error. I am using WordPress 4.9.9 with Divi 3.20.2 running on PHP 7.3.
And by the way, I see 4 of these lines in page.php.
Success! I got it working by replacing only the first and the last occurrence of
Having exhausted all avenues, I can say that this still works (Thank you sooooo much) 0n the most recent Divi and WP 5.1 with “no Gutenberg” plugin
Still works in 2019, thanks ;-)
I hope this is still being followed! It’s a great article, and *almost* exactly what I’m looking for. I made all the changes; I have the admin options and the sidebar is being output, but below the content.
https://act.hawkfeather.com/firefighter-video-samples/
Help would be appreciated.
Does this still work with Divi 4? It seems not, at least the update broke it on my site.
Cant seem to get this to work. newest DIVI.
I now found what changed with Divi 4: somehow the wrong CSS class “et_no_sidebar” gets set to the body tag. Before v4 it used to be “et_right_sidebar” in my case.
Where can I set the correct class in Divi/Wordpress?
Yay, I got it to work on my site with this fix in functions.php:
//fix for Divi 4
add_filter( ‘body_class’, function( $classes ) {
foreach($classes as $key => $class) {
if( $class == ‘et_no_sidebar’ ){
$classes[$key]=’et_right_sidebar’;
}
}
return $classes;
}, 1000);
Super, thanks for sharing with us!