How to create custom 404 error page in WordPress

A 404 page is what your theme or WordPress shows when someone enters or clicks on a URL that doesn’t exist on your website. This is usually termed as wordpress 404 error and this tutorial will cover the entire process to create custom 404 error page.

Setting up a custom 404 error page on your website is an important step towards keeping your readers engaged when your visitors land on a page that does not exist. Whether it is a mistyped URL, a blog post you removed without setting up a redirect, or a page you deleted, a custom designed informative 404 error page can reduce your website abandoning rate.

Fortunately, for Divi theme or divi builder users, it is a child’s play to build a custom 404 page for your WordPress website. Check one of my custom divi 404 template below.

my own custom design of wordpress 404 error page with video background made with divi builder

How 404 error page helps your visitors and why create custom 404 error page?

A random message is a very bad user experience and doesn’t look good. Neither it looks attractive at all to your visitors nor it gives them any reason to stay on your website.

It’s uninviting to do a custom 404 page because you think no one will never see it. However, it can be helpful to your visitors.

A 404 page should give your visitors more information. This page should provide tools, links, advice, or some form of help like because you don’t want to be left in the middle of nowhere where you don’t know where to go next.

You can put your most liked content on your custom 404 error page so that the reader has something to look upon and keep browsing through the site.

Now, let’s look at the divi’s generic 404 error page we’ll be designing today.

divi 404 template a generic 404 error page in divi theme

404 Error page examples

Below are screenshots of some of the famous websites.

Amazon

Amazon
Amazon’s 404 page shows the Amazon logo with a search box, a huge message, a smaller message liking to the home page, and a photo of a puppy along with a link to learn more. The image is chosen at random though.

WordPress.org

WordPress.org 404 error page screenshot
WordPress.org’s page not found page shows their standard header and footer. A short explanation of the reason behind landing on this page along with a list of links to help you browse through the site.

Elegant Themes

Elegant Themes page not found screen
Elegant Themes’ 404 page shows their header, a large heading with a small one as well along with a button as a call-to-action to their most selling theme.
Also check: How to create custom header in WordPress

Customize custom 404 page in wordpress Video

If you like to read then please continue reading.

How to Create a Custom 404 Page in WordPress with the Divi Theme Builder

First of all go to Divi -> Theme Builder -> Click on the + icon as shown in the screenshot.

divi theme builder adding a new template to create custom 404 error page template

Now after clicking the + icon you will be shown a Template Settings box as shown below.

divi theme builder's template settings box to add a new layout

Now scroll down to the bottom and check the box in front of 404 Page as shown here and click on the blue Create Template button.

adding custom template for 404 page in divi builder

Now you will see a new template box for 404 error page.

divi theme builder with custom 404 page template

Now, if you don’t want to show the header and footer on your 404 page then you can hide them by clicking on the eye icon as shown below. Click on the eye will turn the icon into closed eye which means header will not display on front end.

Now let us move forward towards creating the custom 404 page body by clicking on the Add Custom Body button and then follow the screens.

create custom 404 page body by clicking on the add custom body button
click on build custom body
click on start building
Note:

Choose Browse Layouts: Go with this option if you want to import any premade layout from divi library and use it in your custom 404 page design.

Choose Page: Select this option if you already have made your 404 page or if you want to use any other divi page's design as your 404 page design.

After clicking on the blue Start Building button you will get an empty canvas like the one below. Here you can design and put anything you want just like you do with any other page.

divi 404 error page blank canvas

After designing and finalizing you page click on the green Save button to save your changes.

click on the save button to save your changes

After saving the changes now click on the Close icon at the top right corner.

Now, you have to do the final step by clicking on the Save Changes button as shown.

click saves changes button to replace default 404 page with this new custom 404 error page
Trending: TOP 4 FREE Form Builder Plugins of 2021

This is it.

You have now replaced your default 404 page with your new custom WordPress 404 error page and also learnt about how to build a custom 404 error page for the divi theme.

Learn more about the WordPress Best Theme and Page Builder now.

Customize Custom 404 Error Template

You can easily customize your custom 404 error page template by clicking on the pencil edit icon. And then you won’t have to click the above green Save Changes button again. For all your future changes you will have just have to click on the Save button in the builder and your changes will go live instantly.

Enjoy your stylish custom 404 error page.

Leave a Comment