21 Simple Solutions to Fix Elementor Stuck on Loading

1. Start by clearing your browser's cache

Sometimes, your browser saves files in its cache and cookies, which can cause issues. Clearing your browser cache and cookies might fix the problem. Give it a try and see if that helps.

2. Try making a hard refresh

If your browser doesn’t load all the resources of a website properly, it might cause the Elementor sidebar panel to freeze. Doing a hard refresh, which you can do by pressing CTRL + SHIFT + R on Windows or CMD + SHIFT + R on a Mac, can often solve this issue.

3. Disable any browser extensions or addons you have

Browser extensions may disrupt Elementor sidebar loading

Certain browser extensions might cause the Elementor sidebar to have loading problems. Some extensions, like an Adblocker, could block or interfere with Elementor’s scripts.

To check if this is the problem, try opening the Elementor editor in an incognito or private browsing window to see if it functions correctly there. If everything works fine in incognito mode, then it’s likely an extension causing the issue. You can disable all your extensions and then turn them back on one by one to figure out which one is the problem.

For instance, in Chrome, you can manage your extensions by going to chrome://extensions/ in your browser.

4. Clear your website's cache

Website Cache is like a memory bank on your computer that keeps parts of websites, like pages and pictures, so they load faster next time you visit. If you’re using a cache plugin on your website, clearing its cache might help fix the issue. Sometimes, the cache might save data that conflicts with the Elementor editor, preventing it from loading properly. 

If the cache plugin isn’t set up correctly, this kind of problem can happen.

Most cache plugins offer a simple way to clear the cache. Give it a try and see if that resolves the issue.

5. Check if there are any conflicts in your plugins

Elementor may fail to load due to conflicts with other WordPress plugins

Another usual reason Elementor might not load is because of conflicts with other plugins on your WordPress site. Sometimes, different plugins don’t work well together, which can lead to errors.

Identifying and resolving plugin conflicts isn’t always straightforward, but you’ll need to check if a specific plugin is causing the problem with Elementor.

Here’s how you can do it from your Dashboard: Navigate to Plugins > Installed Plugins.

On a staging copy of your site, record which plugins are active, then select all the plugins except for Elementor and Elementor Pro (if you’re using it). From the Bulk Action dropdown menu, choose Deactivate and hit Apply. Test Elementor briefly, then immediately restore security protection and reactivate the plugins that were previously active. Keep your live site protected during troubleshooting.

6. Make sure Elementor and all your other plugins are up to date

Keep Elementor and plugins updated for best performance

Outdated plugins can sometimes lead to issues with Elementor not loading properly. The solution is straightforward: always ensure that you’re using the most recent versions of Elementor and Elementor Pro (if you’re using it) to avoid the loading problems.

It’s also a good idea to keep all your other plugins updated to prevent any potential conflicts with Elementor.

To see if any of your plugins need updates, go to your WordPress Dashboard and navigate to Plugins > Installed Plugins. If updates are available, go ahead and update your plugins.

Additionally, you can check for updates by going to Dashboard > Updates to confirm if everything is up to date.

7. Go through your widgets and disable unused ones

Elementor offers a wide range of widgets to design stunning websites, yet many users find they don’t use all of them. Loading too many widgets simultaneously can cause the Elementor widget panel to freeze.

To help with this, it’s a good idea to disable the widgets you’re not using. This can lighten the load on your server, which is particularly helpful if you’re unable to increase the PHP memory size. 

8. Switch to a default WordPress theme

To address Elementor infinite loading, ensure theme compatibility with updates

Here’s another tip to tackle the Elementor infinite loading issue. While most WordPress themes are compatible with the Elementor page builder, sometimes they can clash with the plugin, especially after new updates.

To check if a theme conflict is causing your problem, you can temporarily switch to a default WordPress theme, such as Twenty Twenty-Three or Twenty Twenty-Two.

To change the current theme, go to Appearance > Themes in your WordPress dashboard. Then, hover over the theme you want to use and click on the “Activate” button.

After switching themes, see if the Elementor loading issue persists. If changing the theme fixes the problem, then it is probably a theme issue.

9. Change the editor loader method in the Elementor Settings

Adjust Elementor editor loader method in SettingsTo fix the Elementor not loading issue, there’s a built-in solution that alters how the editor loads.

Here’s how to do it:

1. From your Dashboard, navigate to Elementor > Settings.
2. Click on the Advanced tab.
3. In the Switch Editor Loader Method dropdown, select Enable, then click on the Save Changes button.

After making this change, go ahead and check the Elementor editor to see if the issue has been resolved.

