Skip to content

Create and design custom 404 error pages with Elementor FREE

Reading Time: 2 minutes
Create and design custom 404 pages on Elementor FREE

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:

  1. Install & activate the required plugins
  2. Create & design your custom 404 page with Elementor
  3. Set your newly created page to be the 404 page
  4. 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.

New 404 page

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.
design custom 404 pages on Elementor

[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

  1. Fo to the General tab
  2. From the drop-down menu set the page you created during step 2
  3. Save Changes
set 404 page

The Shortcut – Sum up in a paragraph

  1. Install & activate Elementor & 404page
  2. Create & design your 404 error page just like any other page with Elementor
  3. Go to Appearance -> 404 Error Page & set the page you created to be the error page
  4. 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.

Leave a Reply

Subscribe, I never spam

Agapi
stepanyanagapi229
Read More
Although I don’t have a restaurant the urge to read it was too strong and didn’t disappoint. I guess if you have a restaurant this is a must-read. Thanks a lot.
Diogo Barros
Diogo Barros
Read More
Thank you !
J
J
Read More
i've been searching everywhere for this solution, you're the first person who gave a simple solution. Ty
Farah I
Farah I
Read More
Thanks. I already have cloudflare and its still slow.. was thinking of how to remove unused js... but found your video instead
BLACK ANT
BLACK ANT
Read More
makes complete sense bro. Thank you
 Tobee Panyasith
Tobee Panyasith
Read More
Thank you for this great video

Table of Content

Subscribe to my mailing list

I never spam