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
// 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 both on Elementor’s Editor and Post’s featured image selection
Are you tired of these annoying ads on your client’s website even when you have fully optimized all the images? I had this experience on my client’s website even when I had already optimized their pictures.
Post’s featured image selection –
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 insufficient.
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' );
Before
After
Elementor Image Widget
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;
}
</style>
<?php
}
add_action( 'elementor/editor/before_enqueue_styles', 'remove_elementor_nag' );
Before
After
Turn Off Elementor’s AI
if you do not use an Elementor AI feature, you can only turn it off for individual users.
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.
If you found this tutorial helpful you can support me by buying me a cup of coffee, sending via PayPal, or buying the products from my store-
- Buymecoffee
- PayPal or
- Buy products from my store
Thank you.
