Happy 2016 to everyone! Hope you all had happy holidays with lots of joy and good food. I’m still trying to recover, so I’m taking it easy. πŸ™‚ This gave me some time to re-check how the admin UI of the “new” Divi can be improved.

A lot has changed since February 2015, when I posted the first article on this topic, which was still done pre Divi 2.4. Since then we have a more enhanced Divi with more options, more user-friendlyness and more of everything, thanks to the dedication of ET. And we also have the amazing Divi Builder plugin which you can use with any theme you want, and we have the Extra theme, which is also based on the Divi Builder. (Thanks guys! You are the best!!!)

And this brings us to the first big improvement of this trick: it WORKS WITH ALL THREE: the Divi Builder, the Divi theme and the Extra theme. Updated to Divi 2.6.x.

The UI of the Divi Builder also has changed dramatically to its advantage. But for me there was still some “room for improvement”. πŸ™‚ I’m always looking for ways to optimize things that make work (or fun) easier whether it’s less clicks, less scrolling or more data on the screen. So read on to find out how you can have a Divi user interface that makes your work faster.

Focus

This time I didn’t touch the Page Builder. It’s nicely done, not too much unused space. There is not much to win here, unless you want to remove all margins, paddings and have a very ugly looking interface, that makes work only more difficult.

I was focusing more on optimizing the module settings panel and on how to make the changes last even after a theme update. Good news: I succeeded in both. πŸ™‚

I will not go too much into detail, just some bullet points on what is done:

  • Slightly taller window (I guess the ET designers read my previous post and already did some improvements here πŸ™‚ )
  • Smaller font sizes for headings and buttons
  • Smaller paddings meaning thinner headers, buttons and input elements
  • Reduced spacing between options
  • Hidden descriptions (this is saving some major space!!!)

Here are some before / after images for comparison:

How to …

This is pretty easy to do, you just need to copy-paste. πŸ™‚

So, take the below code and paste it into your functions.php file. (Appearance > Editor > functions.php (Theme Functions))

If you don’t know which code to use, then upgrade your theme to the latest and use the code for 6.x. (Thanks to Jeffrey B.)

Divi 2.5.9.x

