NOTE: This tutorial is depreciated and no longer needed due to a Divi update.

Our blood, sweat, and tears helped many of you. But ultimately updates like this are progress in the right direction for Divi!

How To Increase The Height Of The Divi Builder Icon Picker Area Tutorial by Pee Aye Creative

How To Increase The Height Of The Divi Builder Icon Picker Area

Nelson Miller Pee Aye Creative
In this Divi tutorial I will give you a CSS snippet to increase the height of the Divi blurb and button icon picker area to make it easer to select an icon.

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

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.

increase height of Divi Builder icon picker area

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.

increase the height of the Divi Blurb icon picker area
how to Increase The Icon Picker Area Height using the Divi Assistant plugin

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

3 Comments

  1. Connie
    .et-db #et-boc .et-l .et-fb-font-icon-list
    

    are these css elementnames correct?

    Maybe

     .et_db #et_boc .et_l .et_fb_font_icon_list
    

    underscores?

    Reply
      • Connie

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

Submit a Comment

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

Recent Posts

0

Your Cart