How to add a custom Divi 404 page

If your website user ends up at a page that is not available to view they will see a 404 page.

By default, it is just a white page with some text informing the user that the page they are on does not exist.

You can design and display a custom 404 page for your Divi website in 3 main ways;

• Use the Divi Theme Builder (The best solution)
• Use a 3rd party 404-page plugin
• Hand coding into a child theme.

Using the built-in Divi Theme Builder is the quickest and easiest method and we will use this method in the step-by-step guide below.

What is a 404 page?

A 404 page is where your users will end up if they try to access a page on your website that does not exist.

The purpose of the 404 page is to inform the user that the page does not exist anymore and advise them what their next options are.

A good 404 page will keep the user o the website and

What is the default 404 page in Divi?

The default Divi 404-page that is shown to your users when they arrive at a URL that no longer exists on your site will say “No Results Found The page you requested could not be found. Try refining your search, or use the navigation above to locate your post.”

How to create a custom 404 page with the Theme Builder

Divi 4.0 includes the Divi Theme Builder which allows you to create templates that can be assigned sitewide.

One of the templates available is for the 404 page.

You can use the default Divi modules to build a custom 404-page template and assign it using the Theme Builder to display as your 404 page.

To create your template and assign it to display as your 404 page, you can follow the steps below;

1. In your WordPress dashboard navigate to Divi > Theme Builder and open your Theme Builder dashboard page
2. Click on Add New Template and scroll to the bottom of the pop-up window and check the checkbox for 404 Page. Click on the blue button at the bottom to Create Template. This will create a new Theme Builder template and assign it to display when a 404 page needs to be displayed on your website.
   
3. The template is created, but it has no content yet. You can add a header, a body, and a footer, but for most 404-page templates you would only need to add a body.

   If you have a custom header and footer already set it will automatically be added to the template, but you can turn it off (by clicking on the eye icons) or add a new header and footer as needed.

   Click on the Add Custom Body and then either select Build Custom Body or Add From Library.

   Clicking on the Build Custom Body will open up the Edit Template window where you can create your template using the Divi sections, rows, and modules.
   

4. Use the Divi sections, rows, and modules to create your template for the 404 page.

   Once finished you can save the template and close the Edit Template Window.

   When back in the main Theme Builder dashboard click on the green Save All button at the top and your custom 404 page will now show whenever someone tries to access a page that no longer exists on your site.

   

5. To test your new 404 page enter your URL with a page that does not exist and you should see your new 404 page.

Alternative options for creating a custom 404 page

If you do not want to use the Divi Theme Builder or have not yet updated your Divi site to version 4.0+ (learn how to update Divi here) then the following 2 options are available to create a custom 404 page for your website.

Option 2: Use a plugin for a custom 404 page

The (Free) 404 Page plugin allows you to select any page to be used as your 404 error page.

Just create a new page and design the 404 however you like using the Divi builder. Set the page in the custom 404-page plugin settings, and your selected page will show up instead of the default 404 error.

If you are not yet using Divi version 4.0 and don’t want to use a child theme to edit the 404 PHP code then this plugin is the easiest and fastest way to create your custom 404-page. If you have the latest version of Divi then there is no need to use this plugin.

Option 3: Edit your 404.php page using a child theme (not recommended)

If you are willing to dive into a little code and/or don’t want to add yet another plugin to your site, then you can edit the 404.php file using a child theme.

To customize your 404 pages by editing the 404.php file in your child theme just follow the steps outlined below;

1. You will need a child theme for this. If you don’t already have a child theme active on your site then you will need to add one or these updates will be lost when you update the Divi Theme. You can download a free blank child theme, install and activate it and you are ready to start.
2. Go to Divi > Divi Library and “Add New”. Here you can use the Div builder to create your 404-page layout using the standard sections, rows, and modules. Once you have finished the page design save the layout and take a look in the browser, where you will see something like https://www.divithemeexamples.com/wp-admin/post.php?post=123456&action=edit. You will need the number (123456 in this example) for the next step.
   
3. in your child theme, create a 404.php file and add the following code to the file. The 123456 will need to be replaced with the header short code number for the 404 page layout you created in the Divi library from the previous step. You can download the 404.php here rather than typing it out manually (I can’t add the code to this page as it will break the page)

   Just unzip the folder and copy the 404.php into your child theme then edit the number using the one from step 2. Save your 404.php file and upload and your 404 page is now active. Just go to your website and add /thisisnotapage and you will see it.
   

What content should a 404 page have?

It really depends on your site niche, your brand direction, and your creativity levels, but a few common elements that are often found on 404-page designs would include the following;

• Your main menu navigation
• A button back to the homepage
• A basic sitemap, or link to your full sitemap
• A search bar
• Links to recent/popular posts
• Links to recent/popular products
• A funny cat meme, dog meme, or any funny memes

Divi 404 page examples

To find 404 page examples you can go to your favorite Divi websites and just add some random page to the URL such as URL/thisisnotapage. You will then see if they have a custom 404 page or just the default Divi or WordPress 404 page.

Divi Theme Examples website has a custom 404 page added via the Divi Theme Builder as explained in the steps above. You can view it by visiting a non-existent page such as https://www.divithemeexamples.com/thisisnotapag

Final Thoughts

This post was updated after the Divi 4.0 version update and shows just one of the many new features that come within the Theme Builder. As you can see from options 2 and 3 creating a 404 page meant using a 3rd party plugin or getting your hands dirty with some PHP code.

The Theme Builder makes creating a 404 page incredibly easy and allows you to remove a number of plugins, which is great for an optimized website.

If you have an example of a great 404 page designed with Divi, drop a link in the comments below.