Preview could not be loaded error

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.

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.

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.

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 

Select Plain for Permalink structure

Follow the below steps:

1. Login to WP Admin.
2. Go to Settings > Permalinks.
3. Select Plain from Permalink structure.
   
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.

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.