With Divi 4.0 it is now very easy to add a custom 404 page using the Divi Theme Builder.
The Theme Builder allows you to create a new template using the drag-and-drop modules you are used to and assign it to show on all 404-page results.
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.
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.”
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
3 options to create a custom Divi 404 page?
Best Option: Use the Divi 4.0 Theme Builder
With the introduction of Divi 4.0 and the Divi Theme Builder, it is now very easy to build a custom 404-page template and assign it to display on your 404 pages. To create your 404-page template and assign to show on all your 404 pages, follow the steps below;
- In your WordPress dashboard navigate to Divi > Theme Builder and open your Theme Builder dashboard page
- 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 every 404-page on your site.
- 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.
- 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.
If you are having a design block and need to download some free 404 templates then Elegant Themes have released 6 Theme Builder packs that each have a 404 template included.
You can find links to these in this article that shows you where the best Theme Builder learning resources are.
If you do not want to use the Divi Theme Builder or have not yet updated your Divi site to version 4.0+ then the following 2 options are available to create a custom 404 page for your website.
Option 2: Use a plugin for 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.
Option 3: Edit your 404.php page using a child theme
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;
- 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. If you want to know more you can check out this post om creating a child theme for Divi and why you would need one.
- 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.
- in your child theme, create a 404.php file and add the following code into 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 mess up 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.
This post was updated after the Divi 4.0 version update and shows just one of the many new features that comes 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.