Code by Day | Explore By Weekend

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

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

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;
}
12
Last updated Jan 19, 2021 @ 1:05 am

Please share this post!

Nelson Lee Miller (aka The Divi Teacher)

Nelson is the owner of Pee-Aye Creative Co in the beautiful state of Pennsylvania. He loves helping small businesses, exploring, building websites with Divi, and teaching others.
Divi Adventure Club Product And Course Membership by Pee Aye Creative

Become A Member!

Gain access to everything we offer!

Learn More

Leave A Response!

Subscribe
Notify of
guest
2 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Fanny
Fanny
1 month ago

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.

Shop Our Divi Products

Plugins • Courses • Templates

Visit The Shop

Divi Adventure Club Product And Course Membership by Pee Aye Creative

Become A Member!

Gain access to everything we offer!

Learn More

Divi Tutorials On YouTube

Join over 5,200 others and subscribe to our helpful Divi videos!

Visit Our Channel

Recent Posts

Pin It on Pinterest

0

Your Cart