Elementor integration
This integration introduces compatibility with the Elementor Website builder and the premium Elementor Pro plugin.
While it’s possible to use Elementor and WP Offload Media together out-of-the-box, this integration handles issues that may come up when working with offloaded images.
Working with Images
WP Offload Media already integrates with the standard Media Library file selection tool in WordPress. So when an already offloaded image is selected the remote URL will be inserted in the Elementor data. This works quite well in some simple use cases. But if you make any changes to the WP Offload Media settings, for instance add a CDN or change bucket, the Elementor content will not update automatically and the URLs will never update on the front end.
This integration handles image URLs when working with Elementor so that the URLs to offloaded images are saved in the proper format and are rewritten to the remote URL when the content is shown on the front end.
Background Images
Most of the Elementor widget types support using a background image. Elementor handles this by creating a specific CSS file for each post where the background image is referenced. This CSS file is generated the first time a page or post is accessed by a visitor and then cached for performance reasons. Every time you update any Elementor content the CSS file for that page or post is deleted and regenerated on the first page visit.
The WP Offload Media Elementor integration takes care of clearing the CSS cache in most situations when the URL to media files might have changed. This includes bulk offloading all your media files to the bucket, bulk move operations triggered by changing the private media settings, changing to a new bucket and moving all media files over or bulk removing files from the bucket.
There are some situations where you need to clear the Elementor CSS cache manually, for instance if you offload an individual file that was previously local and that file is used as a background image in Elementor, the CSS cache needs to be cleared manually.
We recommend clearing the CSS cache manually after upgrading WP Offload Media from a version before 2.5.3 or if you modify any WP Offload Media defines or settings that affect the remote URLs.
To flush the cache and regenerate the CSS files, use the built in tool found under Elementor > Tools:
Restrictions for Background Images
Please note that since the URLs to background images are cached in a pre-generated CSS file it’s not possible to use private media files as background images. Private images are served by signing the remote image URL when it is first accessed and the signature is only valid for a short time period. So if a signed URL is stored in a cached CSS file, it will eventually stop working.
For more information about troubleshooting issues the CSS cache please see the Elementor help center
Analyze And Repair tool for existing Content
If you have used both Elementor and WP Offload media for some time there’s a good chance that some of your content has “mixed” URLs. That is, some images are served from your local web server and some are served from your delivery provider configured in WP Offload Media. To fix up existing content, we have an Analyze and Repair Tool specifically for Elementor. The tool is accessed via WP Offload Media settings.
If you have lots of existing posts and pages, the tool can take a few minutes to complete. Since the tool runs in the background you don’t have to sit and wait for it to complete, it will show a notice on the WP Offload Media settings screen when it has completed.