Migrated your Elementor site and all images are broken? Image URLs need updating after domain changes, HTTPS migrations, or moving to a CDN.

This guide shows you how to fix all broken images in Elementor—from widget images to CSS backgrounds to media library references.

Why Images Break After Migration

Common Causes

1. Domain Change:

Old: http://oldsite.com/wp-content/uploads/image.jpg
New: Should be https://newsite.com/wp-content/uploads/image.jpg
Problem: URLs still point to oldsite.com

2. HTTP to HTTPS:

Old: http://yoursite.com/uploads/image.jpg
New: Should be https://yoursite.com/uploads/image.jpg
Problem: Mixed content warnings, blocked images

3. CDN Implementation:

Old: https://yoursite.com/uploads/image.jpg
New: Should be https://cdn.yoursite.com/uploads/image.jpg
Problem: Images load from slow origin server

4. Path Changes:

Old: /home/olduser/public_html/uploads/image.jpg
New: /var/www/html/uploads/image.jpg
Problem: Server can't find images

Where Images Hide in Element or

Visible locations:

• Image widgets
• Gallery widgets
• Background images (sections/columns)
• Featured images
• Icon box images
• Team member photos

Hidden locations:

• Custom CSS backgrounds
• Inline styles
• Widget JSON data
• Post meta fields
• Media library metadata
• Template library
• Popup backgrounds

Quick Fix: Automated Replacement

Method 1: Better Search Replace (Recommended)

Step 1: Backup Everything

1. Database backup
2. wp-content/uploads/ folder backup
3. Download both to computer

Step 2: Install Plugin

Plugins → Add New → "Better Search Replace"
Install and activate

Step 3: Replace Image URLs

Tools → Better Search Replace

Search for: http://oldsite.com/wp-content/uploads
Replace with: https://newsite.com/wp-content/uploads

Select tables:
☑ wp_posts (post content)
☑ wp_postmeta (Elementor data - CRITICAL!)
☑ wp_options (site settings)

☑ Run as dry run?

Click "Run Search/Replace"

Step 4: Review Results

Check dry run shows:
- wp_postmeta: XXX changes (Elementor images)
- wp_posts: XX changes (featured images)
- wp_options: X changes (site logo, etc.)

Step 5: Execute Replacement

Uncheck "Run as dry run"
Run Search/Replace again
Note: XXX images updated

Step 6: Additional Patterns

Run these additional searches:

Protocol-relative URLs:

Search: //oldsite.com/wp-content/uploads
Replace: //newsite.com/wp-content/uploads

URL-encoded paths:

Search: http:\/\/oldsite.com\/wp-content\/uploads
Replace: https:\/\/newsite.com\/wp-content\/uploads

Mixed HTTP/HTTPS:

Search: http://newsite.com/wp-content/uploads
Replace: https://newsite.com/wp-content/uploads

Method 2: WP Migrate DB

Better for migrations with multiple URL patterns.

Setup:

Install WP Migrate DB
Tools → Migrate DB → Find & Replace tab

Add all patterns at once:

Find: http://oldsite.com/wp-content/uploads
Replace: https://newsite.com/wp-content/uploads

+ Add Row
Find: http://oldsite.com
Replace: https://newsite.com

+ Add Row
Find: //oldsite.com
Replace: //newsite.com

Execute:

Select: All tables (or wp_posts + wp_postmeta minimum)
Action: Find & Replace
Click "Find & Replace"

Fix Specific Image Types

Elementor Widget Images

Problem: Image widgets show broken image icon

Solution 1: Re-upload images

1. Edit page with Elementor
2. Click image widget
3. Choose Image → Media Library
4. Select same image (re-links to correct URL)
5. Update page

Solution 2: Bulk URL replace

Use Better Search Replace on wp_postmeta table
Updates all widget images at once

Background Images

Problem: Section/column backgrounds missing

Locations to check:

1. Section settings → Style → Background
2. Column settings → Style → Background
3. Custom CSS (if used)

Fix with search/replace:

