Skip to Main Content

Communities Requests, Bugs fixes, Tips and Tricks

This compilation incorporates a comprehensive array of bug fixes and feature requests contributed by our valued community members. We've meticulously curated and integrated these enhancements to ensure a smoother user experience and to address any lingering issues. Your feedback has been instrumental in shaping this update, and we're committed to continually refining and improving our product based on your input. Thank you for your ongoing support and collaboration!

Suppose you have any requests, bugs, or fixes related to Elementor. You can submit or tag me on Global Elementor Community,  Elementor Pro, or use the contact form.

Fluid-Width iframe 

Embed video related to iframe
This is just the picture 😂
Credit to Heidi Sipe McCausland for the request.

/*
    -- it take 3 parameters on loading attributes i.e lazy or auto (default) and eager
    -- It takes 2 parameters on fetchpriority i.e. high or low
    -- scrolling="no" to remove the iframe scrollbar
*/
<div class="iframe_wrapper">
    <iframe
        loading="lazy"
        fetchpriority="low"
        width="640"
        height="360"
        src="iframe_url"
        allowfullscreen="true"
        frameborder="0"
        webkitallowfullscreen="true"
        scrolling="no"
        mozallowfullscreen="true">
    </iframe>
</div>
    
  

/*
* With aspect Ratio CSS properties
*/
.iframe_wrapper iframe {
    aspect-ratio: 16/9;
    width: 100%;
    height: 100%;
}

/* 
* or
*/
.iframe_wrapper {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 */
    height: 0;
}
.iframe_wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
    
  

If you’re utilizing the Unlimited Elements for Elementor Plugin. You are most welcome to download and upload my widgets to your project.

Hide Elementor’s Image optimization & AI ads

Credit to Kevin O’Brien for the post.

Are you tired of these annoying ads on your client’s website when you are fully set up?  I had this experience on my client’s website when I optimized their images.

Elementor Image optimization ads (feature image)
Before
Elementor Image optimization ads on feature image is not visible anymore
after
Elementor image optimization ads (frontend)
Before
Elementor image optimization ads (frontend)
after
 
/*
  * Loads on Elementor's frontend editor 
  * Added by kishorchand
  * Use child theme's function.php or code snippets plugin for better code management.
  * You can self-host the asset, please follow my article https://foxscribbler.com/communities-requests-bugs-fixes-tips-and-tricks/ 
*/
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 the AI feature and keeps annoys you, use this CSS rule to hide the AI button
*/   
  .e-ai-button{
    display: none!important;
  }
  
/* combined code
* <style id="remove-nag">
     .elementor-control-media__promotions.elementor-descriptor,
     .elementor-control-media__promotions.elementor-descriptor[role="alert"],
        .e-ai-button{
          display: none!important;
      }
*/  
   </style>
	<?php
   } 
add_action( 'elementor/editor/before_enqueue_styles', 'remove_elementor_nag' );
    
  

/* 
 * Hide Elementor image optimization ads when choosing the post's featured image on the backend
 * UPDATE: 09/05/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">		  
    .elementor-control-notice.elementor-control-notice-type-info,  
    .e-notice--cta{
       display: none!important;
   }
  
   .css-1hboo5q:first-child,
   .css-1hboo5q{
     opacity: 0!important;
     height: 258.36px;
     width: 401.9px;
     pointer-events: none;
     cursor: none;
     position: relative;
     z-index:1;
     }
      </style>
<?php
 } 
add_action( 'admin_head', 'hide_elementor_nag_admin' );
    
  

You can self-host the assets on your server

or you can copy and paste the code snippets from Codeshare.

Leave a Reply

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