Elementor Stuck on Loading Screen? 15 Fixes to Unlock the Editor Fast

Is Elementor stuck on loading screen with a spinning logo? Try these 15 proven fixes from plugin conflicts and PHP memory to a quick DevTools hack to get the editor working again.

Quick Fix

If Elementor is frozen on the grey loading screen with the spinning logo, try this 30-second hack first: right-click the grey screen → Inspect → press Ctrl+F (or Cmd+F) → search for #elementor-panel-state-loading → click the matched node → press Delete.

This removes the loading overlay from the DOM and unlocks the editor instantly. If it reappears after reload, move on to the permanent fixes below.

What You’ll Learn

In this guide, you’ll learn why Elementor gets stuck on the loading screen and exactly how to fix it. Whether you’re staring at a grey void, a blinking Elementor logo, or a frozen widget panel, we’ve compiled every proven fix. By the end, you’ll diagnose the root cause and apply the right solution without guesswork.

What “Elementor stuck on the loading screen” means

When Elementor is “stuck on the loading screen,” the editor initializes but fails to complete its startup sequence. You typically see:

• A blank grey screen with the Elementor logo blinking or spinning endlessly
• The left widget panel is greyed out with a loading spinner that never stops
• A completely white page after clicking “Edit with Elementor”
• The editor UI partially loads, but the content preview area stays frozen

This happens because something is blocking Elementor’s JavaScript execution, preventing the editor from fetching page data, or stopping the preview iframe from rendering inside the editor. It’s one of the most reported Elementor issues and one of the most fixable.

Common Causes for the issue

Plugin & Theme Conflicts

The most likely reason for Elementor getting stuck is a conflict with another plugin or a custom script in your theme. Caching plugins, minification tools, security plugins, and even some WooCommerce extensions can interfere with Elementor’s JavaScript processing or the WordPress Heartbeat API that Elementor relies on.

Low PHP Memory Limit

Elementor is resource-intensive. If your PHP memory limit is set to 32MB or 64MB, the editor may run out of memory while loading complex pages and simply freeze.

Outdated PHP Version

Elementor requires PHP 7.4 or higher (and works best on PHP 8.1+). Running an outdated PHP version can cause the editor to fail silently or throw fatal errors during initialization.

Browser Extensions & Cache

Ad blockers, script blockers (like uBlock Origin or NoScript), and privacy extensions can mistakenly block Elementor’s scripts, preventing the UI from initializing. Outdated browser caches can also serve stale JavaScript files.

Caching & CDN Issues

Stale cache data whether from a caching plugin, server-level cache, or CDN can serve outdated JavaScript files that conflict with the current version of Elementor.

Cloudflare Rocket Loader

Cloudflare’s Rocket Loader defers JavaScript loading for speed, but it can break the order in which Elementor’s scripts initialize, causing a perpetual loading screen.

X-Frame-Options / Cross-Origin Errors

Elementor loads your page preview inside an iframe. If your server sends an X-Frame-Options: DENY header, the iframe is blocked and the editor shows a blank screen.

Corrupted Widgets or Content

A corrupted widget (especially Loop Grid or dynamic content widgets) can cause the editor to crash when it tries to load the page data. This often happens after plugin updates or when cached data goes out of sync.

Incompatible Elementor Free & Pro Versions

If Elementor Pro is updated but the free version isn’t (or vice versa), the codebases fall out of sync and the editor may hang.

Mixed HTTP/HTTPS Content

If some resources load over HTTP while your site uses HTTPS, browser security restrictions can block non-secure resources on a secure page, preventing scripts from loading correctly and freezing the editor.

Mismatched WordPress & Site URLs

If your WordPress Address (URL) and Site Address (URL) are different (for example, one uses http and the other https), Elementor may fail to load assets correctly.

Theme Preloader Overlays

Some themes inject a page preloader animation that stays active and blocks the editor from rendering. The preloader overlay sits on top of the editor and never disappears.

Before You Start

Before diving into fixes, confirm the scope of the problem:

Check if it’s site-wide or page-specific. Does Elementor fail on every page, or just one? If it’s one page, the content itself may be corrupted.

