DIVI: Regular Sidebar on Page Builder Pages

wordpress-divi-sidebar-04By 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.

wordpress-divi-sidebar-05Becoming 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.

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:

Now replace the three lines that say


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!

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 3.0 will include it, let’s see. If you find any issues please report them in the comments.

Share This