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, 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.