Open your browser console. Right-click the grey screen → Inspect → Console tab. Look for red error messages. These often point directly to the culprit (e.g., a specific plugin file, an X-Frame-Options error, or a missing module).

Note recent changes. Did you update Elementor, install a new plugin, or change themes right before the issue started?

Use a staging site. If possible, test fixes on a staging copy of your site to avoid disrupting your live visitors.

Step-by-Step Solutions

Fix 1: The 30-Second DevTools Hack

This is the fastest way to unlock a frozen editor when the loading overlay is stuck.

How to do it:

1. Open the page in the Elementor editor (even if it’s stuck).
2. Right-click the grey screen and select Inspect to open DevTools.
3. Go to the Elements tab.
4. Press Ctrl+F (Windows) or Cmd+F (Mac) and search for: #elementor-panel-state-loading
5. Click the matched node in the DOM tree.
6. Press Delete or Backspace to remove it.
7. The editor should unlock immediately.

Note: If the overlay returns after you reload the page, the underlying cause still needs to be fixed. Use this as a temporary workaround while you apply the permanent solutions below.

Fix 2: Hard Refresh & Clear Browser Cache

Outdated cached files in your browser can cause the editor to load old scripts.

How to do it:

1. Press Ctrl + F5 (Windows) or Cmd + Shift + R (Mac) while on the Elementor editor page.
2. Alternatively, go to your browser settings → Privacy & Security → Clear Browsing Data → select Cached images and files → click Clear data.
3. Try loading Elementor again.

Fix 3: Update Elementor & Elementor Pro

Mismatched or outdated versions are a common trigger.

How to do it:

1. Go to Dashboard → Updates or Plugins → Installed Plugins.
2. If updates are available for Elementor or Elementor Pro, update both.
3. Ensure both plugins are running the same version number after updating.
4. Clear your site cache and reload the editor.

Fix 4: Enable Elementor Safe Mode

Safe Mode loads the editor without third-party plugins or theme scripts, helping you isolate the cause.

How to do it:

1. Go to Elementor → Tools.
2. Under Debug Bar, set Safe Mode to Enable.
3. Click Save Changes.
4. Try editing a page with Elementor.
5. If it works in Safe Mode: A plugin or your theme is conflicting. Proceed to Fix 5 and Fix 6.
6. If it still doesn’t work: The issue is likely server-related (memory, PHP version, or hosting configuration).

Fix 5: Test for Plugin Conflicts

How to do it:

1. Go to Plugins → Installed Plugins.
2. Deactivate all plugins except Elementor and Elementor Pro.
3. Try loading the editor.
4. If it works, reactivate plugins one by one, testing Elementor after each activation.
5. When the editor breaks again, you’ve found the conflicting plugin.
6. Keep that plugin deactivated and contact its developer for a fix, or find an alternative.

Tip: Start with caching, minification, optimization, and security plugins, these are the most frequent offenders.

Fix 6: Switch to a Default Theme

How to do it:

1. Go to Appearance → Themes.
2. Activate a default WordPress theme like Twenty Twenty-Four or the Hello Elementor theme.
3. Try loading Elementor.
4. If it works, your theme (or a preloader script) is the issue.
5. Disable any preloader in your theme settings, or contact the theme developer.

Fix 7: Increase PHP Memory Limit

Elementor recommends at least 128MB, but 512MB is ideal for complex sites.

Method A: via wp-config.php

• Access your site files via cPanel File Manager or FTP.
• Open wp-config.php in the root directory.
• Find this line (or add it above /* That's all, stop editing! Happy publishing. */):

define( 'WP_MEMORY_LIMIT', '512M' );
define( 'WP_MAX_MEMORY_LIMIT', '512M' );

• Save the file.

Method B: via php.ini

• Create or edit php.ini in your root directory.
• Add:

memory_limit = 512M
max_execution_time = 90

• Save the file.

Method C: via .htaccess

• Open .htaccess in your root directory.
• Add:

php_value memory_limit 512M

• Save the file.
• Verify the change in Tools → Site Health → Info → Server.

Fix 8: Update PHP Version

How to do it:

