Move the Divi AI Icon Below the Text Editor to Prevent Overlapping

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 +3 980 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.

  1. Log in to your WordPress dashboarad
  2. Go to Divi » Theme Customizer » Additional CSS
  3. 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;
    }
  4.  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

The Divi AI icon covers the the text and HTML in the Visual Builder

By default, the Divi AI icon often covers text and html in the Divi Visual Builder text editor.

After

The Divi AI icon is moved below the text editor to prevent overlapping

Let’s move the Divi AI icon below the text editor, to prevent the text from being overlapped.

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:

  1. Go to Plugins » Add New Plugin
  2. Search for Admin CSS MU. This free plugin lets you add CSS to style all WordPress Admin areas.
  3. Install and activate the plugin
  4. Go to Appearance » Admin CSS MU
  5. 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;
    }
  6. 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 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

👉 Related post: How To Hide The Divi AI Toggle In The Divi Role Editor

👉 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