10. Make sure your WordPress Address (URL) and Site Address (URL) match

Ensure WordPress Address (URL) matches Site Address (URL)

In WordPress, the WordPress Address (URL) and Site Address (URL) are typically the same. However, if you want your homepage to have a different URL from where WordPress is installed, you may change them.

This difference in URLs can also lead to problems.

To check this from your Dashboard, go to Settings > General.

Ensure that both the WordPress Address (URL) and Site Address (URL) are identical and include ‘https’ for security.

11. Fix mixed HTTPS content issues if you've recently moved to HTTPS

HTTPS makes sure the information you send or get from a website is safe. It’s like sending a letter in a locked box instead of a clear envelope.

It’s important to make sure that all the content on your website is delivered using the same secure method, either all through HTTPS (which is the safer option) or all through HTTP. Mixing both types is not recommended.

What is Mixed Content? Mixed content happens when a website has both secure (HTTPS) and non-secure (HTTP) elements. This could include images, videos, scripts, and more. It means parts of your site are encrypted with HTTPS, while others are not, posing a security risk.

How to Fix Mixed HTTPS Content:

1. Replace URLs with Elementor Tools: Elementor offers a built-in tool for addressing mixed HTTPS content, especially useful if you’ve changed your domain or switched to HTTPS.

For example, if you’re moving from http://example.com to https://example.com:

Resolve mixed HTTPS content issues after switching to HTTPS

• Navigate to Elementor > Tools > Replace URL from your Dashboard.
• Enter your old URL in the old-url field and your new URL in the new-url field.
• Click on the Replace URL button.

2. Using Really Simple SSL: Another method is to use the Really Simple SSL plugin, which is free. This plugin will ensure all your content is served over HTTPS, fixing the mixed content issue.

12. If you're using Cloudflare or a similar service, check for any issues related to Rocket Loader or similar features

If you’re using Cloudflare to enhance your site’s performance, the Rocket Loader feature might be why the Elementor widget panel freezes up.

Rocket Loader works by delaying the loading of your site’s JavaScript until after other elements have loaded, which can lead to issues.

Turning off Rocket Loader could fix the problem:

1. Sign in to your Cloudflare account and pick your domain.
2. Go to Speed > Optimization in the left-hand menu.
3. Look for the Rocket Loader option and switch it off.

13. Check for security plugin or firewall conflicts

Test security plugin conflicts on a staging copy and restore protection immediately

A security plugin or server firewall can sometimes block requests that Elementor needs. Ask your hosting provider to check the logs and identify the specific rule involved. Test plugin conflicts on a staging copy of your site. If a security plugin must be disabled briefly for that test, re-enable it immediately afterwards, whether or not the test resolves the issue. Keep your live site protected and have your host adjust only the confirmed conflicting rule.

14. Check your PHP version and update it if needed

Review PHP version and update if necessary

Use a PHP release that still receives security updates and meets Elementor’s current requirements. Ask your host to confirm compatibility with WordPress, your theme and your plugins. Back up your site and test the PHP upgrade on a staging copy before changing the live site. PHP is a tool for making websites interactive. PHP memory size is how much computer memory is given to these PHP tools to do their job. More memory means they can handle bigger tasks.

Looking at your sidebar menu, here’s how to check and update your PHP version:

1. Go to Elementor > System Info in your WordPress dashboard.
2. Look for the “PHP Version” section to see which version your site is currently using.
3. Check the PHP supported versions list. If your version no longer receives security updates or does not meet Elementor’s requirements, arrange a compatible upgrade with your host.

Updating PHP is usually straightforward with most hosting providers, and they often provide guidance in their help documentation.

If you’re using cPanel:

• Find the “Select PHP Version” option and choose a release that still receives security updates and has passed your compatibility checks.
• Click on it, then select “Switch to PHP options” on the next page.
• Here, you can change the PHP version.

After updating, go back to Elementor > System Info to make sure the PHP version has been updated successfully.

15. Increase your PHP memory limit

A common issue that can prevent the Elementor editor from loading is not having enough PHP memory allocated on your server. If your hosting service allows it, increasing the PHP memory limit is a straightforward process.The PHP memory size refers to the amount of computer memory allocated to PHP scripts, allowing them to run. With more memory, these scripts can manage larger tasks more effectively.

Here’s what you need to do:

Increase your PHP memory limit by going into the root folder

