Are you tired of being bombarded with hint messages from the Elementor Image Optimizer plugin while trying to focus on your WordPress website design? If so, you’re not alone. Many users have expressed frustration with these intrusive notifications that disrupt their workflow.

Check out the frustrated community posts here:
1. https://www.facebook.com/groups/Elementors/permalink/7054910934634632/

2. https://www.facebook.com/groups/Elementors/permalink/6858673407591720/

3. https://www.facebook.com/groups/Elementors/permalink/6920106524781741/

4. https://www.facebook.com/groups/Elementors/permalink/6942009809258079/

5. https://www.facebook.com/groups/Elementors/permalink/6834807553311639/

And here’s their response: https://www.facebook.com/groups/Elementors/permalink/7099720480153677/

However, there’s good news – you can easily eliminate these hints using a simple solution.

The CSS solution to Elementor Image Optimizer Hints:

function spanrig_remove_elementor_image_optimiser_hint() { ?>
<style>
.elementor-control-notice:has(> button.tooltip-target[data-event="image_optimizer_hint"]),
.elementor-control-notice:has(> button.tooltip-target[data-event="image-optimization-once"]),
.elementor-control-notice:has(> button.tooltip-target[data-event="image-optimization"]),
.elementor-control-notice:has(> button.tooltip-target[data-event="image-optimization-once-media-modal"]),
.elementor-control-notice:has(> button.tooltip-target[data-event="image-optimization-media-modal"]) { 
    display: none !important;
}
</style>

<?php }
add_action( 'elementor/editor/before_enqueue_styles', 'spanrig_remove_elementor_image_optimiser_hint' );

This CSS code specifically targets elements related to the Elementor Image Optimizer hints and hides them from view, allowing you to focus on your design tasks without interruption.

Implementing the Solution:

Now that you have the CSS solution at your disposal, let’s walk through the steps to implement it on your WordPress website:

1. Access Your WordPress Dashboard: Log in to your WordPress dashboard using your credentials.
2. Navigate to Themes: Once logged in, hover on “Appearance” in the left-hand menu and click on “Theme File Editor”
3. Access Child Theme: Within the Theme File Editor, locate the “Functions.php” file. This is where you can add the above custom code.
4. Add the custom Code: Copy the custom code provided above and paste it into the “Functions.php” file. Ensure that you paste it at the bottom.
5. Save Changes: After adding the custom code, click on the “Update File” button to save your changes and apply the CSS to your beloved editor.
6. Refresh Your Editor: Once saved, refresh your editor to see the changes take effect. The Elementor Image Optimizer hints should now be eliminated from your interface, allowing you to work without distractions.

Note: This method is not the best but solves the purpose until Elementor releases an ON/OFF toggle for such hints.

Conclusion:

With this simple CSS solution, you can take control of your Elementor editing experience and eliminate the distractions caused by Image Optimizer hints. Say goodbye to interruptions and hello to a smoother, more efficient workflow. Empower yourself to focus on what truly matters – creating stunning websites with Elementor.