Elementor v2.4: Responsive Background Image, Custom Settings & More

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.

Play Video

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.

Liked This Article?

We have a lot more where that came from! Join 512,871 subscribers who stay ahead of the pack.
By entering your email, you agree to our Terms of Service and Privacy Policy.

About the Author

Ben Pines
Ben Pines
Ben Pines is Elementor's CMO. He has been in the online marketing industry for over 10 years, specializing in content marketing. WordPress has been Ben's platform of choice since the time it was used solely for blogging.

Share on

Share on facebook
Share on google
Share on twitter
Share on linkedin

Comments

82 Responses

  1. 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.

  2. 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!

  3. 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!

  4. Next update should include background video ability on mobile. Alot of new websites are starting to do this without speed issues.

  5. 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!!!

  6. 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?

    1. 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

  7. 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.

  8. 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!

  9. 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

  10. 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.

  11. 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.

  12. 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%

    1. 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.

  13. 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!

  14. 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!

  15. Just updated to 2.4.1, unable to use Edit With Elementor at WordPress… Froze like state when trying to select section.

  16. 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.

  17. 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!!

  18. 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.

  19. 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.

  20. 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.

  21. 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?

Leave a Reply