Elementor “Preview Could Not Be Loaded”: How to Fix It

You click “Edit with Elementor”, the dark sidebar appears, and the right-hand side where your page should be stays empty. Sometimes the Elementor logo just keeps pulsing. Other times a box pops up with the words “The preview could not be loaded”, and that is as far as you get. The page itself is usually fine for visitors. You simply cannot change it.

This is one of the most common Elementor complaints, and it has a short list of causes. Most of them can be ruled out from the dashboard in a few minutes, without touching any files. This guide walks through them in the order we usually find them, starting with the checks that cannot break anything.

What the message actually means

The Elementor editor is really two things on one screen. The panel on the left is the editor. The area on the right is your real page, loaded inside a frame (an iframe) with some extra Elementor code added so you can click and drag things. When that inner page fails to load, or loads but never tells the editor it is ready, Elementor gives up and shows the preview error. The endless loading screen is the same failure without the message.

So the question is never “what is wrong with Elementor?” It is “why can’t this page load properly inside the editor frame?” That question has a handful of answers: a PHP error on the page, a script clash, the server running out of memory, a header that forbids framing, or the site address being slightly different from the address you are editing on.

If you are looking at a wider picture of Elementor trouble, such as widgets vanishing or the editor breaking after an update, our guide to common WordPress errors gives the map of related problems and where each one is covered.

Causes, roughly in order of how often we see them

1. A plugin that loads something Elementor does not expect

This is the usual suspect. Plugins that add pop-ups, cookie banners, chat widgets, optimisation scripts or extra Elementor widgets all inject code into the page. If one of them throws a JavaScript error inside the editor frame, the editor never finishes starting. Add-on packs for Elementor are a frequent source after either side updates, because the add-on may still be calling something Elementor has changed.

2. Optimisation and caching settings

Minifying, combining or delaying JavaScript is good for speed and bad for editors. If a performance plugin is delaying scripts until the visitor scrolls, or bundling Elementor’s files together with others, the editor can hang. CDN features that rewrite scripts on the fly can do the same. These settings should normally apply only to logged-out visitors, but not every setup is configured that way.

3. Not enough PHP memory

Elementor builds the preview with PHP before the browser sees it. Long pages with many sections, plus a few heavy plugins, can push past the memory WordPress is allowed to use. When that happens the inner page dies with a fatal error, and you see only the preview message. Elementor’s own system requirements ask for more memory than many cheap hosting plans give by default.

4. A security header that blocks framing

Some security plugins and server configurations send a header called X-Frame-Options set to DENY, or a Content Security Policy that forbids frames. These are meant to stop other websites from embedding yours. Set too strictly, they also stop your own editor from embedding your page. SAMEORIGIN is the setting that allows your own site to frame itself.

5. Address mismatch: http vs https, www vs non-www

If Settings > General says http://example.com but you are working on https://www.example.com, the editor and the preview end up on different addresses. Browsers treat those as different sites and block communication between them. You will often meet it in the days after switching to https or moving hosts.

6. The theme template

Elementor needs the page template to output the page content in the normal WordPress way. A badly built theme, or a custom template that skips that step, leaves Elementor with nowhere to place its content. In that case Elementor usually shows a different, more specific message about the content area not being found, but a broken template can also produce the generic preview error.

Fixes, from safest to most involved

Before you change settings, files or plugins, make a fresh backup and confirm you can download it. If the site has a staging copy, do the testing there. Our post on setting up a staging site explains how to get one if your host does not provide it.

