help center

On this page

Preview could not be loaded error

Last Update: February 12, 2024

Issue

Previewing a site gives an error. It is the most common error and is usually easy to fix.

Possible cause 

This error occurs when the preview of the page is not available.

Note
The UI of your version may differ from the one shown in the video.

The error message may provide you with more information about the cause. For example, in the following image, you can click Preview Debug to verify that there is no redirect on the page.

Preview Could Not Be Loaded Error 1

Elementor can sometimes detect the exact issue in the following cases:

  • No Theme: Some of your theme files are missing.
  • Corrupted .htaccess: ‘Your site’s .htaccess file appears to be missing.’
  • HTTP Errors: format is <error code> <error message> content depends on the code.
Note
If this message is received on a WooCommerce template or an archive page, such as the Blog page, this is normal. In this case, use the WooCommerce Builder or the Theme Builder instead of trying to directly edit these pages.

Solutions

To fix this issue, try one or more of the following solutions:

Enable Safe Mode

Follow the procedures in What is Safe Mode?

Theme file should exist

Make sure the theme files exist. If no theme is available, install or re-install a theme.

Site Address (URL) should be the same as the WordPress URL

If your URL in the back-end is different than the one in the front-end it can cause loading issues. These URLs can be checked in Settings > General. For more information, see Giving WordPress Its Own Directory – Documentation 

Follow the below steps:

  1. Login to WP Admin.
  2. Go to Settings > Permalinks.
  3. Select Plain from Permalink structure.
    Preview Could Not Be Loaded Error 2
  4. Click Save Changes.

When using pretty permalinks, you should configure the web server (Apache, Nginx, LightSpeed, Microsoft IIS) as per the information provided in Using Permalinks.

Contact your hosting provider and ask them to configure your web server accordingly.

Edit in incognito mode with your browser

This rules out any issue with an add-on or with the browser cache. 

In Chrome, at the top right, click More > New Incognito Window. A new window appears. In the top corner, check for the Incognito icon indicating you are in fact in incognito mode. Now, navigate back to Elementor and see if the error persists. Also make sure no add-ons are working in incognito mode. You may, try a different browser altogether.

Solve Rocket Loader issue

Elementor and Cloudflare integrate smoothly with each other. To solve integration issues, if any, refer Elementor And Cloudflare Rocket Loader

Verify that you do not have a redirect on the page

You can check this by clicking the Debug Preview button.

If you rename the index.php file or include anything else in its content other than the WordPress requirement, this will also result in this error. If you cannot edit your templates, look for “index.html” under your public_html folder and remove it.

Preview Could Not Be Loaded Error 3

Solve hosting issues

Verify with your hosting provider if your WordPress install includes the .htaccess file. If your .htaccess file is missing, you can regenerate it. For details, see Settings Permalinks Screen – Documentation – WordPress.org. Also, check with your hosting company if your server erases the PHP $_GET variable.

HTTP Errors

Possible solutions for different types of HTTP errors are listed as follows:

403 errors

  • You may have a corrupt .htaccess file –  Follow the below steps to solve this issue:
    1. Download your current .htaccess file to save as a backup. 
    2. Delete it from your server.
    3. Visit your site. A new default .htaccess file will automatically be generated.
      If this solves your problem, look at the .htaccess file you downloaded to determine if there is any code within it that needs to be corrected.
  • Your file permissions may not be correct –  Ask your host to check that your WordPress directories and files have the correct permissions.
  • This can be due to a security plugin – To sort this out, activate the learning mode of the plugin or contact their support.
  • This issue can also be due to the firewall of your server, such as mod_security – Check this with your hosting company.
  • Another plugin may be causing a conflict – Follow the below steps to resolve:
    1. Deactivate all plugins except Elementor. 
    2. Preview the site and check if the problem is resolved. If the problem is resolved, you know that one of the plugin is the problem. 
    3. Reactivate each plugin, one at a time, testing your site with each reactivation. 
    4. Keep testing until you find the plugin that is causing the failure. 
    5. Get in touch with that plugin’s developers to request assistance or use another plugin with similar functionality.

401 errors

This issue occurs when you are attempting to access a page that requires authentication. If the page shouldn’t be asking for authentication, do the following:

  • Ask your host to remove the authentication requirement.
  • Check any security plugins you may be using for options to turn this off.

500 errors

For debugging, see I Get 500 Error While Using Elementor

Have more questions? We’re more than happy to assist.

Link is copied to clipboard!
On this page

Is this article helpful?

Share this article