Improving The UI of The Divi Icon Picker Area
Increase The Height of The Divi Icon Pickers
This tutorial is quite simple, and short. But taking a few moments to make this and place it into your website will be well spent time. This tutorial will show you how to increase the height of the Divi Builder icon picker area so that you can actually see to choose an icon.
We are thinking about doing a series on this, so let us know in the comments what other Divi Builder UI improvements you want us to make!
▶️ Please watch the video above to get all the exciting details! 👆
FYI: Do It With Divi Assistant!
Why work so hard? You can do this easily with a setting in our Divi Assistant plugin!
When you are trying to be efficient in your website design, it can be frustrating when things that should be simple are not. One of those things that can be improved quickly in Divi is the icon picker field. By default, it is not easy to scroll and find what you need because of how short it is.
You can actually change a lot of things in the Divi Builder UI with CSS. You just need to sort through the code and you can find it relatively easily if you know how to use the browser inspect too. The snippet below is all you need to make the icon picker areas taller in your Divi Builder.
Where To Paste The CSS Code
1. Divi Assistant
If you are using our Divi Assistant plugin, simply paste the code in the CSS tab in the custom code window in the Divi Visual Builder.
2. Child Theme
If you are using a child theme, paste this code into the style.css file. If you don't have a child theme, you can generate a child theme directly on your site or download our free child theme.
3. Divi Theme Options Integration
Otherwise, paste this code in your Divi>Theme Options>Custom CSS code box.
If you need help understanding where to paste the code, please check out our complete guide about where to add custom code In Divi.
/*increase the height of the Divi icon picker area*/
.et-db #et-boc .et-l .et-fb-font-icon-list {
min-height: 400px!important;
}
And just like that, you can enjoy this tiny improvement! You can change the 400px to anything else you want, but I thought that was a pretty good place to start.
How To Increase The Icon Picker Area Height Using Divi Assistant
Here are the simple steps to increase the Divi icon picker area height using our popular Divi Assistant plugin:
- Install and activate the Divi Assistant plugin
- Click on the Utility Helper tab and the Visual Builder subtab
- Enable the setting
I hope that is easy enough for you! 😉
Learn More About Divi Assistant!
Our flagship "helper" plugin has (121) main features to make your life easier when working with Divi!
are these css elementnames correct?
Maybe
underscores?
Hi Connie,
Why do you ask? Our tutorial is correct 🙂
I just wondered because so many elementnames in DIVI use underscores
and so I never know whether it is a correct name or a typo ….