Elementor - 3 Big Responsive Image Tips and How to Swap Images with CSS

Using Elementor's Responsive Mode for Section and Columns is well know, but Tip 3 - may blow you mind!
00:00 Intro
00:17 Tip 1 - Sections
02:35 Tip 2 - Columns
03:20 Tip 3 - Swapping Images !!!!!!!!
Code for Tip 3 - add this into the Custom CSS for the image, and then add an alternate URL as below so that the image swaps when the screen size changes!
@media screen and (max-width:500px)
{
selector img{content: url('staging3.websquadron.co.uk/wp-content/uploads/Electro-e1642853507899.webp')
}
}
Music used:
Track: Will You Be Mine (Remix)
Free download: brokeinsummer.com/will-you-be-mine-remix
Artists: brokeinsummer.com
Contact: brokeinsummer.com/help
Music provided by Audio Library Plus
-- Get Elementor Pro here ---- trk.elementor.com/license
-- Of course, we're affiliated to them, but it helps to pay for resources to keep creating ace content for you :)
-- Book an Appointment/Consultation: calendly.com/info-28542
-- LinkedIn: www.linkedin.com/in/imran-siddiq-7320a74a/
-- Instagram: batswebsitedesign
-- Twitter: imranwebsites
-- Facebook: websquadrontraining/
PS: websquadron.co.uk
PPS: Contact us at [e-mail]
PPPS: We only build with Elementor Pro

[@antonio.carreira]

It always amazes (and saddens) me to see how few views your videos get. It looks like you put a lot of effort into those and I can always find really useful tips in each one of them. Maybe it's because Elementor's main target are newbies that drool over shinny gradient stuff but couldn't care less about the tech details, only to complain that their websites take ages to load. Great work mate, keep it up!

[@websquadron]

Many thanks. And yup I still have to break through the mass market or available audience. Eventually I hope it explodes and past videos get hit high. It may be one of those things that I got to keep plugging away at. Indeed, I estimate that I’m putting away about 20 hours a week on recording and editing. So far I’ve got videos uploaded until the end of March 2022 :)

[@markbolden4540]

This is a great video. I too was using multiple images and then hiding them with responsive settings. This makes way more sense! Thank you!

[@websquadron]

Glad it was helpful!

[@borisnieminen677]

Thanks for posting these excellent tips and the CSS. This tutorial belongs in the hall of fame. Cheers

[@cesaroceano]

Great work! Just found your channel and I'm on a binge watch. Awesome tips and tricks to enhance Elementor sites. You've got yourself a subscriber.

[@websquadron]

Great to have you :)

[@CurtisHays]

Dude, you are brilliant. This image swap saved me for logo image, I needed a different color on mobile due to different background color on mobile. Love your videos, keep it up!

[@websquadron]

Awesome. Wish stuff like this was standard inside of El already.

[@IanMoss-vk4nk]

Dude, you are amazing! Thanks for your videos, I stumbled across you a few times this week alone for different issues. You have been a huge help. Thanks again!

[@Sebastien_Dottin-SDOweb]

Nice !! I have discover the option for the sections and column recently... Thanks a lot for the tips ! Also, a quick question... Is it better to have the CSS code directly into the style.css ? Better for performance ?

[@websquadron]

Yes, slightly in the style.css, but it'll be negligible.

[@tabassumhasan922]

Can’t thank you enough for insightful and super useful tips you come out in your videos. Just one question just so that I am clear: the second image that you scaled and copied was first uploaded in the library, isn’t it? Or can I just edit the original image and it gets saved as a separate image? Thank you very much in advance!

[@websquadron]

Yup, I added another. Don't risk losing your original image.

[@krystianrajski2732]

Thanks! One of those precious tips to have in your Elementor toolbox 🙂

[@answer4274]

Thanks for the tip. 😀 Do I have to do this manually for each image on the site? Or maybe there is a good free plugin that can do this automatically?

[@websquadron]

