You try to edit your page with Elementor but then it shows this message: “The Content Area Was Not Found in Your Page”.
In this tutorial, I’m going to show you how to fix this error using different methods.
Create New Page Template
To fix this,
We need to create a new page template file.
But first, make sure you create a site backup in case you aren’t familiar with editing theme files.
Since we need to create a page template file, we need to access our website files.
What kind of files?
- Our active theme files.
It’s recommended that we use a child theme.
So, how do you access the theme files?
- We can use FTP/SFTP access Or a WordPress Plugin.
Create FTP/SFTP access
First, let’s look at FTP/SFTP access.
Where can I get access to FTP or SFTP?
If you don’t have an FTP/SFTP account, you can create them in your hosting account or CPanel.
You can ask your hosting company how to access your CPanel. Usually, you can access CPanel from your hosting dashboard.
So here I am on the Cpanel, my CPanel might be a different version than yours so It might look different.
Here I’m going to create FTP access, search for FTP.
Fill out the fields.
Make sure the directory folder points to your website.
For this one, I just leave it empty so the directory is on the root folder of my server.
Now you can see your FTP account created.
FTP information will show up under the configure FTP client tab.
It differs on what kind of hosting plan/hosting company you’re in. Sometimes you’ll have a default SFTP info otherwise, you will have to create it.
If you’re in a managed WordPress hosting, you could easily find it in your account dashboard.
For a Wpengine account, there’s an option called “SFTP users” where you can create.
Download and Open Filezilla
Now open Filezilla, if you don’t have it yet, download Filezilla or any other FTP solution software. This software is used to transfer our files from the local computer to our website server.
Choose between FTP or SFTP, depends on the information that you create.
For this example, I create FTP access.
Copy the FTP info.
So we are now connected.
So I went into this location, “public Html” folder then opened the “wp-content” folder and then “themes”.
Inside our themes folder, we can see our theme files.
Access Theme Files Using a WordPress Plugin
Now using the WordPress plugin.
Go to plugins and activate the “File manager” plugin. We can just uninstall it when we’re done using it.
Identify Our Active Theme
Next, identify our active theme.
let’s look at what theme our website is using (what is active).
So here we got the website child theme active. And when I open it, it shows that it is a child theme to the “Neve theme”.
Download a Code Editor
Download a text editor, this will be used to create our page template file.
Don’t worry you find free software like sublime text or Notepad++. These are some light code editor software.
For this example, I’m using Sublime text editor.
Create the New Page Template
On the editor, create an open and close PHP tag.
And add a comment syntax – the forward-slash with an asterisk in between.
It looks like the editor did not recognize my syntax.
So I’m going to change the syntax to PHP. You don’t have anything to worry about this option. This is optional and does not affect our template.
Next, add a Template name syntax with a value that you can put whatever you want.
For this one, I’m adding “New Page Template”.
Add the get header and get footer function.
In between, will be the “the_content” function.
Save it to our computer as a PHP file.
If your editor has no PHP option, just add a “.php” extension to the file.
Upload the Page Template File
Now, we are going to upload it inside our active theme folder – which is the “website-child”.
Just hold and drag it on the folder and it will upload inside.
Now, go to the edit page screen and refresh it.
Under the template, select the New page template that we just created and update.
Click open edit with Elementor again. Now, the issue was solved.
If the issue is still there, let’s see another method.
Duplicate “page.php” File
Go to your parent theme, for this one is Neve theme. Download the “page.php” file
Open this file with our editor, Copy over the Template name string but change the value.
Go back to the themes folder.
Rename the page.php file and upload it to our child theme folder.
Go back to the edit screen and refresh it.
Change the template to “second-page template”.
Edit with Elementor.
As you can see, it’s working but it needs width adjustments. This technique may differ theme by theme.
Still not working?
Use Elementor Full-Width Template
Go to the edit page screen again and change it to Elementor Full-width template.
If that’s not working again, try other method below.
Use the Theme’s Custom Options
You might be editing a custom page like the home page. For some themes commonly this page can be customized on the theme’s custom options or in the customize tab.
Go to appearance-customize and see if you can see any option related to the home page.
Create and Set New Page As Home Page
Another thing you can do is create a new element or page then go to Settings- Reading and set it as the Home page.
Preview Could Not Be Loaded Error
Another problem with Elementor is the Preview could not be loaded error, which is common when you try to edit an archive page.
If you have Elementor Pro, you can create an archive page by going to template builder then archive tab.
