Elementor Stuck on Loading Screen: Causes and How to Fix It

Quick Answer: How to Fix Elementor Stuck on Loading Screen

When the Elementor stuck on loading screen issue occurs, the visual page builder displays an infinite spinning gear or a blank grey screen instead of loading your page layout. This is almost always caused by an insufficient PHP memory allocation, a JavaScript conflict from another plugin or optimization script, or cached asset mismatches.

To fix this immediately:

1. Enable Safe Mode: Navigate to WP Admin > Elementor > Tools and enable Safe Mode to isolate the builder environment from third-party plugin scripts.
2. Increase PHP Memory Limit: Ensure your WP_MEMORY_LIMIT is set to at least 256M (or 512M for heavy sites using plugins like WooCommerce) in your wp-config.php file.
3. Regenerate CSS & Data: Go to WP Admin > Elementor > Tools and click Regenerate Files & Data to clear corrupted layout caches.

Common Symptoms

The failure of the Elementor editor to launch typically presents in one of three ways:

• Infinite Preloader: The main workspace remains covered by the dark Elementor loading screen with a pulsing or spinning icon that never finishes loading.
• Blank Grey Screen: The left-hand panel loads widgets, but the main content canvas is completely grey or transparent, failing to fetch page sections.
• Widget Panel Timeout: The page canvas renders, but the left-hand panel displays a continuous loading animation and fails to load widgets.

Primary Causes of Elementor Builder Freezes

Understanding why the editor hangs helps narrow down the correct fix without risking live site downtime.

1. Insufficient PHP Memory Limit

Elementor relies on substantial server-side resources to dynamically compile elements in real time. If your WordPress site is capped at the default 64M or 128M limit, the editor script exhausts memory mid-execution and crashes before the iframe renders.

2. JavaScript Execution Errors and Plugin Conflicts

Because the builder UI heavily depends on JavaScript, any script error thrown by a third-party plugin, custom code snippet, or theme feature can break the entire execution stack. Optimization plugins that defer or minify critical scripts are common culprits.

3. HTTP/HTTPS Protocol Mismatches

If your WordPress site configuration contains a mismatch between the WordPress Address (URL) and Site Address (URL) (such as one using http:// and the other using https://), the browser blocks the editor preview iframe due to cross-origin security restrictions.

4. Outdated Asset Caches and CDN Features

Corrupted local assets, stale browser caches, or aggressive CDN features—such as Cloudflare Rocket Loader—can intercept or rewrite core Elementor scripts, preventing them from initializing correctly inside the browser.

Diagnostic Checklist & Safe Fixes

Always perform safer diagnostic checks before altering core configuration files or your site database.

Step 1: Test with Elementor Safe Mode

Elementor includes a built-in diagnostic tool called Safe Mode. It creates an isolated environment for the editor by bypassing all third-party plugins and theme code without affecting what live visitors see on your front end.

1. Log in to your WordPress dashboard.
2. Navigate to Elementor > Tools.
3. Locate Safe Mode, select Enable from the dropdown, and click Save Changes.
4. Open the problematic page in Elementor. If it loads properly, the issue is caused by a theme or plugin conflict.

Step 2: Regenerate Elementor Files and Data

Outdated dynamic CSS files or cached widget data can disrupt editor rendering. Regenerating asset files forces Elementor to rebuild its internal style sheets.

1. Go to WP Admin > Elementor > Tools.
2. Under the General tab, click Regenerate Files & Data.
3. Click Save Changes, clear your local browser cache, and re-test the editor.

Step 3: Resolve Protocol Mismatches

Check for cross-origin issues caused by inconsistent URLs in site settings.

1. Navigate to Settings > General in your WordPress admin menu.
2. Verify that both WordPress Address (URL) and Site Address (URL) match exactly, including the protocol (https:// vs http://).
3. If you recently migrated or installed an SSL certificate, ensure proper redirection is active. For underlying SSL handshakes or certificate mismatch issues, review our guide on ERR_SSL_VERSION_OR_CIPHER_MISMATCH Causes and Solutions.

Advanced Step-by-Step Fixes

If basic diagnostics do not resolve the issue, proceed with server-level resource adjustments and script isolation.

Increasing PHP Memory Allocation

According to official Elementor documentation, the builder requires a minimum WP_MEMORY_LIMIT of 256M, with 512M recommended for complex sites or stores running heavy eCommerce extensions. If your store builder hangs, see our guide on resolving a WooCommerce Checkout Stuck Loading issue, which often shares root server memory causes.

To increase your limit via wp-config.php:

1. Connect to your web server using FTP or your hosting control panel's File Manager.
2. Locate the wp-config.php file in your WordPress root directory.
3. Add the following code snippet right before the line that reads /* That's all, stop editing! Happy publishing. */:

define('WP_MEMORY_LIMIT', '256M');

If server resources permit, set this value to 512M. Note that editing core system files carries risk; always create a complete backup before editing server files.

Configuring php.ini and .htaccess

If your hosting environment restricts changes inside wp-config.php, you can update your resource limits directly via php.ini or .htaccess depending on your web server stack (Apache vs Nginx).

In your php.ini file, set or update these directives:

memory_limit = 256M
max_execution_time = 300

If using an Apache server, add these lines near the top of your .htaccess file:

php_value memory_limit 256M
php_value max_execution_time 300

Isolating Plugin and CDN Conflicts

If Safe Mode confirmed a plugin conflict, systematically identify the broken dependency:

1. Deactivate all third-party plugins except Elementor and Elementor Pro.
2. Re-open the Elementor editor.
3. Re-activate plugins one by one, testing the editor after each activation until the failure recurs.
4. If using Cloudflare, turn off features like Rocket Loader or create a Page Rule to bypass auto-minification and JS optimization on URLs containing elementor or action=elementor. If you experience proxy connectivity issues during CDN adjustments, check our article on Cloudflare Error 522 Fixes.

Verification & Prevention

Once you regain access to the visual editor, verify system stability:

• Navigate to Elementor > System Info in WordPress and verify that your PHP Memory Limit shows at least 256M.
• Check browser developer tools (F12) under the Console tab while loading the editor to verify no remaining red JavaScript syntax or cross-origin errors exist.
• Keep Elementor core, Elementor Pro, theme files, and third-party plugins updated to stable versions tested on your current PHP release.

When to Contact Hosting Support

If you have implemented the steps above and still experience an infinite loading screen, contact your web hosting provider. Request assistance with:

• Verifying whether server-level security rules (like ModSecurity firewalls) are blocking backend admin AJAX requests or REST API calls.
• Confirming that your physical hosting plan allows PHP memory overrides up to 256M or 512M without hitting hard account caps.
• Checking system server logs for underlying memory allocation failures or PHP fatal errors.

Sources & References

• Elementor Official Help: Elementor stuck on loading screen
• Elementor Official Help: Elementor widget panel not loading
• Kinsta Knowledgebase: How To Fix the Elementor Not Loading Error