My tip is manual (for now)

[@nikos-t-profiler]

Great, awesome tip as always Imran!

[@megaturbo]

Good tip, I can see you have inserted a webp image format, but not all of the browsers working with this one. Just in case, some one on older browsers, please pay attention. 😉

[@websquadron]

Yup, indeed.

[@niceaf.marketing8249]

Super cool man! Love what you're doing. Thanks homie!

[@websquadron]

Appreciate it!

[@dawidkreator]

5:00 Thanks for this! Awesome

[@Rejoin_2023]

Great tip, thank you, and such a simple solution too.

[@christianlecuyer6380]

Awesome tip #3 :) How can I be sure that the mobile version is indeed in use?

[@websquadron]

I checked on an actual device and that's exactly what came through. You could even leave the image blank and add alternate code for @media up to 500px, and @media when the minimum is 501px

[@KevsGuide]

fantastic info thanks when you make a copy of an image,. do you upload the 2nd one or can you make a copy within the library? How can you get a 1600 x 900 to be 85 kb?

[@websquadron]

Bulk Resize can help to get it down in filesize. Sometimes I add another copy or sometimes I just make a copy from the URL in Media Library.

[@martijns.7029]

Great tutorials, great channel. One question, how to solve this with dynamic background images?

[@websquadron]

Let me check on that

[@Em-Aar]

How can we swap image in Elementor Slider, it doesn't give any option. Would this code work?

[@websquadron]

That will need some custom css to sort out.

[@advanced-developers]

i like 3rd tip

[@MaliceVanRow]

A video based on my comment in the FB group. Nice.

[@websquadron]

Don't recall that comment - but either way - glad it helps :)

[@EPHONIC]

So great but…If working with dynamic content using say ACF or Pods, how does one allow the different images to change without a client (as an example) having to go change code/CSS? Is it advised to create a field that is for a desktop image, a separate field for tablet, and mobile in a custom post where someone can designate each size?

[@websquadron]

A very good point and a tricky one as asking users to upload multiple image may confuse them but as long as you train them - then additional fields could be good. Then you just have to ensure the right dynamic field is returned.

[@antonionocella2003]

And if I have more than 1 img? The selector img how will works ?

[@danplumadore647]

Awesome!

[@websquadron]

Thank you! Cheers! It can make such a difference for performance :)

[@JeramieSaito]

Not sure if tip 3 will work but ill try. I'm still not understanding it really I'm not techy and I had a developer build my site but he is done with it and now I'm on my own

[@websquadron]

You may need to hire someone to help you out, also depends on how the site was built. I could offer to look but I charge Consultation prices for that.

[@CallmeKaram]

This is great 👌

[@websquadron]

I'm sure someone will tell me there's an issue with it, but being able to swap out now is a big thing for performance :)

[@Barvinok66]

For some reason, it doesn't copy an image. It just replace it. Any suggestions why? I dont have a PRO lisence

[@websquadron]

Yup that’s what it’s meant to do as in replace.

[@KevsGuide]

@@websquadron so this tip only works for the pro version?

[@websquadron]

@@KevsGuide Indeed and we always recommend that you use EL Pro rather than 3rd party plugins

[@cupa]

Супер! Очень полезный урок

[@Jumajtau]

I think WP doesn't leave the copies of the edited images inside the Media Library. Or I am missed something?

[@websquadron]

I've never had an issue with that as the edited version is saved and remains there :)

[@xMuninn]

Any way of doing this simply when using dynamic images? (Say the featured image?)

[@websquadron]

I’ll need to think about that

[@andreas-stricker]

Can't believe it's still not possible to select a different image for different screen sizes in Elementor.

[@teresabell5240]

would love for this to be as easy as presented, but when I change the image for the responsive it changes it in all 3 modes. How do you get it to isolate to just the one device?

[@websquadron]

@media

[@zinnurc1]

I am stuck with one pic and can't get it to work!!!!! was wondering if you can help me out here? your consulting link doesn't work... I was trying to make an appointment.... Thanks

[@websquadron]

Hi Best to email for consultation: [e-mail]

[@humans.from.earth.]

How in the name of green grass does a page builder, which is trying to be mobile responsive not have an ability to do this natively? Am I missing something obvious, I mean there is little responsive icons next to a lot of things in Elementor, but images nah who needs that lol. I must be missing something here. By the way, on an old device like iphone 7, I have to scroll a bit to make the swapped image appear. Also by the way, you make great videos. Thank you!

[@websquadron]

We'd love it if it could do more. An iPhone 7 may be running an old IOS so needs updating.

[@Bjorn-hp3uv]

Hey, thanks for great content! I had to add a ";" after the URL because I got an error "Expected RBRACE" and I think that it solved it. However, when I load my page and inspect, it still serves the bigger sized img. I have cleared cookies and purge cache. Any ideas why it still serves the bigger img? thanks for all the great vids and help, much appreciated!

[@websquadron]

It shouldn't still serve the larger image unless you need to Regen the CSS and Purge the Server (not just the site).

[@Bjorn-hp3uv]

@@websquadron Thanks for the quick reply. I will try it :)

[@shopbeonline]

Is there a way do this with carousels and gallery pictures? Or does one have to create a carousel specifically for desktop and another specifically for mobile?

[@websquadron]

If you add images to the new carousel widget then yes it could be done.

[@sorrellsour]

First I would like to say how much I appreciate your videos - really clear instruction that gets to the point. Not so easy to find that quality. Thank you. I would love it if you could you give any more details on how this could be done with a slider or carousel? @@websquadron

[@aaronphillips4543]

Whenever I switch to mobile the same desktop picture is there. If I swap out the picture while in mobile it also updates the desktop version. Am I doing something wrong? Any help is appreciated.

[@websquadron]

It will depend on the Screen Size, and has the image been added completely in CSS?

[@aaronphillips4543]

@@websquadron I figured out shortly after I was expecting the widget to do that but it wouldnt. When I switched to the section background it then worked as it should.

[@MahinMiron]

checkerbox effect isnt showing, please help

[@mooltech]

Sir please make more video regarding Mobile responsiveness. There is no specific tutorials about mobile responsiveness.

[@websquadron]

Yup, I'll do some more of those. We do cover it in our Site Playlist Tutorials when we go through page building step by step.

[@SANDMANxvx]

Has there been an update to Elementor Pro or am I missing something? I no longer seem to be able to insert smaller/alternative images for mobile or tablet? The icon is no longer there! Please help

[@websquadron]

It is there as I can still select it. Which version of EL are you on?

[@SANDMANxvx]

3.19.2

[@websquadron]

i just checked now, and it is there. I can't comment on what else you have on your website.@@SANDMANxvx

[@SANDMANxvx]

Hmm I wo der if the new image optimiser update has anything to do with it. Thanks for your help anyway

[@SANDMANxvx]

After further investigation, and as far as I can tell, you can only swap the main hero image for smaller/alternative images. The other images on the page don't do this.

[@advanced-developers]

good

[@assafmanor1157]

The problem is that Elementor doesn't allow this image responsive choosing when it comes to a post's feature image.

[@websquadron]

Indeed it doesn't but the Post Image should be fine as they fall into the Cover layout.

[@assafmanor1157]

@@websquadron I'm not sure if I understand your answer. There is the Feature image Widget that let's you dynamically choose the feature image for your post. Alas, there is no option to change the feature image responsively resulting in a need to load a large unneeded and unwanted file in mobile.

[@websquadron]

@@assafmanor1157 If you're using Elementor Pro for your Single Post template, then you can modify in responsive mode the width and height to suit how it should look. Yes, the Featured image can't be changed easily without some HTML coding.

[@assafmanor1157]

@@websquadron Do you have a link to some explanation about the HTML coding to change the featured image?