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:
-
- Text module settings BEFORE
-
- Text module settings AFTER
-
- Advanced settings BEFORE
-
- Advanced settings AFTER
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. 😉
This is great!
How about:
Making the editor text area rezisable like it is in Text-mode?
Fullscreen-mode Container margins, top margin smaller? I want it all!
(normal view –> top: 32px; bottom: 1% works fine with my laptop)
Fullscreen-mode editor text area bigger in Firefox?
Put all off these on the first line? Lot’s off useless empty space there…
Text Module Settings
General Settings
Advanced Design Settings
Custom CSS
You can customize the view as much as you want. 🙂 I was already happy with my settings, but you can go to the screen edge if you want. 🙂
I’ll check the fullscreen-mode. And for me it’s resizable in any case, I think.
First line: hmmm, didn’t think of that as I like to have a bit of structure. I will check how difficult it is.
“Parse error: syntax error, unexpected ‘>’ in /home/content/65/11542065/html/sitename/wp-content/themes/KPGEx/functions.php on line 89”
Tried implementing this on an Extra site and it broke my WP Dashboard. Cant get in now.
Hi Steve,
I’m sorry to hear. You could try to log in to your hosting space via FTP, download the functions.php file, delete the pasted code, save, and copy back via FTP.
Or if this was the only thing in the functions.php, then you can delete the file.
(Don’t forget to make a backup in any case!)
Can you possibly send me the content of the file? Or the whole file. I can try to check what the problem is and help you solve it.
Does anyone else have any problems like that?
Hi,
I’m using Extra without any problems. Pasted the code into the functions file of my child theme.
Andras,
I like your work, this is a good improvement on your Divi pre 2.4 version. This one doesn’t get blown away on updates.
Another issue I have with the Divi builder, is lack of contrast on the screens. This is a common problem on many websites as they are designed/developed by people with young eyes. Any way, I’d like to share my additions to your code to improve the contrast for “older” 60+ eyes.
/* Improve text label contrast */
.et-pb-option > label {color: #0038C3; padding-top: 6px;
}
/* Improve border contrast */
.et-pb-option-container .wp-editor-container {border-color: #B7BDC3;
}
/* Improve input box background contrast */
.et-pb-option-container input {background: #EFE6E3 none repeat scroll 0% 0%;
}
/* Improve yes/no box background contrast */
.et_pb_yes_no_button.et_pb_off_state {background-color: #ECEBE2;
}
/* Change MCE icon color */
.et-pb-option-container .mce-toolbar .mce-ico {color: #666666;
}
/* Increase font weight for some headings */
.et-pb-options-toggle-disabled h3 { font-weight: 500;
}
I used this code in your pre Divi 2.4 version and it looks to work in your 6.x version.
cheers.
Hi Glen,
Thanks a lot for your comment! This indeed is a valuable addition to the code!