Elementor v2.4 introduces features that focus on improving your user experience: mobile control over background images, custom background size and position, safe mode for troubleshooting and more.
Your images look perfect on any device, with Responsive Background controls.
We’ve always been proud of our flexible mobile design capabilities. But getting the background image position just right was still a challenge for Elementor users.
If you’ve ever built a website, you have probably faced this common issue:
On mobile, you want to focus on the dog’s face, but end up only showing its tail.
With the recent release of Core v2.4, we are introducing a full set of capabilities to help you customize background images for any device. Meet Responsive Background Image controls.
Responsive Background Image Controls
The new version of Elementor lets users have complete control over the background image controls on desktop, tablet and mobile devices. This control includes device-specific settings over background image controls (image, position, attachment, repeat and size).
Now, you can finally set different positions per device. Set ‘center-center’ for desktop, and ‘center-top’ for mobile, so all devices show a similar area of the image. You can also designate a different size for each device. Set ‘cover’ for desktop and ‘contain’ for mobile.
This was a huge pain for many users, and I am sure they will appreciate this new feature (you’re welcome ☺️).
Besides size and position, we added the option to set completely different images per device. Device-specific size and position were the first additional responsive controls. We took it a step forward and also added custom size and position, to give you an even more flexible design experience.
Custom Background Image Size & Position
Previously, you had to make do with 3 background image size settings: auto, cover or contain. Similarly, you could only define general background image positions like ‘Top Left’.
We are now adding two new custom controls: background size and background position.
With custom background position, you can manually set your desired background position on an X & Y axis. This way, you now have the option to set the exact of alignment for the background.
Besides position, you can also set custom background size. Set an exact width for your background image width for your background image.
These settings, custom background size and position, are especially crucial when it comes to responsive design. Use these custom settings to get a specific focus on the image’s main focal point for desktop, tablet and mobile devices.
Responsive Border Controls
Besides background images, we also added the ability to set different border-radius and border width per device.
An everyday use of device-specific borders is when you have an inline row of links, separated by a column border. This border becomes redundant on mobile, since the row stops being inline and the links get separated into separate rows.
In this scenario, the obvious choice is to remove the border from the mobile layout. Luckily with the new responsive borders feature, this can easily be achieved.
No more of those weird ‘orphaned borders’ on mobile!
Safe Mode - An Easy Way to Troubleshoot Issues
Here at Elementor, we care about offering our users a bug-free and flowing experience.
There are tens of thousands of plugins and themes, with millions of combinations for setting them up to work together. These combinations cause inevitable conflicts, related or unrelated to Elementor.
We continuously try to reduce these issues for our users, to create a better workflow.
A recurring issue occurs when users can’t load the editor.
This issue has been given many names: white screen of death, can’t edit, stuck on loading…
Our solution: meet Safe Mode!
Some of you might remember that Windows used to have a safe mode option that proved helpful in fixing a lot of the errors that occurred in Windows.
We created a similar solution for Elementor.
From now on, if you run into a never-ending loading page, you’ll have a button to switch on ‘Safe Mode’.
Consider ‘Safe Mode’ a safe environment that isolates Elementor and WordPress from the themes and plugins that might be causing the error.
With Safe Mode, over 80% of loading issues will be temporarily solved.
Safe Mode switched on and everything is loading properly?
This means the cause of the error was probably your theme or one of the plugins. Go ahead and deactivate them one by one to find the guilty party.
Safe Mode switched on and it’s still not loading?
This means you should look elsewhere for the solution, it’s most likely a custom-code or hosting related issue.
Safe Mode turns every Elementor user into a mini Sherlock Holmes.
‘Elementor-y, my dear Watson!’
“Will Turning On Safe Mode Affect My Site?”
Rest assured that safe mode won’t have any effect on your site visitors. They’ll be able to use your site as usual, and your site will display your normal theme design, as well as all the installed plugins.
The only thing that changes is that the Elementor editor loading process is done without any activated Plugins or Themes.
Safe Mode is a huge step forward for Elementor users in terms of getting a far more stable, seamless and error-free user experience.
External Video
In version 2.1, we added the option of adding self-hosted videos to the video widget. Why settle for YouTube and Vimeo right? But hosting video is expensive.
So now we’ve also added the option to add videos using external links.
This is great in two ways:
You can embed videos from other services like Coverr.
You can host your video files on a cheaper video hosting and add it to your site.
Read More Tag & Widget
One of the first requests we received was to add WordPress’s read more tag to Elementor.
This was a small request, but finally, we got around to pushing it through.
Read more is the tag you add to your blog post, that then translates to the cut off of the text in the archive’s post display. This allows you to show the teaser for your article on your main blog page.
Now you can easily add the read more tag in the text editor widget or as a separate widget.
We have also added a ‘Read More’ widget, that you can place between two text editor widgets, so your archive page will display an excerpt that cuts-off exactly where you want it to.
Please Note: This widget only affects themes that use ‘the_content’ in standard WordPress archive pages. It does not affect in Elementor-designed archive templates.
New Elementor & Templates Menus
To make it easier to handle the different Elementor dashboard screens, we’ve separated the previously named ‘My Templates’ menu, and renamed it ‘Templates’.
We’ve also positioned the Elementor & Templates side menus higher up on the dashboard menu, to make it more easily accessible.
Elementor Popups... Coming Soon
Elementor Popups are coming to Pro. Be sure to check out the sneak peek:
With Safe Mode, over 80% of loading issues can be easily identified.
Conclusion
It’s exciting to start-off 2019 with these helpful features, many of which have been requested by our community through GitHub.
Which of these features is the most helpful to your workflow? Is it Safe Mode, Responsive Background, or Read More? Please let us know in the comments below.
82 Responses
This is the best plugin ever made, Automaticc should buy you guys and replace gutenberg with it.
You mean Elementor should buy WordPress and make it one sleek package 😉
get this man a beer!
Bump!!!
Solid response.
😂🤣😂
Yuhooooooo…….. Loving it! TY Ben! Please add more features to nav element.
It is definitely worth checking out Namogo Elementor Extras. They got some great off canvas navigation menus that you can use!
I also agree, it would be wonderful to have the native elemental in wordpress
Excellent…great way to start 2019. Can’t wait to see what else is in store this year. Thanks Team Elementor!
The so long watied Responsive Background feature! thank you very much!
Team Elementor great feature! Is advanced interactions and animations in road map for this year? Similar to what Webflow offers?
Can you add a feature where you can set a slider image to automatically change on a date. I want to set the slider images to change everyday so if I could set it all up once a week or something that would be perfect.
WOA. Looking forward to safe mode.
Can’t wait for the popup 🙂
Wow, congratulation for always improving Elementor, it looks more and more professional every week! 🙂
Fantastic update! I would love to have the videos to also play on mobile. I know it is a matter of limiting the load time, but for small looping videos it would be great!
Responsive background image controls? Fantastic 🙂
The Elementor team continues to delight! Well done!
WOW, amazing!!!! The ability to choose which part of the background appeared in mobile was one of the top features that made me buy Elementor almost two years ago. Before Elementor, I was stuck accepting how a theme handled the background (which often meant that the focal point of the background disappeared in responsive mode). You’ve now refined the process to be incredibly precise (no need to mess with the padding anymore). THANK YOU!!!
P.S. Can’t wait for pop-ups, too!
YESSSSSS
I love you! ♥♥ You make it so easy to do what we do. (Shhhh. Don’t tell our clients.)
waouou, so cool.
Please don’t forget to upgrade your changelog page, it’s old.
Thanks, i like the new features
awesomeness I was looking for – great job on the image positioning.
Nice job! Great new features!
Still, I would like to see some basic features implemented, like parallax and “load more” button for blog posts. 😉
I agree.
Um. I just updated and now I have a 500 error. (seriously). Lol
It was short lived. Works now again. Geeze. It’s never done that before.
And the point of Gutenberg was what? When you have Elementor… Bring on those Popups I’m Ready!
Will the “Radio” template from the video be available in the Elementor Templates? Or elsewhere?
Due to copyright issues, we cannot offer this template for download.
That’s a pitty. Can we SEE the template somewhere?
Great features. I really loved it.
Wow, very impressive! Elementor just keeps improving and improving. And pop-ups coming up too! Elementor PRO was definitely one of my best purchases last year 🙂
Next update should include background video ability on mobile. Alot of new websites are starting to do this without speed issues.
Wow! Responsive images is what I needed the most. It was such a shame to see teasers and hero background with beautiful pictures looking like a mess on mobile.
Thank you elementor team!!!
Right on, very nice features !!
These are awesome additions to an already awesome plugin! Can’t wait to implement them into my site builds!
Ben, this is an awesome feature! Can I ask one question on a performance front? It seems that when you specify a different image for mobile it still loads the desktop version and overrides it. Wouldn’t it be better to take a mobile-first approach and have larger images on larger devices load only if a min-width is true?
Hi Christopher,
I agree with you, this is an amazing feature, however, I would also like some clarification on the performance front.
Are you able to provide any information Elementor?
Cheers,
Ed
Over the time I purchased many themes and plugins as something was always missing and knowing nothing about CSS, HTML, etc. I always struggled with making something acceptable. I always felt I wasted money on buying those plugins and themes.
Then came elementor and I was skeptical, but sick of visual composer, was one of early riders of the elementor train .And this has changed everything once and forever. I feel like I have received multiple times the little investment I made to buy elementor. I can now make ordinary looking pages to Extra-ordinary with much less effort and they keep on adding features. I hardly leave any feedbacks online but felt it due and here I put few lines about my personal experience with elementor.
Great features! Waiting for WooCommerce Cart and Checkout pages.
This is a fantastic update! I love the greater control over background images and safe mode.
One thing I noticed though, is that there seems to be bug or conflict occurring with the sticky header on one of my sites. The section is set to stick to the top of the page, but when I scroll the site, it now sticks to the top of the menu items cutting the logo and call-to-action button almost in half. I had to set the offset to 32 to fix it.
Love the direction Elementor is heading though. Keep it coming!
Makes My Design For Clients Workflow MUUUUCH Easier!!! Thanks Guys .
elementor is better than wordpress!!
Could we have a big round of applause here? I mean, a simple but so effective update. Great stuff again..
One of the best plugin today !
Great job hebvree !
I’m going to love the finer image controls that are coming to Elementor, it’s going to be awesome!
Also looking forward to the pop-up features, but won’t be using it for the standard opt-in though, I don’t like pop-ups.
Good Job cheers Mick
Responsive backgrounds AND popups coming soon? My heart just exploded. I love Elementor.
This is a GAMER CHANGER. You have no idea how much this helps my web design business!! You guys rock.
Oh… so close… you added responsive background image choices but not responsive background color choices. I’m working on a site where I’d like the Nav Menu to be a different color in mobile.
The responsive background feature would really benefit from custom break points for the various devices. Specifically, for me at least, the main difference I want to be able to differentiate in terms of layout, is between vertical orientation screens and horizontal orientation screens, regardless of the number of pixels.
Any chance that we could get columns to overflow in desktop view please? Currently it works in tablet and mobile views but not in desktop view.
For example:
33%33%33%
33%33%33%
33%33%33%
Thats because 33+33+33=99, just thinking that may have something to do with it. But really I have no idea, just an engineer trying to be a smartass.
It does not exist right now. However, we do not rule out the possibility that it will come within the framework of other changes that we intend to make.
Great updates and enhancements once again, Ben & the team. Thank you very much.
Thanks for sharing such an informative stuff.
This is excellent thank you
Very nice, thank you! Please, add support for a Mailster newsletter plugin!
Excellent update!
very gooooooood !!!.
WP Bakery is a beast to deal with. Even a child can use elementor to design beautiful premium websites.
Great updates! Solid responsive features. Hoping a connection with Infusionsoft is on the near radar for the pop-ups!
How are you ever going to be able to bring out 3.0 when you already have this many great features. Not that I’m complaining. You guys ROCK!
White page with Elementor v2.4 !
Please contact our support.
Will the video external URL link field take Amazon S3 URLs? Also, I’ve not used the video insert feature, but can you make video playlists using this feature? THANKS SO MUCH!
Great job! Thank you Elementor Team!
Elementor just gets better and better and better and better. I was in love nearly a year ago when I purchased the unlimited pro license for the first time (and haven’t looked back!), but each new update continues to justify my investment. Not only that, I’m so impressed with the Elementor team’s willingness to listen to us and to actually act on our suggestions and requests. Thanks for making my job as a web designer damn near flawless!
Just updated to 2.4.1, unable to use Edit With Elementor at WordPress… Froze like state when trying to select section.
There are no words for my excitement for this update.
I have the same problem. Allready made a ticket with Elementor Support theme. They seem to be working on it. Hope they can solve it very quickly.
The image background position is my “long waited feature” and finally! wow! thank you!
Rock’n’Roll
I completely agree: https://twitter.com/chrisjwagoner/status/1033119795565264896?s=21
It will be great if the popup trigger by CSS class like Popup Maker.
This is just outstanding! Is there a way to insert images via custom URL much like you’re showing is possible for video now? This would be much welcomed by me 🙂
Looking forward to updating!!
Amazing! cant believe how many features are now in Elementor! With the pop up’s advanced tigers will you be adding from location i.e if a user comes from a certain country. I think Duda do this with their builder.
It was working properly, but know I can’t load the editor. I get this message
“Fatal error: Unknown: Cannot use output buffering in output buffering display handlers in Unknown on line 0”
I switch to the safe mode but some features of the editor is not available as before.
you know it says..hit settings for the triggers area..it is too bad that does not work.. what would be helpful is a link to that area.. that works.
This page is dog slow to load in Chrome on Win10. What is causing this? Overloaded page?
Has anyone noticed issues with their SSL certificate? Sometimes the site appears as “unsafe” even though my certificate is up to date.
It looks like the elementor shape div class is pulling in box top & bottom shape (like the curvy effects) from an “unsafe” URL (http://www.w3.org/2000/svg) thus interfering with the certificate.
Does this sound about right? Has this bug been fixed?