Make your Divi Page Builder go large.

I tend to prefer to use the full extent of whatever screen I am on to it’s fullest effect. Typically I have two screens, my 23inch widescreen monitor and my 17inch laptop screen. The monitor is for coding and all coding related things and the laptop screen is for testing in browsers as well as the odd VLC or YouTube window.

One thing I hate is when I am working inside a modal view that doesn’t take full advantage of whatever screen I am on. This is a special pain point whenever I am using the Divi Builder, which makes extensive use of modals.

So I took a quick look under the hood and it turns out setting the modal to fill the screen isn’t that hard to do. A few lines of CSS code later and viola, Divi Full Width Page Builder plugin.

I haven’t tested this with every instance of every modal, but I’m looking forward to trying it out.

If you want to install it as a plugin, you can do so from the Git Hub repo. Alternatively copy and past the PHP code from the full_screen_page_builder.php file into your functions.php.

Happy Diviing.





14 responses to “Make your Divi Page Builder go large.”

  1. dani dwiputra Avatar

    This is great! Thanks.

    There’s one particular modal that didn’t change though, it’s the “Divi builder Settings” (the one next to export/import), other than that I think (so far) everything else is very spacious 😀

    1. Jonathan Avatar

      Hi Dani

      Thanks very much.

      I’d appreciate it if you could log an issue in the git hub repo, that way I won’t loose it and I can fix it when I have a moment.

  2. Terry Hale Avatar
    Terry Hale

    Just now seeing this. Very helpful, I love it. Thanks!!

  3. Christoph Avatar

    Great addition for Divi! Thanks Jonathan.

    1. Jonathan Avatar

      My pleasure Christoph, thanks for your support.

  4. Toby Avatar

    Hi Jonathan – very helpful plugin, I noticed the preview screen remains fixed width (at around 50% of my desktop and aligned left), would it be a difficult modification to achieve say 80% center aligned?

    1. Jonathan Avatar

      Hi Toby, thanks for the feedback.

      It shouldn’t be. Perhaps you could log this as an issue on the GitHub repository and I will try to fix it.


      1. Corl Avatar

        Hi. Adding this to your plugin helped me solve the preview problem:

        /* Increase the preview width for more accurate previews while editing a module */
        .et-pb-item-previewing .et-pb-preview-tab {
        width: 100% !important;

        Thanks so much for this plugin,

        1. Jonathan Avatar

          Thanks Corl, feel free to submit an issue or a pull request on the GitHub project so that I can merge in the changes.

  5. Ascar Avatar

    Hello, Jonathan.

    Your code is a big thing! I paste it into functions.php file first thing on every new site.

    I wanted to ask you if you can suggest how the code should be modified so that I get vertical scrollbar. This might make it even better for some users.

    Thank you very much

    1. Jonathan Avatar

      Hi Ascar, thanks for your support.

      Interesting question, it would probably be a combination of increasing the height of the parent div and adding an overflow property.

  6. John Monahan Avatar

    This is awesome! Thank you so much

  7. Ascar Avatar

    Hello, Jonathan.

    Divi keeps changing 🙂 Your code works great as before. However, for as long as it is in the functions.php the Load Layout window is misplaced now and pushed to the left of the screen (so it is not centered) and a little down which makes the the button to select/load layout inaccessible.


    Can you try to reproduce?


Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

%d bloggers like this: