Skip to content

How to fix "Sorry, the content area was not found in your page" in Elementor

Elementor draws its editor where the theme prints the page's content. This message means the page that answered the editor has no such place. Switch the page to one of Elementor's own templates, add the content call to the theme, or remove whatever answered in the page's place.

By
WP Ministry
Published
Tested on
WordPress 7.1.3, PHP 8.3.35

In short

  • Nothing is lost. The editor did not open, so nothing was changed, and visitors see the page as before.
  • Elementor looks for one marked box in the page. A template that never prints the page's content never prints the box.
  • The quickest fix is in Quick Edit. Set the page's Template to Elementor Full Width or Elementor Canvas, which print the content themselves.
  • The lasting fix for a theme is the WordPress loop with the_content() in its page template, added in a child theme.
  • In a block theme, the page's template needs the Content block.
  • The Posts page and the WooCommerce shop page cannot be edited this way at all. A checkout page needs something in the cart first.

Elementor draws its editor in the place where your theme prints the page's content. The template WordPress chose for this page never prints it, so Elementor has nowhere to draw.

The box has a heading, "Sorry, the content area was not found in your page.", and one line under it: "You must call 'the_content' function in the current template, in order for Elementor to work on this page." Its buttons are "Learn More" and "Go Back". Nothing has been lost. The editor did not open, so nothing was saved or changed, and visitors see the page as they did before.

What Elementor is looking for

When you click "Edit with Elementor", the editor loads your page inside a frame, with elementor-preview and the page's ID added to its address. For that one request Elementor swaps the page's content for an empty box that carries the page's ID. It makes the swap through the_content(), the WordPress function a template calls to print a page's content. The editor then searches the frame for the box: for a page with the ID 123, an element with the class elementor-123. When there is none, it shows this message.

Three things follow, and they sort the causes:

  • A template that never calls the_content() never prints the box. The page can look complete, with its header, title and footer, and still have no content area.
  • The box is made only for the page being edited, and only for a signed-in user who may edit it. If a different page answers the request, there is no box with this page's ID in it.
  • This message means Elementor's own script did load in the frame. When the page that answers carries no Elementor script at all, the editor shows a different message, "The preview could not be loaded".

How to tell which cause you have

Ask for the page the way the editor does, and look at what comes back.

  1. Step 1: Find the page's ID

    It is in the editor's address, after post=. In post.php?post=123&action=elementor the ID is 123.

  2. Step 2: Open the editor's request in a new tab

    Stay signed in, and use the same browser. Take the page's own address and add ?elementor-preview= and the ID to the end, as in https://example.com/about-us/?elementor-preview=123. If the address already has a ? in it, add &elementor-preview=123.

  3. Step 3: Compare what you see with the table

    Then right-click the page, choose View Page Source, and search for data-elementor-id="123" with your own ID. That is the box the editor looks for.

What the tab showsCauseFix
Your page with the site's header and footer, and no data-elementor-id with your ID in its sourceThe template prints no contentSwitch the page's template. If it works, decide later whether to repair the theme.
The same, and Appearance in the dashboard has an Editor itemA block theme's template has no Content blockSwitch the page's template, or add the Content block
A "coming soon" or maintenance screen, a members' sign-in or sales page, or a layout from another builderAnother plugin replaces the pageOpen the editor in Safe Mode, then find the plugin
A different page, or the address in the bar changesA different page answersFind what answers in the page's place
The page has no "Edit with Elementor" link at allWordPress fills the page by itselfUse an ordinary page
The box is there, with your IDThe page is sound when asked directlyClear the browser's cache and try the editor in a private window, as Elementor's help page advises

Where it goes wrong

A page request passes through each of these in turn. This one comes from the theme.

  1. Browser
  2. DNS
  3. HTTPS
  4. CDN or firewall
  5. Web server
  6. PHP
  7. WordPress (this error comes from here)
  8. Database and files

What causes it

How to fix it

Switch the page to a template that prints its content

  • Easy
  • Low risk
  • About 5 minutes
  • Steps tested on WordPress 7.1.3

Try this first. It changes one setting on one page and no code.

