How to Hide Elementor’s Image Optimization & ‘Try AI’ Ads?

Looking for a simple way to hide Elementor’s image optimization & Try AI ads? Read on.

Elementor is undoubtedly one of the best page builder plugins for creating a WordPress website. With 8.8 million websites using Elementor, the page builder has revolutionized how you design a website.

You can create a professional website with an intuitive drag-and-drop interface within minutes. With the pro version, you can also access a wide range of design options, customizations, and unique functionalities to make your website stand out.

However, every good tool can have certain elements that don’t work great. If you’ve been using Elementor for a while, you must have encountered the popup ads for Elementor’s Image Optimizer and Try AI tools on the backend.

While these ads can be helpful for some users, the constant popups can be annoying and disrupt your work on the editor.

In this article, we’ll explore easy ways to hide Elementor’s image optimization and try AI ads.

What are Image Optimization Recommendations in Elementor?

The image optimization recommendations in Elementor are the popup suggestions that appear to try out the new Elementor image optimizer plugin.

The recommendation appears in the website editor when your uploaded image size exceeds the recommended size.

Image Optimizer by Elementor is a plugin that offers image resizing, compression, and optimization capabilities to enhance website experience and SEO with optimized images.

Since large image files can often slow down your website, hurting the user experience, the plugin makes it easy to compress, resize, and optimize images in a few clicks.

The user-friendly image optimization plugin also supports multiple image formats like JPEG, PNG, WebP, and GIF and hence offers image converting capabilities as well.

While useful for users, these recommendations can also often affect the editor’s speed and loading times and lead to frustration when you want to make changes quickly.

Are Elementor widgets slowing down your WordPress website and affecting user engagement? Check out How to Disable & Hide Unused Elementor Widgets.

How to Hide Elementor Image Optimization Recommendation? [Step-by-step]

Disabling Elementor image optimization ads is pretty easy, even for those with limited technical knowledge.

All you need to do is add a custom code to your child theme files or use the Nexter theme code snippets feature.

A. Add a code in child theme files

If you have a child theme for your WordPress website, you can add a code to the theme files to remove image optimization recommendations in the Elementor editor.

Step 1: For this, go to Appearance > Theme File Editor on your WordPress dashboard. Select functions.php from the right sidebar.

Step 2.1: Next, to Apply only to the Elementor editor, add the below code. Once done, click on Update file.

/*
  * Loads on Elementor's frontend editor 
  * Added by kishorchand
  * Use child theme's function.php or code snippets plugin for better code management.  
*/
function remove_elementor_nag() {
	?>
      <style id="remove-nag">
          .elementor-control-media__promotions.elementor-descriptor,
          .elementor-control-media__promotions.elementor-descriptor[role="alert"]{
              display: none!important;
      }  
/*  
  * if you're not using AI feature and keep annoys you, use this CSS rule to hide AI button
*/   
       .e-ai-button{
           display: none!important;
        }
  	


.css-1ncn4io,
.MuiBox-root .css-hpgf8j{
  pointer-events: none!Important;
  opacity: 0!important;
  display: none!important;
}
 
  
      </style>
	<?php
    } 

add_action( 'elementor/editor/before_enqueue_styles', 'remove_elementor_nag' );

Step 2.2: Next, to Apply only to the Backend, add the below code. Once done, click on Update file.

