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.

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.

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.

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