Elementor adds page templates of its own to every site. Two of them print the page's content themselves, so they work even where the theme's templates do not. Elementor's help describes them: Elementor Full Width "displays the Elementor created content including the Header and Footer", and Elementor Canvas "displays only the Elementor created content without the Header, Footer, Content, or Sidebar".

  1. Step 1: Open Quick Edit for the page

    Go to Pages, then All Pages. Point at the page and click Quick Edit. The Template list shows what the page uses now. Write it down.

  2. Step 2: Choose another template

    • If the list shows a template with a name, such as a landing page layout, choose Default template. The page then uses the theme's ordinary page layout.
    • If it already shows Default template, or the default does not help, choose Elementor Full Width to keep the theme's header and footer, or Elementor Canvas for a page with nothing on it but what you build.

    The list also has an entry called Theme. It asks for the theme's own layout, which is the one that failed.

  3. Step 3: Click Update, then open the editor

    Click Update, then "Edit with Elementor". The editor opens and the message is gone.

  4. Step 4: Look at the page as a visitor

    The choice changes the live page as well. With Elementor Full Width or Elementor Canvas, whatever the theme's own template put around the content, such as a title or a sidebar, is no longer there. Open the page in a private window and check it.

With WP-CLI, this prints the template a page uses, with the page's ID in place of 123:

bash
wp post meta get 123 _wp_page_template

default, or nothing at all, is the theme's default template. A file name such as template-landing.php is a page template of the theme's. This sets one:

bash
wp post meta update 123 _wp_page_template elementor_header_footer

elementor_header_footer is Elementor Full Width, elementor_canvas is Elementor Canvas, and default is the theme's default. If WP-CLI is new to you, how to use WP-CLI covers connecting and running a first command.

To undo it: Open Quick Edit again and choose the template the page had before.

Add the loop to the theme's template, in a child theme

  • Advanced
  • Back up first
  • About 30 minutes
  • Steps tested on WordPress 7.1.3

This is the fix the message asks for: the template gets the call it lacks. It is a change to the theme's code. If you did not write the theme, tell its author first. A template for ordinary pages that prints no content is a fault in the theme, and it hides the page's text from visitors as well as from Elementor.

  1. Step 1: Find the template WordPress uses for the page

    For a page, WordPress takes the first of these that exists in the theme: the page template selected for the page, page-{slug}.php, page-{id}.php, page.php, singular.php, index.php. The Template list in Quick Edit says whether one is selected.

    To be told and not have to work it out, install Query Monitor, a free plugin. While you are signed in as an administrator it adds a menu to the admin toolbar, and its Template panel shows the template file and the hierarchy for the page you are viewing. View the page itself, not the editor's request, which hides the toolbar.

  2. Step 2: Copy that file into the child theme

    Keep the file's name. Over SSH, from the folder WordPress is installed in, with your themes' folder names and the template's name in place of these:

    bash
    cp wp-content/themes/parent-theme/page.php wp-content/themes/child-theme/page.php
  3. Step 3: Add the loop where the content should show

    In the copy, find the place where the page's text belongs, usually below the title and above the footer. Add the loop from the WordPress Theme Handbook there:

    The first and last lines switch PHP on and off. Leave them out if that part of the file is already inside PHP. If the file already has a loop that prints something else, such as the_excerpt(), add the_content(); inside that loop and do not add a second one.

    page.php
    <?php
    if ( have_posts() ) :
    	while ( have_posts() ) :
    		the_post();
    		the_content();
    	endwhile;
    endif;
    ?>
  4. Step 4: Check the file, then open the editor

    It answers "No syntax errors detected". Open the page as a visitor: its text now shows. Then click "Edit with Elementor".

    bash
    php -l wp-content/themes/child-theme/page.php

If the page shows a parse error, syntax error, unexpected reads the line it names. If it is blank, see the white screen of death, and turn on the debug log to read the real error. Deleting the copied file puts everything back.

A change to how your theme lays out a page is the kind of work our custom development service takes on.

To undo it: Delete the copied template file from the child theme.

Add the Content block to a block theme's template

  • Takes care
  • Low risk
  • About 10 minutes
  • Steps tested on WordPress 7.1.3