1. Check your current version in Tools → Site Health → Info → Server.
2. If it’s below 7.4, log into your hosting control panel.
3. Find Select PHP Version (usually in cPanel) or contact your host.
4. Switch to PHP 8.1 or 8.2 (the latest stable version your host offers).
5. Save and test Elementor.

Fix 9: Disable Browser Extensions

How to do it:

1. Open an incognito or private browsing window (Ctrl + Shift + N in Chrome).
2. Log into your WordPress admin and try loading Elementor.
3. If it works, a browser extension is blocking it.
4. Disable extensions one by one in your normal browser to find the culprit. Common offenders: ad blockers, script blockers, and antivirus browser extensions.

Fix 10: Clear All Caches (Plugin, Server & CDN)

How to do it:

1. Elementor cache: Go to Elementor → Tools → Regenerate CSS & Data → click Regenerate Files.
2. Plugin cache: Clear cache in your caching plugin (WP Rocket, W3 Total Cache, LiteSpeed, etc.).
3. Server cache: Clear cache from your hosting panel (Cloudways, SiteGround, WP Engine, etc.).
4. CDN cache: If using Cloudflare or another CDN, purge all cache from the CDN dashboard.
5. If using object caching (Redis, Memcached), flush that too.
6. Reload the editor.

Fix 11: Disable Cloudflare Rocket Loader

How to do it:

1. Log into your Cloudflare dashboard.
2. Go to Speed → Optimization.
3. Scroll to Rocket Loader and disable it.
4. Go to Caching → Configuration → click Purge Everything.
5. Also consider creating a Page Rule to bypass caching for /wp-admin/*.
6. Test Elementor again.

Fix 12: Fix X-Frame-Options

How to do it:

• Right-click the grey screen → Inspect → Console.
• Look for an error mentioning X-Frame-Options or Refused to display in a frame.
• If found, contact your hosting provider and ask them to set (instead of DENY):

X-Frame-Options: SAMEORIGIN

• Alternatively, if a security plugin is adding this header, adjust its settings to allow same-origin framing.

Fix 13: Switch Editor Loader Method

This built-in Elementor setting splits data into smaller chunks to avoid server buffer limits.

How to do it:

1. Go to Elementor → Settings → Advanced.
2. Find Switch Editor Loader Method and set it to Enable.
3. Save changes and reload the editor.

Fix 14: Fix Mixed HTTPS URLs

If your site recently moved to HTTPS, mixed content can block Elementor scripts.

How to do it:

1. Go to Elementor → Tools → Replace URL.
2. In the Old URL field, enter your old HTTP URL (e.g., http://yourdomain.com).
3. In the New URL field, enter your new HTTPS URL (e.g., https://yourdomain.com).
4. Click Replace URL.
5. Back up your database before doing this.
6. Alternatively, install the Really Simple SSL plugin to force all content over HTTPS.

Also verify: Go to Settings → General and ensure both WordPress Address (URL) and Site Address (URL) use the exact same HTTPS URL.

Fix 15: Roll Back Elementor Version

If the issue started immediately after a recent Elementor update, the new version may contain a bug.

How to do it:

1. Go to Elementor → Tools → Version Control.
2. Select a previous stable version from the dropdown.
3. Click Reinstall or Rollback.
4. Test the editor. If it works, wait for Elementor to release a patch before updating again.

Common Mistakes

Mistake	Why It Happens
Only updating Elementor Pro, not the free version	Version mismatch breaks the editor. Always update both together.
Clearing only one cache layer	If you clear your plugin cache but not server/CDN cache, stale files persist. Clear everything.
Deactivating plugins in bulk without testing	You won’t know which plugin caused it. Deactivate one by one.
Editing wp-config.php without a backup	One typo can break your entire site. Always back up before editing core files.
Ignoring browser console errors	The console often tells you exactly what’s wrong. Always check it first.
Forgetting to check Safe Mode first	Safe Mode saves hours of guessing. Use it before manually deactivating plugins.
Not verifying URL settings after moving to HTTPS	Mismatched URLs cause asset loading failures that freeze the editor.

Advanced Fixes

Fix Corrupted Widgets via Element Manager

If a specific widget (like Loop Grid) is corrupted:

1. Go to Elementor → Element Manager.
2. Temporarily disable the problematic feature/widget.
3. Open the affected page and save it without that widget.
4. Re-enable the feature in Element Manager.
5. Rebuild the widget from scratch.

Disable Unused Widgets to Reduce Load

Having too many widgets active can overwhelm the editor, especially on shared hosting.

How to do it:

1. Go to Elementor → Element Manager.
2. Toggle off any widgets or widget categories you don’t use.
3. Click Save Changes.
4. If using third-party addon packs, use their built-in widget scanners to disable unused widgets.

Check Browser Console for JS Errors

1. Right-click the page → Inspect → Console.
2. Look for red errors. If you see a filename like plugin-name.min.js, that plugin is likely the cause.
3. If you see @elementor/editor-site-navigation – settings object not found, this indicates an Elementor module failed to initialize, usually due to a plugin conflict.

Verify WordPress & Site Address Match

1. Go to Settings → General.
2. Ensure WordPress Address (URL) and Site Address (URL) are identical.
3. Both should use https:// if your site has an SSL certificate.
4. If they differ, update them to match and save.

Prevention Tips

Keep Elementor & Pro in sync: Always update both plugins together.

Maintain regular backups: Use a plugin like UpdraftPlus before any major updates.

Use a staging environment: Test updates and new plugins on staging first.

Monitor PHP limits: Check Site Health monthly to ensure memory and PHP versions are optimal. Elementor recommends 768MB for best performance.

Choose compatible themes: Stick to Elementor-recommended themes like Hello Elementor, Astra, or GeneratePress.

Be selective with plugins: Only install well-maintained plugins from reputable developers.

Configure Cloudflare properly: Disable Rocket Loader for /wp-admin/* and create cache-bypass rules for the backend.

Regenerate CSS after updates: Make it a habit to click Regenerate CSS after every Elementor update.

Disable unused widgets: Reduce editor load by turning off widgets you never use in Element Manager.

Related Guides

• How to Fix the WordPress White Screen of Death
• How to Increase PHP Memory Limit in WordPress
• Elementor Not Loading? Full Guide
• WordPress Stuck in Maintenance Mode
• How to Fix WordPress 404 Error After Permalink Change
• How to Fix WordPress 403 Forbidden Error

Frequently Asked Questions

Q: Why is Elementor stuck on the loading screen with a grey background? A: The most common causes are plugin conflicts, low PHP memory, outdated PHP versions, browser extensions, caching issues, Cloudflare Rocket Loader, or a theme preloader blocking the editor’s scripts from initializing.

Q: How do I fix Elementor stuck on loading without losing my content? A: Start with non-destructive fixes: clear caches, update plugins, enable Safe Mode, and check for plugin conflicts. These won’t affect your content. Only advanced fixes like disabling corrupted widgets require rebuilding specific elements.

Q: What PHP memory limit does Elementor need to avoid the loading screen? A: Elementor’s official system requirements recommend a minimum of 128MB, but 512MB to 768MB is ideal, especially for complex pages with many widgets or dynamic content.

Q: Can a caching plugin cause Elementor to get stuck on the loading screen? A: Yes. Caching and minification plugins can serve outdated JavaScript or CSS files that conflict with Elementor. Always clear all caches after updating Elementor or troubleshooting loading issues.

Q: Is it safe to use Elementor Safe Mode? A: Absolutely. Safe Mode is a built-in debugging tool that temporarily disables third-party plugins and theme scripts only within the Elementor editor. It doesn’t change anything on your live site.

Conclusion

Elementor stuck on the loading screen is one of the most frustrating issues for WordPress users, but it’s also one of the most solvable. Start with the quick wins: try the DevTools hack, clear your cache, update Elementor, and enable Safe Mode. If those don’t work, systematically move through plugin conflicts, theme issues, PHP settings, server configurations, and URL mismatches.

Use your browser console as a diagnostic tool; it often reveals the exact cause immediately. By following the 15 fixes in this guide, you’ll be able to unlock the editor and prevent the issue from recurring.

If you’ve tried everything and the editor still won’t load, it may be time to contact Elementor support or your hosting provider with your console error logs in hand.