// Optimized Divi User Interface for Divi 5.9.x by The Divi Magazine
function better_et_admin_style_by_TDM() {
  echo '<style type="text/css">
    /* Hide descriptions */
    .et-pb-option-container .description {display:none;}

    /* Container margins */
    .et_pb_modal_settings_container, .et_modal_on_top .et_pb_prompt_modal { top: 70px; bottom: 2%; }
    
    /* Save and add to library container correction */
    .et_modal_on_top .et_pb_prompt_modal { margin-top: 38px; }

    /* Box title */
    .et-pb-settings-heading,
    /* Clear layout confirmation */
    .et_pb_prompt_modal h3
      { font-size: 16px; padding: 10px 50px 10px 20px; }
    /* Close button */
    .et-pb-modal-close { padding: 7px; }
    /* Tab titles */
    .et-pb-options-tabs-links li { font-size: 14px; }
    .et-pb-options-tabs-links li a { padding: 10px 20px; }
      /* Move tabs to top of container (Module settings) */
    .et-pb-options-tabs-links { margin-top: -58px; }
      /* Move tabs to top of container (Add module) */
    .et-pb-saved-modules-switcher { margin-top: -23px; }
    .et_pb_modal_settings_container_step2 .et-pb-options-tabs-links { margin-top: -58px; }

      /* Move container up (Module settings) */
    .et_pb_module_settings .et-pb-main-settings,
      /* Move container up (Insert module) */
    .et-pb-all-modules-tab,
      /* Move container up (Add from library) */
    .et-pb-main-settings
    { top: 76px; padding: 20px 40px; }

      /* Make container bigger */
    .et-wp-after-3_8 .et-pb-main-settings { bottom: 30px; }

    /* Buttons at the bottom | Save and add to library button */
    a.et-pb-modal-save span, a.et-pb-modal-save-template span, a.et-pb-modal-preview-template .icon::before, .et_pb_prompt_buttons a.et_pb_prompt_proceed, .et_pb_prompt_modal .et_pb_prompt_buttons input.et_pb_prompt_proceed, .et_modal_on_top_both_actions .et_pb_prompt_dont_proceed { font-size: 14px !important; line-height: 30px !important; }
    a.et-pb-modal-save, a.et-pb-modal-save-template, a.et-pb-modal-preview-template, .et_modal_on_top .et_pb_prompt_proceed, .et_modal_on_top_both_actions .et_pb_prompt_dont_proceed, .et_pb_prompt_buttons a.et_pb_prompt_proceed, .et_pb_prompt_modal .et_pb_prompt_buttons input.et_pb_prompt_proceed { height: 30px !important; }

    /* Decrease space between lines */
    .et-pb-option {padding: 5px 0;}
    /* Decrease padding of form elements */
    .et-pb-option-container input, .et-pb-option-container textarea, .et-pb-option-container select, .et_pb_prompt_modal input, #et_pb_select_category, .et-pb-custom-color-button { padding: 5px; }
    /* Fix height on select */
    .et-pb-option-container select { height: 28px; }
    /* Font formatting buttons */
    .et_builder_font_style.mce-widget button { padding: 4px !important; }
    /* Upload button */
    input.et-pb-upload-button, input.et-pb-gallery-button, .et-pb-option-container input.wp-picker-default, .et-pb-option-container .button, .et-pb-video-image-button { height: 28px; }
    /* Color picker */
    .et-pb-option-container .wp-color-result { height: 28px; padding: 0; }
    .et-pb-option-container .wp-color-result::after { height: 28px; line-height: 28px; }
    .et-pb-option-container input.et-pb-color-picker-hex { height: 28px; }
    input.et-pb-upload-button, input.et-pb-gallery-button, .et-pb-option-container input.wp-picker-default, .et-pb-option-container .button, .et-pb-video-image-button {height: 28px !important; }
    /* Yes-No button */
    .et_pb_yes_no_button span.et_pb_value_text { padding: 6px; }
    .et_pb_yes_no_button span.et_pb_button_slider { height: 20px; }

    /* Add media button */
    .et-pb-option-container .wp-media-buttons .button { line-height: 28px; }
    /* Label adjustment */
    .et-pb-option > label, .et_modal_on_top .et_pb_prompt_modal > label { margin-top: 0px; }

    /* Make MCE editor taller */
    .et_pb_modal_settings_container .mce-edit-area iframe { height: 300px !important; }
  </style>';
}
add_action('admin_head', 'better_et_admin_style_by_TDM');

From Divi 2.6.x