1. Go to the root folder of your WordPress installation.
2. Look for the wp-config.php file.
3. Right-click on this file and select Edit to open it in a text editor.
4. In the editor, you’ll want to add this line: define(‘WP_MAX_MEMORY_LIMIT’, ‘512M’);This increases the memory limit for administrative actions.
5. Directly below that, add another line: define(‘WP_MEMORY_LIMIT’, ‘512M’); to increase the memory limit for public-facing pages. Your code should look like this:

define(‘WP_MAX_MEMORY_LIMIT’, ‘512M’);
define(‘WP_MEMORY_LIMIT’, ‘512M’);

       6. Save your changes to the file.

Boost PHP memory limit for better performance

If you prefer to make these changes without accessing your server files directly, you can use a File Manager plugin from the WordPress backend.

After you’ve made these changes, you can check to see if they were successful:

• From your Dashboard, go to Tools > Site Health, then click on the Info tab and select Server.
• Look for the PHP memory limit to confirm it reflects the new limit you set.

16. Try reinstalling Elementor

Some users have solved this issue by reinstalling the plugin. Here’s how you can do it:

1. Go to your WordPress Dashboard, navigate to Plugins > Installed Plugins.
2. Deactivate Elementor and Elementor Pro (if you’re using it) by clicking on the “Deactivate” link for each plugin.
3. After deactivation, click on “Delete” to remove Elementor and Elementor Pro from your site.
4. If you have a cache plugin installed, clear your cache now to remove any stored versions of your site.
5. Next, reinstall Elementor and Elementor Pro by adding them again through the Plugins section and activate them.

This process might fix the problem with Elementor not loading.

17. Turn off any cache and performance plugins temporarily.

If Elementor isn’t loading due to a cache or performance plugin, try this quick fix:

1. Deactivate Your Cache/Performance Plugin: In the WordPress Dashboard under Plugins > Installed Plugins, find and deactivate your cache or performance plugin.
2. Test Elementor: With the plugin deactivated, check if Elementor loads correctly.
3. Identify the Issue: Reactivate the plugin and turn off its features (like page caching or minification) one by one to see which one is causing the problem.

This method helps you find and fix conflicts, ensuring Elementor works smoothly.

18. Install the Query Monitor plugin to diagnose any underlying issues

Use Query Monitor plugin to diagnose issues

To troubleshoot Elementor issues with the Query Monitor plugin:

1. Install Query Monitor: In the WordPress Dashboard, go to Plugins > Add New, search for “Query Monitor,” install, and activate it.
2. Check Logs: Activate Query Monitor, replicate your Elementor issue, and then check the Query Monitor stats in the admin bar for errors or high query plugins.
3. Identify & Report Issues: Find the plugin causing problems through Query Monitor, deactivate it to verify, and inform the plugin developer with the specifics for a potential fix.

Query Monitor helps diagnose and resolve Elementor and other WordPress issues efficiently.

19. Check your Site Health under WordPress tools

To identify and fix issues affecting Elementor on your WordPress site, use the Site Health feature:

1. Access Site Health: Go to Tools > Site Health > Status in the WordPress Dashboard.
2. Review Errors: Check for warnings or errors on the Site Health Status page to understand potential impacts on your site’s performance, security, or functionality.
3. Address Issues: Follow the Site Health recommendations to resolve errors, which may range from simple updates to more technical fixes.
4. Seek Further Guidance: For complex issues, consult online resources, the WordPress Codex, or support forums for advice.

Regularly using Site Health helps ensure a smooth, conflict-free experience with Elementor and other plugins.

20. Regenerate your CSS and data

Regenerate CSS files to fix Elementor issues

For users experiencing issues with Elementor, one potential fix is to regenerate the CSS files. CSS stands for Cascading Style Sheets. CSS files contain styling instructions that dictate the appearance and layout of web pages. These instructions include rules for formatting text, positioning elements, setting colors, and defining other visual properties of HTML elements. 

This can often solve problems related to styling and display. Here’s how to do it:

1. Navigate to the Regeneration Tool:
   • Go to your WordPress Dashboard.
   • Click on Elementor > Tools > General.
2. Regenerate CSS & Data:
   • Look for the “Regenerate CSS & Data” button and click on it. This action will prompt Elementor to recreate the CSS files for your site.

This process can help fix various issues by ensuring that all the CSS files Elementor uses are up to date and correctly generated, potentially resolving any styling issues or glitches you’re experiencing with the Elementor editor or your live site.

21. As a last resort, consider changing your hosting provider.

Try changing your hosting provider for better performance.

If Elementor still won’t load despite trying all fixes, consider changing your hosting. Hosting quality greatly affects your site’s performance and Elementor’s functionality. Make sure any new host meets Elementor’s requirements for a smooth operation. A better host can enhance your use of Elementor’s features.