Search: url(http://oldsite.com/uploads/background.jpg)
Replace: url(https://newsite.com/uploads/background.jpg)

Tables: wp_postmeta, wp_posts

Or manually:

1. Edit with Elementor
2. Click section/column
3. Style tab → Background → Image
4. Re-select image from library
5. Save

Featured Images

Problem: Post thumbnails broken

Check:

Posts → All Posts
Look at Featured Image column
Broken = image URL issue

Fix:

Method 1 - Search/Replace:
Search: old-domain.com/uploads
Replace: new-domain.com/uploads
Tables: wp_posts, wp_postmeta

Method 2 - Regenerate Thumbnails:
1. Install "Regenerate Thumbnails"
2. Tools → Regen. Thumbnails
3. Click "Regenerate All Thumbnails"

Gallery Images

Problem: Gallery widget shows placeholders

Fix:

1. Edit page with Elementor
2. Click gallery widget
3. Click "Create Gallery"
4. Re-select all images
5. Save gallery
6. Update page

Or bulk fix:

Better Search Replace on wp_postmeta
Updates all gallery URLs

Custom CSS Background Images

Problem: Custom CSS images broken

Check:

Elementor → Custom CSS
Or: Appearance → Customize → Additional CSS

Find:

background-image: url('http://oldsite.com/uploads/bg.jpg');

Replace:

background-image: url('https://newsite.com/uploads/bg.jpg');

Media Library URL Updates

Update Attachment URLs

Problem: Media library still references old URLs

Check:

Media → Library
Click image → View details
Check "File URL" field

Fix with plugin:

Install "Velvet Blues Update URLs"
Tools → Update URLs

Old URL: http://oldsite.com
New URL: https://newsite.com

Options:
☑ Update all embedded media files
☑ Update links in posts
☑ Update image attachments
☐ Update GUIDs (optional)

Click "Update URLs Now"

Or manual SQL:

-- Update attachment URLs
UPDATE wp_posts
SET guid = REPLACE(guid, 'http://oldsite.com', 'https://newsite.com')
WHERE post_type = 'attachment';

-- Update attachment meta
UPDATE wp_postmeta
SET meta_value = REPLACE(meta_value, 'http://oldsite.com', 'https://newsite.com')
WHERE meta_key = '_wp_attached_file';

CDN Migration

Moving Images to CDN

Scenario: Implementing CDN like CloudFlare, BunnyCDN, or KeyCDN

Old URLs:

https://yoursite.com/wp-content/uploads/image.jpg

New URLs:

https://cdn.yoursite.com/wp-content/uploads/image.jpg

Process:

Step 1: Set up CDN

1. Configure CDN service
2. Point CDN to your uploads folder
3. Test CDN URL works
   Example: https://cdn.yoursite.com/wp-content/uploads/test.jpg

Step 2: Search and Replace

Search: https://yoursite.com/wp-content/uploads
Replace: https://cdn.yoursite.com/wp-content/uploads

Tables: wp_posts, wp_postmeta, wp_options

Step 3: Use CDN Plugin (Alternative)

Install: "CDN Enabler" or "WP Rocket"
Automatically rewrites URLs on-the-fly
No database changes needed
Faster and reversible

Recommended: Use CDN plugin vs database replacement for easier management.

Troubleshooting Broken Images

Images Still Broken After Replacement

Check 1: Correct URL pattern used

View page source (Ctrl+U)
Search for: "wp-content/uploads"
Check actual URL format in HTML
Use exact format in search/replace

Check 2: Cache cleared

1. Elementor → Tools → Regenerate CSS
2. Clear plugin cache (WP Rocket, etc.)
3. Clear browser cache (Ctrl+Shift+R)
4. Check again

Check 3: File permissions

SSH into server:
cd wp-content/uploads
ls -la

Check permissions:
Folders: 755
Files: 644

Fix if needed:
find . -type d -exec chmod 755 {} \;
find . -type f -exec chmod 644 {} \;

Check 4: Images physically exist

Try accessing image directly in browser:
https://yoursite.com/wp-content/uploads/2024/01/image.jpg

If 404: File missing, need to transfer files
If 403: Permission issue
If loads: URL replacement didn't work

Some Images Work, Others Don’t

Mixed content issues (HTTP/HTTPS):

Problem: Site is HTTPS, some images HTTP
Browser blocks mixed content

Solution:
Search: http://yoursite.com/uploads
Replace: https://yoursite.com/uploads

Install "Really Simple SSL" plugin

Different URL formats:

Check for variations:
- yoursite.com/uploads/image.jpg
- www.yoursite.com/uploads/image.jpg
- yoursite.com/wp-content/uploads/image.jpg

Run separate replacements for each format

Elementor Editor Shows Images, Frontend Doesn’t

Cause: Editor loads from media library, frontend uses cached URLs

Fix:

1. Clear all caches (Elementor + plugins)
2. Regenerate Elementor CSS
3. Hard refresh browser (Ctrl+Shift+R)
4. Check page in incognito mode

Prevention: Using Relative URLs

Why Relative URLs Matter

Absolute URL (breaks on migration):

<img src="https://yoursite.com/uploads/image.jpg">

Relative URL (works anywhere):

<img src="/wp-content/uploads/image.jpg">

Unfortunately…

Elementor always uses absolute URLs in:

• Image widgets
• Background images
• Gallery widgets

No built-in way to force relative URLs in Elementor.

Workaround: CDN Plugin

Use CDN rewrite plugin:
- Rewrites URLs on page load
- No database changes
- Easy to update CDN domain
- Works with Elementor

Recommended: WP Rocket or CDN Enabler

Post-Migration Checklist

After URL Replacement

☐ All caches cleared (Elementor, plugins, browser)
☐ Elementor CSS regenerated
☐ Test 10+ pages with images
☐ Check homepage images
☐ Verify background images
☐ Test gallery widgets
☐ Check featured images on blog
☐ Verify image lightboxes work
☐ Test mobile responsive images
☐ Check image widgets in popups
☐ Verify logo displays correctly
☐ Test social sharing images
☐ Check no console errors (F12)
☐ Verify Google PageSpeed still good

Tools & Plugins Summary

For URL Replacement

• Better Search Replace – Best all-around
• WP Migrate DB – Best for full migrations
• Velvet Blues Update URLs – Simple, limited

For CDN Setup

• WP Rocket – Premium, full features
• CDN Enabler – Free, simple
• W3 Total Cache – Free, complex

For Troubleshooting

• Regenerate Thumbnails – Fix broken thumbnails
• Really Simple SSL – Fix mixed content
• Health Check – Debug plugin conflicts

Conclusion

Fixing image URLs in Elementor after migration is straightforward with Better Search Replace. The key is updating wp_postmeta (where Elementor stores data) and clearing all caches after.

Quick Action Plan:

1. ✅ Backup database and uploads folder
2. ✅ Use Better Search Replace with dry run
3. ✅ Replace all URL variations
4. ✅ Clear Elementor cache and regenerate CSS
5. ✅ Test thoroughly on multiple pages
6. ✅ Fix any remaining issues manually

Prevention: Use a CDN plugin for future flexibility instead of hard-coding URLs in database.

Frequently Asked Questions

Q: Do I need to transfer the actual image files? A: Yes! URL replacement only updates links. Files must exist on new server.

Q: Will this affect my media library? A: Yes, in a good way. It updates attachment URLs to match new domain.

Q: Can I migrate images to a different folder structure? A: Possible but complex. Use Find/Replace for both old and new paths carefully.

Q: What about images in widgets outside Elementor? A: Search/replace in wp_posts and wp_options tables covers most standard WordPress widgets.

Q: Should I update GUIDs? A: Debatable. WordPress says no, but for domain changes, it’s usually safe and helpful.

Q: How do I test if all images updated? A: Search database for old domain: wp db search 'oldsite.com' --all-tables (WP-CLI)

Fixed your images? Share how many images you updated in the comments!

The post How to Replace Image URLs in Elementor After Migration appeared first on Elementor Search & Replace.