// Optimized Divi User Interface for Divi 6.x by The Divi Magazine
function better_et_admin_style_by_TDM() {
  echo '<style type="text/css">
    /* Hide descriptions */
    .et-pb-option-container .description {display:none;}

    /* Container margins */
    .et_pb_modal_settings_container, .et_modal_on_top .et_pb_prompt_modal { top: 70px; bottom: 2%; }
    
    /* Save and add to library container correction */
    .et_modal_on_top .et_pb_prompt_modal { margin-top: 38px; }

    /* Box title */
    .et-pb-settings-heading,
    /* Clear layout confirmation */
    .et_pb_prompt_modal h3
      { font-size: 16px; padding: 10px 50px 10px 20px; }
    /* Close button */
    .et-pb-modal-close { padding: 7px; }
    /* Tab titles */
    .et-pb-options-tabs-links li, .et-pb-preview-screensize-switcher li { font-size: 14px; }
    .et-pb-options-tabs-links li a, .et-pb-preview-screensize-switcher li a { padding: 10px 20px; }
      /* Move tabs to top of container (Module settings) */
    .et-pb-options-tabs-links, .et-pb-preview-screensize-switcher { top: -38px; }
      /* Move tabs to top of container (Add module) */
    .et-pb-saved-modules-switcher { margin-top: -23px; }

      /* Move container up (Module settings) */
    .et_pb_module_settings .et-pb-main-settings,
      /* Move container up (Insert module) */
    .et-pb-all-modules-tab,
      /* Move container up (Add from library) */
    .et-pb-main-settings
    { top: 76px; }

      /* Make container bigger */
    .et-wp-after-3_8 .et-pb-main-settings { bottom: 30px; }

    /* Buttons at the bottom | Save and add to library button */
    a.et-pb-modal-save span, a.et-pb-modal-save-template span, a.et-pb-modal-preview-template .icon::before, .et_pb_prompt_buttons a.et_pb_prompt_proceed, .et_pb_prompt_modal .et_pb_prompt_buttons input.et_pb_prompt_proceed, .et_modal_on_top_both_actions .et_pb_prompt_dont_proceed { font-size: 14px !important; line-height: 30px !important; }
    a.et-pb-modal-save, a.et-pb-modal-save-template, a.et-pb-modal-preview-template, .et_modal_on_top .et_pb_prompt_proceed, .et_modal_on_top_both_actions .et_pb_prompt_dont_proceed, .et_pb_prompt_buttons a.et_pb_prompt_proceed, .et_pb_prompt_modal .et_pb_prompt_buttons input.et_pb_prompt_proceed { height: 30px !important; }

    /* Decrease space between lines */
    .et-pb-option {padding: 5px 0;}
    /* Decrease padding of form elements */
    .et-pb-option-container input, .et-pb-option-container textarea, .et-pb-option-container select, .et_pb_prompt_modal input, #et_pb_select_category, .et-pb-custom-color-button { padding: 5px; }
    /* Fix height on select */
    .et-pb-option-container select { height: 28px; }
    /* Font formatting buttons */
    .et_builder_font_style.mce-widget button { padding: 4px !important; }
    /* Upload button */
    input.et-pb-upload-button, input.et-pb-gallery-button, .et-pb-option-container input.wp-picker-default, .et-pb-option-container .button, .et-pb-video-image-button { height: 28px; }
    /* Color picker */
    .et-pb-option-container .wp-color-result { height: 28px; padding: 0; }
    .et-pb-option-container .wp-color-result::after { height: 28px; line-height: 28px; }
    .et-pb-option-container input.et-pb-color-picker-hex { height: 28px; }
    input.et-pb-upload-button, input.et-pb-gallery-button, .et-pb-option-container input.wp-picker-default, .et-pb-option-container .button, .et-pb-video-image-button {height: 28px !important; }
    /* Yes-No button */
    .et_pb_yes_no_button span.et_pb_value_text { padding: 6px; }
    .et_pb_yes_no_button span.et_pb_button_slider { height: 20px; }

    /* Add media button */
    .et-pb-option-container .wp-media-buttons .button { line-height: 28px; }
    /* Label adjustment */
    .et-pb-option > label, .et_modal_on_top .et_pb_prompt_modal > label { margin-top: 0px; }

    /* Make MCE editor taller */
    /*.et_pb_modal_settings_container .mce-edit-area iframe { height: 300px !important; }*/
  </style>';
}
add_action('admin_head', 'better_et_admin_style_by_TDM');

Note: In the 6.x version unfortunately you cannot make the TinyMCE editor taller. The editor will automatically adjust its height so that all content fits in. No matter whether the full screen editing is on or off. Personally I think this was a mistake; I hate it when I need to scroll down a lengthy text just to reach the module settings at the bottom.

Further customizations?

There are some customizations which are easy.

If you want to show the descriptions / help texts, then remove the following lines

/* Hide descriptions */
.et-pb-option-container .description {display:none;}

If you want to make the settings window even taller, then change the values under

/* Container margins */

And there is an option at the end to set the default height of the MCE editor box. (I think it’s too small. πŸ™‚ ) Just find this:

/* Make MCE editor taller */

Further customization of the Divi UI is possible, you just need to edit the css code you copy-pasted. It is very tricky though, changing a font size can already scr*w up the alignments. But feel free to experiment.

Closing remarks

Another good thing is vs. before, that since the code is in the functions.php file, there is no need to redo it after a theme update or a plugin update.

This is it for now. If you like it or you have a comment or question, please leave a message below.

And check back soon for some more tricks. Maybe there will be a plugin for this. πŸ˜‰

css.php

If you liked this post ...

... then share it with your friends!