When I first saw the Divi theme from Elegant Themes (ET) I immediately fell in love with it. The theme is flexible enough to create ANY type of website with a drag and drop interface and loads of different modules for any purpose you can think of.

I started using Divi immediately as I had to develop the new website of the company where I was working at the time. Development was fun and fast. And although I have a 24″ monitor I was still a bit annoyed of the unused or not effectively used space by the Page Builder. So I decided to tweak it a bit. Some of it has already been implemented by ET in v2.0, but there are still some tweaks which make better use of the screen space.

The Module Settings

  1. I don’t really understand why the module settings window in not utilizing the whole height of the screen. It’s cutting off 15% from both the top and the bottom. Now, on a large screen it can be ok, but if somebody is working on a smaller screen, i.e. 720px high, then take away the 30%, and you are left with 504px, minus 64px for the blue header and 64px for the footer with the save button. And you still need to deduct some for the browser header and the Windows / MacOS taskbar (unless you use full screen or have them on the side). So you are left with a lousy 376 pixels max. That means a lot of scrolling.Even if you have a height of 1200 px, you do the math and end up with 712 pixels max. (Minus taskbar and browser header.)  I can live with that, but it can be much better.So I decided to set the top to 35 pixels – this keeps the WordPress admin header fully visible – and set the bottom to 2%. That leaves me with 845 pixels of useful height vs. 592px. That is an amazing 42% gain!!!
  2. Function descriptions. These are great. If you’re a newbie they tell you exactly what you can set there and what result can be expected. However, after about 1 week of using Divi, you don’t really need them, but there is no way to switch them off. So with a simple CSS trick (see full code at the end) we can get rid of these as well.

These 2 settings basically enable you to set the Text Module Settings without any scrolling on a 1200px high screen.

This makes the Module Settings already much more comfortable.

The Page Builder

The other part where I though space was not fully utilized is the post editing page when using the Page Builder. Specifically the Save / Load / Clear Layout buttons. They are nice, easy to find and easy to tap on a touchscreen device. But I believe very few developers develop on a tablet, so let’s shrink those buttons and move them out of the way! You will find them with your mouse still and it will gain you 94 pixels which is space for 2 more modules in the same row, or an extra row. Again, less scrolling.

 How to achieve all this

All these changes can be done with a small css tweak in the appropriate file. Look for this:

wp-content\themes\Divi\et-pagebuilder\css\style.css

And add this code at the end of the file:

/* MODIFICATIONS by Andras Guseo | Theme: Divi */

/* Decrease the margin of the Save / Load / Clear Layout buttons; Move them up. */
#et_pb_layout_controls {
    margin-top: 0;
    margin-bottom: 0;
    position: relative;
    top: -35px;
}

/* Decrease the icon size of the Save / Load / Clear Layout buttons */
.et-pb-layout-buttons:before {
    font-size: 16px;
    left: 5px;
}

/* Decrease the font size of the Save / Load / Clear Layout buttons and adjust spacing */
.et-pb-layout-buttons {
    margin-left: 0px;
    margin-bottom: 0px;
    font-size: 10px;
    padding: 0 5px 0 25px;
}

.et-pb-layout-buttons-save:before, 
.et-pb-layout-buttons-load:before, 
.et-pb-layout-buttons-clear:before {
    top: 1px;
}

/* Decrease the white space (from 15px to 0px) above the top section */
.et_pb_section {
    margin-top: 0;
}

/* Enlarge the module settings window so it's almost from top to bottom (from 2x 15%) */
.et_pb_modal_settings_container {
    top: 35px;
    bottom: 2%;
}

/* Decrease the whitespace (from 15px to 5px) at the top and bottom of option rows */
.et-pb-option {
    padding-bottom: 5px;
   padding-top: 5px;
}

/* Hide the descriptions in the module settings window */
.et-pb-option-container .description {
    display: none;
}
/* END OF MODIFICATIONS */

Unfortunately this tweak will disappear after updating the theme as it usually overrides the css file, but it shouldn’t take long to re-copy it again.

And maybe the guys at Elegant Themes will find some of this useful, so they will implement it, so we don’t need to do it manually. 🙂

Enjoy!

customization, Divi, WordPress

css.php

Pin It on Pinterest

Share This