How to Move an Elementor Site to a New Domain Without Breaking Layouts

Moving a WordPress site to a new domain sounds simple: copy the files, copy the database, point the domain, done. Then you open your Elementor pages and find broken images, missing backgrounds, buttons linking to the old domain, and layouts that look strangely unstyled.

The reason is that Elementor stores page data, including URLs, in a format that a normal search and replace does not always catch, and it caches CSS files that still reference the old address. In this guide you will learn a reliable process for moving an Elementor site to a new domain, or from staging to live, without breaking anything.

Before You Start

• Take a full backup of files and database on the old site.
• Write down both URLs exactly, including https and with or without www, for example https://old-site.com and https://www.new-site.com.
• Prepare SSL on the new domain so you can use https from the first moment.
• Plan a quiet time to switch, especially for busy sites or online stores.

Step 1: Move the Site

Use a migration plugin or your host's migration tool to copy files and database to the new location. Good migration tools also replace URLs in the database during the move, including serialized data. This handles most of the work, but not everything Elementor needs.

If you migrate manually, update the WordPress Address and Site Address under Settings > General, or in wp-config.php, before logging in on the new domain.

Step 2: Use Elementor's Replace URL Tool

Elementor stores its page data as JSON, and URLs inside it are escaped. A generic search and replace may miss them. Elementor provides its own tool for exactly this:

1. Go to Elementor > Tools in your dashboard.
2. Open the Replace URL tab.
3. Enter the old URL and the new URL exactly as they should appear.
4. Click Replace URL.

Run it once for each variation you used, for example http and https, or with and without www. Do not include a trailing slash unless you are certain both URLs use one.

Step 3: Regenerate CSS and Data

Elementor caches generated CSS files that may still point to the old domain. In Elementor > Tools > General, use the option to regenerate files and data. Elementor rebuilds the CSS the next time each page loads.

Then clear every other cache layer: your caching plugin, server cache, and CDN.

Step 4: Sync the Template Library

If templates or the library look out of date, use the option in the same Tools area to sync the library. This refreshes the template data from Elementor's servers.

Step 5: Check Settings That Contain URLs

Some URLs live outside Elementor's page data:

• Menus: custom links in Appearance > Menus.
• Theme Builder conditions: usually fine, but check headers and footers display correctly.
• Custom Code and Custom CSS: hard-coded URLs to images, fonts, or scripts.
• Forms: redirect URLs after submission and webhook endpoints.
• Popups: trigger rules based on URLs.
• Third-party plugins: SEO plugins, caching settings, and analytics.

Step 6: Test Thoroughly

Go through a short checklist on the new domain:

• Open the home page and a few key pages on desktop and mobile.
• Check background images, sliders, and galleries.
• Click buttons and menu links; none should lead to the old domain.
• Submit a test form and confirm the email arrives.
• Open the editor on a few pages to confirm it loads normally.
• View the page source and search for the old domain name.

Step 7: Redirect the Old Domain

If the old domain had traffic or search rankings, set up permanent 301 redirects from every old URL to the matching new URL. This passes visitors and most search value to the new domain. Then:

• Add the new domain in Google Search Console and submit your sitemap.
• Use the change of address tool if you are moving a whole domain.
• Update your domain in social profiles, ads, and email signatures.

Moving from Staging to Live

The same process applies when you build on a staging site and push it live. Many hosts offer a one-click push from staging to production. Afterwards, still run Replace URL if any staging addresses remain, regenerate CSS, and clear caches.

Troubleshooting

• Pages look unstyled. Regenerate CSS, clear all caches, and check the CSS Print Method in Elementor's settings.
• Some images still point to the old site. They are probably in custom CSS, custom code, or a theme setting. Search for the old domain and update manually.
• Mixed content warnings. Some resources still load over http. Replace http URLs with https and check custom code.
• Editor does not load. Clear caches and check that the WordPress and Site Address settings match the new domain exactly.

Wrapping Up

A clean Elementor migration comes down to a few extra steps after the usual move: run Elementor's Replace URL tool, regenerate CSS and data, clear every cache, and check the places where URLs hide outside the page builder. Follow this order and your site arrives at its new home looking exactly like it did at the old one.