Communities Requests, Bugs Fixes, Tips And Tricks Related To Elementor

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

Credit to Heidi Sipe McCausland for the request.

   
         
 
// it takes 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 fully optimized all the images? I had this experience on my client’s website when I already optimized their pictures.

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

Applies only on Elementor's Editor

   
         
 
// Loads on Elementor's frontend editor 
// Added by kishorchand
// Use the 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 the AI feature and keep annoying you, use this CSS rule to hide the 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' );

Applies only on Backend

   
         
 
// 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' );

Hide Add a container with Copilot

Unfortunately, there is no PHP snippet for this one, you can either add this CSS to Elementor’s site settings custom CSS area or customizer or Elementor Custom code.

Site Settings

Jumpstart your web-creation heading

Site Settings > Click the Customize

This will open a new window

Editor’s Site Settings

Custom CSS

   
         
 
iframe#editor-static-iframe,
#editor-static-iframe{
	display: none!important;  
}

Show different images for Desktop/Tablet/Mobile devices

This is a question recently raised by one of the community members Hermine Re on the Official Global Facebook Community Group to show different images on different screen resolutions.

It is quite easy and you can achieve with <picture> HTML elements and this is how it is done.

Make sure you update the image path

This is the HTML tag

   
         
 
//  Update the image path to the actual images
//  Change the media queries to your requirements
// Update image width and height properties to the width and height of the image
// loading attributes take 3 supported values - lazy, eager, and auto
// Fetchpriority hints take 3 values - high, low, & auto
// Decoding takes 3 values - async, sync, and auto
// If you're not adding captions to your images, you can remove <figure> & <figcaption> tags from the HTML tag
<div class="picture__element">
      <figure>      
          <picture class="picture__wrapper wrapper">
            <source
              srcset="/wp-content/../image-path.jpg"
              media="(max-width: 480px)"/>
            <source
              srcset="/wp-content/../image-path.jpg"
              media="(max-width: 768px)"/>
            <source
              srcset="/wp-content/../image-path.jpg"
              media="(max-width: 1024px)"/>
            <img
              class="skip-lazy pic__img"
              width="image_width"
              height="image_height"
              loading="eager"
              fetchpriority="low"
              decoding="sync"
              src="/wp-content/../image-path.jpg"
              srcset=
                     "/wp-content/../image-path.jpg 480px,
                      /wp-content/../image-path.jpg 768px,
                      /wp-content/../image-path.jpg"
              alt="Describe your images"
              sizes="(max-width: image_widthpx) 100vw, image_widthpx"
            />
          </picture>
        <figcaption class="picture-caption">Image Caption</figcaption>
      </figure>
    </div>

   
         
 
/* Adjust the width and height properties of the image */

.pic__img,
img.pic__img{
  width: 70%;
  max-width: 100%;
  height: auto;
}


// If you want to align the image to left, center,& right, you can use text-align CSS properties
// text-align CSS properties takes 3 value - left, center. and right 

.wrapper{
  display: block;
   text-align: center;
}

figcaption,
.picture-caption{
   text-align: center;
}

I am currently working on Unlimited Elements For Elementor Widgets but there is some bug with their attributes settings and it will be available for free to download when it is done.

You can view it on my demo test URL.