Divi AI is a nifty addition to Divi but the placement of the Divi AI icon has caused frustration amongst Divi users since the AI icon floats on top of the text in the Visual Builder text input field. Here’s how to move down the Divi AI icon below the text input box.
Join +4 730 subscribers!
Moving the Divi AI Icon Below the Text Input Field in the Divi Visual Builder, Step by Step
To prevent the Divi AI icon from overlapping the text when hovering the text input, we will move the icon below the text input field. We will also move the Dynamic Content icon, to keep the editor interface clean and consistent. This fix works for the Divi Text Module, Divi Blurb Module and other Divi modules using the TinyMCE rich-text editor.
- Log in to your WordPress dashboarad
- Go to Divi » Theme Customizer » Additional CSS
- Add the snippet below:
/* Move the Divi AI and Dynamic Content icons */ .et-fb-settings-option-ai__enable--tiny_mce, .et-fb-settings-option-dynamic__enable--tiny_mce { top:100% !important; }
- Click the Publish button.
That’s it! Refresh the Divi Visual Builder and hover the text input field to see the result. You might need to clear your browser cache and website cache first.
Before
By default, the Divi AI icon often covers text and html in the Divi Visual Builder text editor.
Bonus: Moving the Divi AI Icon in the Divi Backend Builder and Theme Builder
This fix above applies to the Divi Visual Builder, also known as the Frontend Builder. However, the Divi Backend Builder and the Divi Theme Builder has a tendency to ignore custom CSS added to the theme.
But don’t worry, here’s a solution that will move the Divi AI icon also in the backend Divi Builder interfaces:
- Go to Plugins » Add New Plugin
- Search for Admin CSS MU. This free plugin lets you add CSS to style all WordPress Admin areas.
- Install and activate the plugin
- Go to Appearance » Admin CSS MU
- Paste the snippet below:
/* Move the Divi AI and Dynamic Content icons */ .et-fb-settings-option-ai__enable--tiny_mce, .et-fb-settings-option-dynamic__enable--tiny_mce { top:100% !important; }
- Click Save CSS.
That’s it! Now you have applied the fix to the Divi Backend Builder and the Divi Theme Builder editors.
That’s all for today!
I hope that you enjoyed this post. Subscribe to VictorDuse.com 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
👉 Related post: How To Hide The Divi AI Toggle In The Divi Role Editor
👉 Free course: Create a website from scratch with Divi
0 Comments