Hide The Divi AI Toggle In The Divi Role Editor

There are plenty of tutorials on how to disable Divi AI. But what if you want to prevent other administrators from re-enabling Divi AI in the Divi Role Editor interface? Here’s how to hide the Divi AI toggle from the Role Editor completely.

Join +3 860 subscribers!

Hiding The Divi AI Toggle In The Divi Role Editor Tab, Step By Step

You can choose the hide the Divi AI toggle from both the Administrator tab and the Editor tab – or just one of them.

Before (with Divi AI option)

Before hiding the Divi AI toggle inte the Divi User Roles tab

After (without Divi AI option)

After hiding the Divi AI toggle inte the Divi User Roles tab
  1. Log in to your WordPress dashboard
  2. Add the CSS snippet below, either by installing a free plugin like Admin CSS MU or by using a hook to enqueue a custom CSS file:
    /* Hide Divi AI option for Admins in Divi Role Editor */
    
    #et_pb_administrator_role .et_pb_roles_options_internal:nth-child(1) .et_pb_capability_option:nth-child(4) {
    display:none;
    }
    
    #et_pb_administrator_role .et_pb_roles_options_internal:nth-child(1) .et_pb_capability_option:nth-child(5) {
    margin-right:3%;
    }
    
    /* Hide Divi AI option for Editors in Divi Role Editor */
    
    #et_pb_editor_role .et_pb_roles_options_internal:nth-child(1) .et_pb_capability_option:nth-child(3) {
    display:none;
    }
    
    #et_pb_editor_role .et_pb_roles_options_internal:nth-child(1) .et_pb_capability_option:nth-child(5) {
    margin-right:3%;
    }
  3. Save the CSS and go to Divi » Role Editor to confirm that the Divi AI toggle is hidden.

The status of Divi AI (Enabled or Disabled) will not change when you hide the toggle. Just remove the custom CSS to bring the toggle back.

Pro Tip: So why not just add the CSS snippet in the Theme Customizer or in your child theme styles.css file? Because that CSS is only for frontend styling and will not affect your WordPress admin pages, like for example the WordPress dashboard, the Divi Theme Options or the Divi Role Editor.

Explaining The Code

Hiding the Divi AI option in the Divi Role Editor interface this way is a bit of a hack, but it works. Since there are no unique CSS classes for the different options in the Role Editor, I’ve used the nth-child selector. For Administrators, I’ve targeted the fourth option box using nth-child:(4) in the first row of settings using nth-child:(1). For Editors, I’ve targeted the third option box using nth-child:(3) in the first row of settings using nth-child:(1).

Instead of using for example CSS Grid with the property gap, Divi is using clunky margins to add space between the toggles. The margin-right:3% is added to get the correct spacing between the option boxes after hiding the Divi AI option. You can remove this line of CSS if you don’t care about having the nice-looking spacing between all the containers.

That’s all for today!

I hope that you enjoyed this post. Subscribe to DiviMundo on YouTube and join our Facebook group for more crisp content on WordPress and web design.

👉 Related post: How To Disable Divi AI In 30 Seconds

👉 Free course: Create a website from scratch with Divi

Related posts

0 Comments

Submit a Comment

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Affiliate Disclaimer

All content on DiviMundo is funded by you – our beloved readers. Some of the links are affiliate links. This means that if you click on the link and purchase something, I will receive an affiliate commission. But it will never cost more for you. Thanks for your support!

Victor Duse, founder of DiviMundo