In a block theme the templates are made of blocks, and the Content block is the one that prints a page's content. WordPress's handbook for theme authors says so directly: to display the post or page content, a template must have the Post Content block somewhere in it.

  1. Step 1: Open the template for pages

    Go to Appearance, then Editor, then Templates, and open Pages. WordPress describes it as the template that "displays a static page unless a custom template has been applied to that page or a dedicated template exists". If Quick Edit shows another template selected for this page, open that one.

  2. Step 2: Look for the Content block

    Open the List View, the outline of the template's blocks. Look for a block named Content. If it is there, this is not your cause.

  3. Step 3: Add it and save

    Click where the page's text should appear, open the block inserter and search for "Content". Add the Content block, then save the template.

  4. Step 4: Open the editor

    Go back to the page and click "Edit with Elementor".

In the template's code the block is one line. A theme's own templates/page.html file needs the same line:

templates/page.html
<!-- wp:post-content /-->

A template saved in the Site Editor is kept in the database and takes the place of the theme's file. The clicks above are done in a browser. What they add to the template is this line.

If the site is on its way from Elementor to blocks, how to switch from Elementor to the block editor plans the move page by page.

To undo it: Open the template again and remove the Content block, or use Reset in the template's three-dot menu to go back to the theme's own version.

Open the editor in Safe Mode, then find the plugin

  • Takes care
  • Low risk
  • About 20 minutes
  • Steps tested on WordPress 7.1.3

Safe Mode is Elementor's own test. Its setting reads: "Safe Mode allows you to troubleshoot issues by only loading the editor, without loading the theme or any other plugin." It applies to the editor for the administrator who switched it on. Visitors keep seeing the normal site.

  1. Step 1: Switch Safe Mode on

    Go to Elementor, then Editor, then Tools. On the General tab, set Safe Mode to Enable and click Save Changes. Only an administrator can do this. Elementor's help says to back up the site first.

    Elementor also offers it from the editor. When the editor has not finished loading after half a minute, a box headed "Can't Edit?" appears, with an Enable Safe Mode button.

  2. Step 2: Open the page in the editor

    If the editor opens, a box reads "Safe Mode ON" and "Editor successfully loaded? The issue was probably caused by one of your plugins or theme." The cause is one of them. If the message still shows, neither is: go to the next fix.

  3. Step 3: Switch Safe Mode off

    Click Disable Safe Mode in that box, or set it back to Disable under Tools. Safe Mode cannot tell you which plugin it is, and it does not switch off must-use plugins, the ones kept in wp-content/mu-plugins.

  4. Step 4: Find the plugin

    Start with a plugin that shows its own screen in place of a page: coming-soon and maintenance plugins, membership and access plugins, and other page builders. Deactivate it and open the editor again. If the editor opens, you have found it.

With WP-CLI, use the plugin's folder name in place of plugin-slug:

bash
wp plugin deactivate plugin-slug
bash
wp plugin activate plugin-slug

If the first guess is wrong, how to find and fix a WordPress plugin conflict searches the whole list in halves, with the theme checked last. Once you know the plugin, look in its settings for a way to leave this page, or signed-in administrators, alone.

To undo it: Disable Safe Mode, and activate any plugin you switched off.

Find what answers in the page's place

  • Takes care
  • Low risk
  • About 15 minutes
  • Steps tested on WordPress 7.1.3

The editor asks for one page and is handed another. Which message you then see depends on the page that arrives. If it was built with Elementor, the script is there and the box for your page is not, and you get this message. If it was not, you get "The preview could not be loaded".

  1. Step 1: See where the page's address leads

    Open the page's address in a private window and watch the address bar. If you land somewhere else, something redirects it. This command shows the same thing, with the page's address in place of the example:

    200 and nothing after it means the page answers for itself. 301 or 302 and an address means it sends visitors to that address. A private window and curl ask as a visitor who is not signed in. The tab test near the top of this page asks as you, which is how the editor asks.

    bash
    curl -s -o /dev/null -w '%{http_code} %{redirect_url}\n' "https://example.com/checkout/"
  2. Step 2: On a WooCommerce checkout page, put something in the cart

    WooCommerce sends anyone who opens the checkout with an empty cart to the cart page, and that includes the editor's request. Add any product to the cart in the same browser, then click "Edit with Elementor" on the Checkout page.

  3. Step 3: Remove a redirect set on the page

    Look for a rule that names this page in a redirect plugin, in an SEO plugin's redirect list, or in the server's configuration. Elementor's guide to Safe Mode asks for the same check: that the page "does not have active 301 or 302 redirects configured via redirection plugins or server directives". Remove the rule, or leave alone a page that is meant to send people elsewhere.

  4. Step 4: Check for an address shared with a category

    Elementor's help warns that a page whose slug, the last part of its address, is also the slug of a post category or product category can cause this message, because the address may lead to the category. Change the page's slug in Quick Edit. Then go to Settings, then Permalinks, and click Save Changes without changing anything, which rebuilds the site's address rules.

