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.

Buy my Divi Plugins from
Elegant Marketplace.

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

  1. 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. 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. 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. 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,
        Corl

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

  3. 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. 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.

  4. 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.

    https://snag.gy/nPjMCb.jpg

    Can you try to reproduce?

    Thanks

Leave a Reply

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