Improve Your Divi Builder UI
We have several tutorials here on our blog and on our YouTube channel that are related to the Divi Builder UI, and we actually have created a new category and playlist specifically for these. You can check those out and also please share your ideas for new tutorials related to the Divi Builder UI for this series! In this tutorial, I will show you a small improvement that may help to bring efficiency and consistency to your design process. I will show you how to set the default height (min and max) and the width (min and max) of the Divi Builder settings popup, as well as set the default position for it on the page. Check the video to see what I mean, as it is hard to explain in text or images.
▶️ Please watch the video above to get all the exciting details! 👆
In order to modify the Divi Builder UI, we need to add some snippets of CSS to the website. This is easy to do, so don’t worry, I will show you how to do it. I recommend watching the video to see it in action.
If you are using our free Divi child theme, place this snippet into the style.css file. Otherwise, place this in your Divi>Theme Options>Custom CSS code box. If you need help, check out our complete guide on Where To Add Custom Code In Divi.
Divi Builder Settings Popup Width And Height
We’ll start with the width and height. Both of these can be adjusted to your liking, and both can be set with a definite width or height, or as a minimum or maximum width and height. I’ll show you some examples in the video.
Divi Builder Popup Modal Width
In the first snippet, you can set the width of the modal settings popup. Again, feel free to adjust this number. I have it set to a max-with, but you may prefer to set it to just “width” or to “min-width” depending on your situation.
/*set the width for the Divi Builder modal popup*/
.et-db #et-boc .et-l .et-fb-modal {
max-width: 400px;
}Divi Builder Popup Modal Height
Next is a snippet for the height. In this example, I have included both a min-width and a max-width.
Keep in mind that you in this scenarion, the user can still move the height between those two values.
/*set the height for the Divi Builder modal popup*/
.et-fb-modal__content {
min-height: 400px!important;
max-height: 600px!important;
}Divi Builder Settings Popup Position
Another thing you can do with the this is set the default position. In other words, you might want it to always open at the top left, or the right side 100px from the top and right, etc. You can do this with the snippet below. In this example, I have set the top to 75 pixels and 100 pixels from the left, but you could change this value and remember to set the either the top, bottom, left, or right position as desired.
/*set the position for the Divi Builder modal popup*/
.et-db #et-boc .et-l .et-fb-modal {
top: 75px!important;
left: 100px!important;
}
Nelson, I am soooo glad I found you! I lost my developer and have been teaching myself Divi but finding you has made things so much easier. I want to commend you on your teaching style. You don’t go too fast and you aren’t condescending like so many of the sites I have tried. You don’t just assume we all know something and if it is, you always refer us to the other tutorial first. I’m very impressed.
I do have a question though. I have purchased your Responsive Viewer and am buying your Divi Assistant tonight but I keep running into a problem I can’t find the answer to. I will set the margins at 80% like you suggested in one of your posts and all the other settings you tell us to but every single time I go and make adjustments to the mobile view it ALWAYS messes up my desktop view. I am using the responsive viewer in the module but the other views always get messed up. What am I doing wrong. Widths and heights are hard to understand
Hi Cindy!
Can you please share the URL of the page or screenshot of the settings you have set?
Nelson, your post caught my attention. I was just wondering, if your recommendations apply to the Bloom PopUp or Divi Supreme Pro? The Divi Builder doesn’t have a popup function integrated, as far as I know.
Hi Fanny, this post is about the settings popup in the Divi Builder.