If none of this opens the editor, an editor that will not open on one page is one issue on one site, which is what our one-time fix covers.

To undo it: Put back the redirect you removed, or the slug you changed.

Use an ordinary page, or design the list where it is built

  • Easy
  • Low risk
  • About 10 minutes
  • Steps tested on WordPress 7.1.3

Some pages are a name and an address, and WordPress supplies the rest. For the page chosen as the Posts page, WordPress's documentation says that "any Template assigned to the Page will be ignored and the theme's index.php (or home.php if it exists) will control the display of the posts". WooCommerce says of its Shop page: "No content required." A list like these has no page content, so there is nothing for the page editor to draw in.

Elementor's help names editing these pages as a cause of this message, and adds that the loop "won't enable the editing of Archive pages and Latest Post pages". Current versions shut the door earlier. The editor has been disabled on the Posts page since version 1.4.9, and version 4.3.0 removed the "Edit with Elementor" button from the shop page. On an older version, update Elementor first.

  1. Step 1: Check what the page is

    Go to Settings, then Reading. Under "Your homepage displays", see which page is chosen as Posts page. For a store, go to WooCommerce, then Settings, then Products, and see which page is the Shop page.

  2. Step 2: If you wanted a page of your own design there

    Choose another page as the Posts page, or set the list back to "— Select —", and click Save Changes. The page is an ordinary page again, and "Edit with Elementor" is back. With no Posts page chosen, posts are still reachable through category and archive links.

  3. Step 3: If you wanted to design the list itself

    That is not done in the page editor. Elementor's documentation sends you to the Theme Builder, a part of Elementor Pro, to build an Archive template. Without it, the list is drawn by the theme: in a block theme, by a template you can edit under Appearance, then Editor, then Templates.

With WP-CLI, this prints the ID of the Posts page, or 0 when there is none:

bash
wp option get page_for_posts

This clears the choice. The blog's list then no longer shows at that page's address:

bash
wp option update page_for_posts 0

To undo it: Under Settings, then Reading, choose the page as the Posts page again.

When to get help

Stop if the editor fails in Safe Mode as well, or if it opens in Safe Mode but fails with your theme whatever template the page is given. The first means something outside the theme and the ordinary plugins is answering, such as a must-use plugin or a rule on the server. The second means the theme needs a change in code, and its author is the first person to ask.

Common questions

Have I lost my page or my design?

No. The message appears before the editor opens, so nothing was saved or changed. The page's content and anything already built in Elementor are in the database, and the public page shows as it did.

What is the_content?

It is the WordPress function that prints the text and blocks of a post or page. A theme's template calls it at the spot where the content should appear. Elementor uses the same call to place its editing area, which is why a template without it leaves Elementor with nowhere to draw.

Why does one page fail when the others open?

Each page can use a different template. The failing page may have a template of its own selected, or the theme may hold a file made for that page's slug or ID. The page may also be one that sends its visitors elsewhere, as a checkout does when the cart is empty.

Can I edit my blog page or shop page with Elementor?

Not as a page. Both are lists that WordPress or WooCommerce builds, and current versions of Elementor do not offer "Edit with Elementor" on them. Elementor's documentation points to the Theme Builder in Elementor Pro for designing them.

Will a theme update undo the fix?

Not if the template was changed in a child theme, or the page was moved to another template in Quick Edit. That choice is stored with the page. A change made to the theme's own file is replaced by the next update of the theme.

More on this subject

Would you rather we fixed it?

Quick Fix is $49. One issue, one site, up to about an hour. No fix, no fee. 30-day warranty. It starts with a free diagnosis.