1. Try another browser and a private window. Browser extensions, especially ad blockers and privacy tools, sometimes block the scripts Elementor loads. If the editor opens in a clean private window, the problem is on your computer, not the site.
2. Use Elementor’s Safe Mode. When the editor struggles to load, Elementor usually offers a link to enable Safe Mode; you can also find it under Elementor > Tools. Safe Mode loads the editor with other plugins and the theme switched off for the editing session only. Visitors see nothing different. If the editor opens in Safe Mode, you have proven the cause is a plugin or the theme.
3. Clear every cache. Clear your caching plugin, any host-level cache and the CDN. Then go to Elementor > Tools and regenerate the CSS and data files. Stale files left over after an update are a common reason for an editor that half-loads.
4. Turn off script optimisation temporarily. In your performance plugin, disable JavaScript minify, combine and delay features, then retest the editor. If it opens, turn the features back on one at a time and exclude Elementor’s scripts or the editor screen from whichever one breaks it.
5. Find the plugin. If Safe Mode worked, deactivate plugins in small groups (on staging if you can), testing the editor after each group. Elementor add-on packs, other page builders and anything that adds front-end scripts go first.
6. Check the site address. In Settings > General, make sure both address fields match exactly the address you see in the browser bar, including https and www. If they do not, fix them carefully, because a wrong value here can lock you out. If you have mixed http and https content after a move, our explanation of mixed content warnings covers the clean-up.
7. Look at the browser console. Press F12, open the Console tab and reload the editor. Red errors there often name the plugin file that is failing, or report that a frame was refused because of X-Frame-Options. Copy the text; it saves a lot of guessing.
8. Raise the memory limit. Elementor > System Info shows the memory WordPress is working with. You can raise it by adding define( 'WP_MEMORY_LIMIT', '256M' ); to wp-config.php, placed before the “stop editing” comment near the end of the file. Your host’s PHP limit still applies on top, so if nothing changes, ask them to raise it.
9. Read the error log. Turn on WP_DEBUG and WP_DEBUG_LOG, reproduce the problem, then open wp-content/debug.log. A fatal error logged at the exact moment you opened the editor tells you which file broke the preview. For help making sense of the entries, see our walkthrough of the WordPress error log.
10. Test the theme. On staging, switch to a default theme such as Hello Elementor or a recent Twenty theme and try the editor. If it works, the template needs fixing, not Elementor.

When the editor loads but the page in it looks wrong

A related problem: the editor opens, but the preview shows an unstyled page, missing fonts, or a layout that differs from the live site. That is usually a CSS problem rather than a loading failure. Regenerating Elementor’s CSS, clearing caches and checking for mixed content solves most of these. If the live site itself has lost its styling for desktop visitors, that is a separate fault, covered on our broken layout repair page.

Situations where we would stop and get help

Some cases are not worth fighting through alone:

• The editor broke straight after an Elementor or Elementor Pro update and rolling back is not an option you are comfortable with.
• The debug log shows a fatal error inside a premium add-on whose developer is not answering.
• Safe Mode also fails, which points to the server, memory limits or a security rule rather than a plugin.
• The site is a busy shop or a client site where testing on live is not acceptable.

In those cases the faster route is usually a proper conflict hunt on a copy of the site. Our page on tracking down plugin conflicts explains how that hunt is run and what you get at the end of it.

How to keep it from coming back

• Update Elementor and its add-ons together. Most editor breakages follow an update where Elementor moved forward and an add-on did not, or the reverse. Update them in the same session, on staging first if the site matters.
• Keep add-on packs to a minimum. Each widget pack adds code to every editor session. If you use two widgets from a pack of fifty, consider whether you need the pack at all.
• Set optimisation rules once and properly. Make sure your caching and script settings skip logged-in users and the editor. That single decision prevents a large share of loading problems.
• Watch the memory figure. Elementor > System Info is worth a glance after you add a big plugin. If the limit is tight, raise it before it becomes an outage.
• Keep the site address consistent. After any SSL change, domain change or move, check both address fields in Settings > General before you do anything else.

A quick way to describe the problem to someone else

If you do end up asking for help, the useful details are: which page fails (all of them, or one), whether Safe Mode opens, any red text from the browser console, the last thing that was updated, and a screenshot of Elementor > System Info. With that, the cause can often be narrowed down before anyone logs in.

If you would rather hand it over

A stuck editor is frustrating because the site looks fine to everyone except you. If you have tried Safe Mode and the cache steps and the preview still will not load, send us the error text or a screenshot on WhatsApp or through the contact form. We will take a backup, work on a copy where possible, and explain what was wrong once it is fixed. Our Elementor repair service page explains how that works.

Next in this series: Gutenberg Editor Problems: Blank Editor, Invalid Blocks