Boring 404 pages sucks, I understand, at the same time the free version of Elementor doesn’t allow you to easily design your 404 pages the way you’d want to. Here’s how to create and design custom 404 error pages on Elementor FREE.
The process:
- Install & activate the required plugins
- Create & design your custom 404 page with Elementor
- Set your newly created page to be the 404 page
- The Shortcut – Sum up in a paragraph
Install & activate the required plugins
Elementor – Obviously, you need to have a custom design, so you need Elementor, right? Right.
404page – your smart custom 404 error page – Used to identify the designed page to be the 404 error page.
Create & design your custom 404 page with Elementor
- From your WordPress dashboard, go to Pages -> Add New
- Name the page 404. You can name it whatever, but because professionalism and being organized kicked in, you better name it 404 error page.
- Edit With Elementor
Design your 404 page as you wish. Continue to step 3.
Here are some best practices of 404 error pages
- Make sure the design directly shows that the user’s on the wrong page.
- Some useful resources for better design: Freepik, Flaticons
- Add important pages on your website as directories.
- Add a search bar, so that users can search for the page they’re looking for.
[Here’s how to add glitch effects to your 404 page’s design]
Set your newly created page to be the 404 page
From your WordPress dashboard, go to Appearance -> 404 Error Page
- Fo to the General tab
- From the drop-down menu set the page you created during step 2
- Save Changes
The Shortcut – Sum up in a paragraph
- Install & activate Elementor & 404page
- Create & design your 404 error page just like any other page with Elementor
- Go to Appearance -> 404 Error Page & set the page you created to be the error page
- You can work with the page settings from the Advanced tab
Alternatively you can go through a more complex process by editing your .htaccess file to point to a custom page, by adding ErrorDocument 404 /[page-directory].html . You can read more here.