/* 
  * Hide Elementor image optimization ads when choosing the post's featured image on the backend
  * UPDATE: 20/06/24 Hide Elementor image optimization ads on Media Library, if closing the "x" is not enough.
*/ 
function hide_elementor_nag_admin() {
	?>
      <style id="remove-nag">	
      /*
       * Hide Elementor image optimization ads when choosing the post's featured image on the backend, frontend       
      */      
        .elementor-control-notice.elementor-control-notice-type-info,  
        .e-notice--cta,
  	.e-featured-image-ai,
  	.e-image-ai-insert-media,
        .e-excerpt-ai{
              display: none!important;
      } 
  

/* 
 * Hide the first element with class "css-1hboo5q" and all elements with class "css-1hboo5q"  
 * You will get Image optimizer ads on Elementor > Home > Expand your design toolkit
*/		  
.css-1hboo5q:first-child,
.css-1hboo5q {
    opacity: 0!important; /* Force opacity to 0, ignoring inheritance */
    height: 258.36px;
    width: 401.9px;
    pointer-events: none; /* Disable pointer interactions */
    cursor: none; /* Remove cursor display */
    position: relative; /* Set positioning relative to its container */
    z-index: 1; /* Set stacking order to be above other elements */
}
  
/* 
 * Hide the "Generate with Elementor AI" button in Media Library
*/   
#e-image-ai-attachment-details, 
#e-image-ai-media-library {
      opacity: 0!important;/* Force opacity to 0, ignoring inheritance */
      pointer-events: none;/* Disable pointer interactions */
}
      </style>
	<?php
 } 

add_action( 'admin_head', 'hide_elementor_nag_admin' );

Source

B. Add codes using Nexter Theme

Alternatively, if you don’t have a child theme or wish not to create one, use Nexter Theme’s Nexter Builder to add and manage the custom code to disable the install image optimizer recommendation in Elementor.

Step 1: Assuming that you have installed and activated the Nexter Theme and Nexter Extension plugin, head over to Nexter Builder > Add New.

Step 2: Select the Layout as Code Snippets and Code Type as PHP. Run the snippet on frontend/backend or both as per your choice. Paste the code.

Step 3: Once done, click on Publish.

Suggested Read: How to Fix Blurry Images in Elementor [SOLVED]

What are Try AI Ads in Elementor?

The Try AI ads in Elementor are the popup ads that appear when editing text to try out the new Elementor AI feature.

Available with Elementor 3.13 versions and above, the native AI integration is a tool to enhance images, create and improve text, and generate custom codes for the website.

This feature transforms how you design websites in Elementor, offering writing assistance, elevating designs, and streamlining workflows. You can use the AI writing assistant in the text area for every element to generate writing suggestions and create both short and long copies.

Here’s a complete guide on How to Use Elementor AI.

The tool, thus, helps maintain the brand style throughout the website with a consistent content voice, tone, and design.

At the same time, when editing text in Elementor editor, the consistent popups can disrupt the workflow or even affect the website’s speed.

In this case, you might want to disable Try AI ads in the editor.

How to Hide Try AI Ads in Elementor? [Step-by-step]

Elementor does not offer a built-in setting to remove or hide the Try AI ads in the page editor.

However, one of the most effective ways to hide Elementor ads is to use an ad blocker plugin in WordPress.

Alternatively, you can also remove the ‘Rewrite with AI’ links that appear when editing text by adding custom codes to your CSS files. Follow this step-by-step process-

Step 1: On your WordPress dashboard, go to Appearance > Theme File Editor. In the Theme File Editor, locate and open the functions.php file of your child theme.

Step 2: Add the following code snippet to hide the AI-related ads on your editor

add_action('elementor/editor/before_enqueue_scripts', function () {
echo "<style>";
echo ".e-ai-button {display: none;}";
echo "</style>";

});

Source

Step 3: Click the Update File button to save your changes.

Want to add custom features and functionalities to your website? Learn How to Add Custom CSS in Elementor for Free.

Do you Manage WordPress Websites? Download Our FREE E-Book of 20+ Checklist for WordPress Site Maintenance. ​

Wrapping Up

As an Elementor user, the constant ads to try out the new features within the editor can be frustrating and affect your workflow. While Elementor does not offer in-built settings to hide Elementor’s image optimization and try AI ads, you can do so by following the step-by-step processes mentioned in this article.

Moreover, if you want to enhance the design and user experience of your Elementor website, download The Plus Addons for Elementor by POSIMYTH Innovations. It is a complete plugin with more than 120 unique addons to elevate your website’s design, layout, and functionalities.

FAQs on Hiding Elementor Image Optimization & Try AI Ads