How To Set The Default Height Width and Position of The Divi Builder Settings Popup Tutorial by Pee Aye Creative

How To Set The Default Height, Width, And Position Of The Divi Builder Settings Popup

Nelson Miller Pee Aye Creative
This tutorial will how you how to set the default height, width, and position of the Divi Builder settings modal popup!

Join subscribers on our YouTube channel and enjoy other Divi video tutorials!

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;
}

Subscribe For More Things Like This!

At the start of each month, we send out a recap newsletter from the month before with family news, Divi news, our latest tutorials, and product news. Occasionally, if the news is too exciting to wait, we will send out another email separate from the monthly newsletter. That’s what you get when you subscribe, and of course you can unsubscribe if you are no longer interested!

Blog Post Optin

Please share this post!

Leave A Response!

By commenting you agree to our Blog & YouTube Comments Policy

2 Comments

  1. Fanny

    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.

    Reply

Submit a Comment

Your email address will not be published. Required fields are marked *

Recent Posts

0

Your Cart