Jonathan Bossenger

FullScreenDiviPageBuilder

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.

Posted

in

by

Jonathan

Tags:

,

Comments

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

  1. dani dwiputra Avatar
    dani dwiputra

    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 😀

    Reply
    1. Jonathan Avatar
      Jonathan

      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.

      Reply
  2. Terry Hale Avatar
    Terry Hale

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

    Reply
  3. Christoph Avatar
    Christoph

    Great addition for Divi! Thanks Jonathan.

    Reply
    1. Jonathan Avatar
      Jonathan

      My pleasure Christoph, thanks for your support.

      Reply
  4. Toby Avatar
    Toby

    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?

    Reply
    1. Jonathan Avatar
      Jonathan

      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.

      https://github.com/jonathanbossenger/divi-full-screen-page-builder-modules

      Reply
      1. Corl Avatar
        Corl

        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

        Reply
        1. Jonathan Avatar
          Jonathan

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

          Reply
  5. Ascar Avatar
    Ascar

    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

    Reply
    1. Jonathan Avatar
      Jonathan

      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.

      Reply
  6. 10 Free And Handy Divi Plugins – Divi Notes

    […] GET IT […]

    Reply
  7. John Monahan Avatar
    John Monahan

    This is awesome! Thank you so much

    Reply
  8. Ascar Avatar
    Ascar

    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

    Reply

Leave a Reply to dani dwiputraCancel reply

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