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

Victor Duse

Nov 21, 2024

Comments

Editorial Note: I may earn a commission when you visit links on this website.

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.

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

Victor Duse

By Victor Duse

Victor is a Swedish WordPress expert with +20 years experience of web development and marketing communications. Time away from keyboard is spent together with family and on Brazilian Jiu-Jitsu mats.

About Victor » 

Related posts

0 Comments

Submit a Comment

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