How to Create a Custom Divi 404 Page

How to Create a Custom Divi 404 Page

First Published 09 February 2016. Last Updated 03 April 2022.

An important asset of any website is the 404 error page. This page displays whenever a site visitor lands on a page that doesn’t exist or is a broken URL.

Whether it is a typo in the URL, a blog post you removed without a 301 redirect, or a page you deleted by mistake, your site visitor needs to have this detour in their browser journey acknowledged.

A clear and simple 404 page can keep users from leaving, save a sale, and redirect your visitors to the content they were searching for.

Thankfully, for Divi users, it couldn’t be easier to build a custom 404 page on a WordPress website.

In this guide, we’re going to look at the three best methods for correctly converting your 404 error page with Divi. These methods include:

  • Using the Divi Theme builder, either creating a design from scratch or using one of our free layouts
  • Manually replacing the default 404 template with custom PHP
  • Using a plugin such as Divi Switch or Page Builder Anywhere

Within this post, you’ll find a collection of free 404 Error Page layouts created by our design team. Download these layouts, add them to your Divi Library and use them in your designs. We love them and know you will too!

If you haven’t already, fill in the form below, and a download link will be sent to your email

Fill in your details in the form below and access the free layouts!

Why You Should Create a Custom 404 Error Page for Your Divi Site

If potential customers don’t find what they’re looking for and aren’t redirected to where they can find what they need, they’ll leave your website and turn to a competitor brand.

By default, the Divi theme includes a 404 error page, but it’s extremely bland and not very attractive.

Divi Theme Default 404 Error Page
  • Facebook

By default the Divi 404 error page PHP template is quite bland

Displaying a custom branded 404 error page, one that includes branded graphics, pleasing copy, and directions or next steps for your site visitor to take, will seriously improve the overall user experience of your website.

Here are some tips for creating a great 404 error page for your site:

  • Use colors and graphics that align with your brand. Even though it may not seem like it, your 404 error page is a customer touchpoint and should be treated as a branded asset. Use colors from your brand color palette, style buttons to mirror those on the other pages of your site, and make sure your website has a cohesive look and feel throughout.
  • Use copy that reflects your brand tone. “The page you’re looking for can’t be found,” or similar, is often the default text found on a 404 error page. While this is satisfactory, the copy could be written in a far more engaging way. If your brand has a particular tone, use this within the copy on the 404 error page, or introduce an element of humor if possible.
  • Offer redirection links. Instead of just stating that the page can’t be found, including a few links in the text or as buttons to other key pages around your site. This will lead your site visitor to a relevant section of your website and will allow them to continue their browsing journey. As well as a link to return to the home page, you could include a link to your shop page for them to continue shopping, to your blog so that they can read your content, or to your contact page so they can send you a message.

How to Create a Custom 404 Error Page with Divi

In the next section, we’ll show you several methods for creating a 404 error page using the Divi theme.

  • If you want to use the Divi Builder and don’t plan on using plugins for added functionality, use the Divi Theme Builder method. We’ll show you a few methods of using the Divi Theme Builder including building a design from scratch, installing a premade JSON layout as well as using WP Layouts.
  • If you want to use a plugin that can fulfill the 404 error page as well as other functions, use a plugin such as Divi Switch or Page Builder Anywhere. Divi Switch is a great option as it’ll let you set up a 404 page in rapid speed also, as it includes several other ‘switches’ to make impactful changes to your Divi site-a real bargain of a plugin.
  • If you want to go the hardcore developer route, we’ve included the manual 404 error page development option too. This is a bit complicated method, and it requires changing the theme’s default 404.php template. If you’re just learning Divi, this may be a bit of a jump for you, but if you’re up for a challenge, this will give you a better understanding of the WordPress Template Hierarchy.

Creating a 404 Error Page Using the Divi Theme Builder

The Divi Theme Builder is a fantastic tool. It allows you to use the Divi Builder in several areas that previously were unavailable to the builder. While Divi users could create stunning designs and layouts for their pages, posts, and projects, the Divi Builder wasn’t able to work within the header, footer, archive pages, and similar. Instead, they’d have to use one of the manual methods explained below.

Thanks to the Divi Theme Builder, these previously off-limits areas, including the 404 error page, can now be designed with the Divi Builder, giving users full control of site customization.

Creating a Custom 404 Error Page From Scratch

To begin, head to the Divi > Divi Theme Builder menu.

Divi Theme Builder
  • Facebook

Select the Divi Theme Builder from the Divi menu

Click Add New Template.

Divi Theme Builder Add New Template Divi Space
  • Facebook

Click Add New Template

From the list, select 404 Page and click Create Template.

Divi Theme Divi Theme Builder 404 Page Template Divi Space
  • Facebook

Select the 404 Page option and click Create Template

You’ll notice that there are three sections that you can edit, the header, body, and footer. Typically, 404 error pages have nothing to do with the header or footer, so you’ll be creating a custom body. If, for some reason, you’d like the header or footer to be different on the 404 error page, you could use the Divi Theme Builder to create custom assets here, although it’s really not necessary. Click Add Custom Body.

Divi Theme Builder Add Custom Body Divi Space
  • Facebook

Click Add Custom Body

Here you can decide to either create a new design from scratch or add one from the library. If you’ve got a previous design that you’ve uploaded to the Divi Library or are using one of our custom layouts linked below, you can select them from the Divi Library this way. For this tutorial, we’ll be creating the layout from scratch, so select Build Custom Body.

Divi Theme Builder
  • Facebook
  • Facebook
  • Facebook

Select Build Custom Body

Next, the Theme Builder will open on a new page. You’ll see a blank screen with the familiar Divi Builder open and ready to be used. Begin by clicking the green plus icon button, add a new row and begin populating the page with modules.

Divi Theme Builder create 404 Error Page
  • Facebook

Create your 404 error page design

When you’ve completed your design, click the Save button to save your work. Then, click the small x icon in the top right corner of the screen to exit.

Divi Theme Builder
  • Facebook

Remember to save your design

You’ll be taken back to the Divi Theme Builder. Here, click the Save button again.

Divi Theme Builder
  • Facebook

Save the changes

Now that your design is complete, head to the front end of the site and navigate to a broken link by entering a gibberish URL into the browser bar. You’ll see that the boring default Divi 404 error page is gone, and your beautiful custom design, complete with on-brand colors, quirky copy, and redirection links, will display.

404 error page created with Divi
  • Facebook

The 404 page is complete

Creating a Custom 404 Error Page Using a Premade Design

If you’re not feeling all that creative or design isn’t your strong suit, you can use one of our free premade 404 error page JSON layouts. If you haven’t already, fill in the form below, and a download link will be sent to your email.

Once the files have been downloaded to your computer, unzip the .zip file, and you’ll find the JSON layouts in a single file, as well as an instructions text document.

Free Divi theme 404 error page layouts
  • Facebook

Unzip the .zip file and you’ll find the JSON files

Return to your website and head to the Divi Library.

Divi Library
  • Facebook

Select the Divi Library from the Divi menu

Click on the Import & Export button.

Divi Library
  • Facebook

Click Import & Export

Select the JSON file from your computer and click the Import Divi Builder Layouts button.

Import layout to Divi Library
  • Facebook

Select the JSON files

The layouts, five in total, will appear in your Divi Library.

Divi Library
  • Facebook

All of the JSON layouts will have been added to the Divi Library

Return to the Divi Theme Builder, add the 404 error page template and click Build Custom Body.

Divi Theme Builder
  • Facebook
  • Facebook
  • Facebook

Select Build Custom Body

The Theme Builder will open the page in a new window. Add a new Section.

Divi Theme Builder
  • Facebook

Add a new Section

Then, click the Add from Library tab.

Divi Theme Builder
  • Facebook

Click Add From Library

Here you’ll find all of the previously imported Divi JSON layouts. Select one and click Save.

Divi Space Free Divi 404 Page Layouts in Divi Library
  • Facebook

Select one of the 404 page layouts

Add the layout and remember to save your progress.

Divi Theme Builder Creating Custom Divi 404 Page
  • Facebook

The predesigned layout will be added

Return to the front end, and you’ll see the layout has been set as your 404 error page.

Creating a custom Divi 404 page wit free JSON layouts
  • Facebook

From the front-end you’ll see the design is added

 

Adding 404 Page Templates Using WP Layouts

Another quick method of adding the custom Divi 404 page layouts is to use our platform WP Layouts. Instead of manually adding the JSON files to the Divi Library, WP Layouts lets you add the 404 page templates from within the layout plugin.

WP Layouts works by storying various layouts in a cloud-based system. Not only can you access the layouts we’ve created, but you can also create your own designs and save them to the plugin. The designs you add will be stored on your account, so you’re able to access them on any site you have WP Layouts’ plugin activated on.

There are several other layouts included in the WP Layouts plugin, including full-page designs and industry-specific designs. If you’re looking for a collection of extra premade layouts to use in your designs, WP Layouts is a great option for you.

WP Layouts
  • Facebook

View all layouts included in the WP Layouts plugin

First, you need to create a WP Layouts account. Once you’re signed up, you’ll get immediate access to download the WP Layouts plugin. Install and activate the plugin as per usual. Before using the plugin, you’ll be asked to sign in to your account.

When you create a new page or post using the Divi Builder, you’ll find two new layouts tab from within the Load From Library tab:

  • WP Layouts, layouts automatically included within the plugin
  • My WP Layouts, any layouts that you create and save to your account via the plugin, will be stored here.

Head to the Divi Theme Builder and create the 404 template.

Divi Theme Builder
  • Facebook
  • Facebook
  • Facebook

Select Build Custom Body

Once inside the Divi Builder, click the + icon to access the various layouts libraries. Click the WP Layouts tab, and you’ll see several designs. Navigate to the Miscellaneous tab, and you’ll find all of the custom Divi 404 page designs.

Divi Theme Builder creating custom Divi 404 page with WP Layouts
  • Facebook

Select the layout you like

Select the layout you like, and let the import run.

Divi Theme Builder creating custom Divi 404 page with WP Layouts
  • Facebook

The layout will take some time to install

Save the design, and you will have created a 404 page in seconds.

Divi Theme Builder creating custom Divi 404 page with WP Layouts
  • Facebook

Your 404 page template is complete

 

How to Manually Create a Divi 404 Page Using PHP

If you know a little about PHP then replacing the default 404.php template is fairly easy. This requires creating a new 404.php template and adding it to your child theme. Make sure you reference the new additional file and also style it using CSS. This is a more developer-oriented route, and using the Divi Theme Builder as mentioned above is far simpler.

Another method is to build a normal page using the Divi Builder Builder and replace the ‘no-results.php’ template with the new design.

First, you need to set up the template. By default, the no-results.php looks like this:

<div class="entry">
<!--If no results are found-->
<h1><?php esc_html_e('No Results Found','Divi'); ?></h1>
<p><?php esc_html_e('The page you requested could not be found. Try refining your search, or use the navigation above to locate the post.','Divi'); ?></p>
</div>
<!--End if no results are found-->

We need to replace the text that’s being called with a bit of PHP code that will load a page instead.

In your child theme, create a folder called ‘Includes’ at the root level, the same place as your functions.php. If you’re already using a child theme that has an ‘Includes’ folder in it, then ignore this step.

Inside that folder, either copy the no-results.php template from the parent Divi theme (you’ll find it in the ‘includes’ folder) or create a new file called no-results.php.

Open your new ‘no-results.php’ file and if it isn’t already blank, delete everything in it. Now that you have a blank canvas, add this code:

<div class="entry">
<!--If no results are found-->
<?php $id = ###; $p = get_page($id); echo apply_filters('the_content', $p->post_content); ?>
</div>
<!--End if no results are found-->

If you’re worried that you may get the steps above wrong, just unpack this custom-404 zip at the root of your child theme instead. I’ve already taken care of the code for you.

Next, it’s time to add content to the 404 page.

You’ve now replaced the standard template with your own that has the ability to call a page, by its ID into the content.

Now, create a new page and add any content that you’d like to appear on the 404 error page. Save the page as a Draft and grab the page ID.

To find page ID, hover over the ‘Edit’ button next to the ‘Publish Immediately’ option in the Publish section. Look at the bottom left corner and you’ll see a line of text pop up. Where the text says “post = ###” the number is your page ID.

Locating page ID in WordPress
  • Facebook

Locate the page ID number

Make sure you’ve saved the page, copy the ID number and head to Appearance > Editor console in the Appearance menu. Look for the file that says no-results.php and click on it to edit. In your version, you have to replace the ### with whatever number was displaying as the page ID.

Creating a 404.php template
  • Facebook

Add the ID number

Now your 404 template will call the new page you’ve just created and will display it instead.

The only thing left to do is add some CSS to remove all of the padding and margins from the default 404 to ensure that the page fills all of the space available. Here’s the CSS you need to add to you child’s style sheet:

.error404 #main-content .container, .error404 #content-area, .error404 #left-area {
padding: 0 !important;
margin: 0 ;
width: 100% !important;
max-width: none;
}

.error404 #sidebar {
display: none;
}

.error404 .et_pb_post:last-child {
margin-bottom: 0;
}

Then, add the following for the no results page:

.search-no-results #main-content .container, .search-no-results #content-area, .search-no-results #left-area {
padding: 0 !important;
margin: 0 ;
width: 100% !important;
max-width: none;
}

.search-no-results #sidebar {
display: none;
}

.search-no-results .et_pb_post:last-child {
margin-bottom: 0;
}

Now that you’ve completed all of the tough work, the final step is to test whether the 404 page is using the new template.

Navigate to the front-end of your site, and add a random slug to a page that does not exist. If your template is displaying correctly, congratulations! You have successfully manually set a custom 404 page for your Divi site.

Creating a Custom Divi 404 Page Using Plugins

Before the Divi Theme Builder, Divi users had to rely on other methods of creating custom 404 pages. For many, the manual route was too complicated, but thankfully, there are a handful of plugins that made the process of creating a custom 404 error page far easier.

Divi Switch

Divi Switch is a great plugin as it offers several methods for making functional and aesthetic changes to a Divi site. There are ‘switches’ that can be turned on or off depending on the effect you’re looking to achieve.

If you plan on running A/B tests on your 404 page, making minor tweaks over time, or are using a plugin to expand Divi functionality, the plugin option eliminates steps and allows you to create and customize a 404 page as easily as setting up a new page with Divi.

With Divi Switch, you can make any page you create the 404 page.

To get started, create a page. From the WordPress dashboard menu go to the Pages menu and click Add New.

Add new page WordPress
  • Facebook

Add a new page from the WordPress dashboard

You can give it any slug you like and style it just like you would any page. For this example, I am going to use the page title “404”.

Style your page how you like. Here is an example using one of the free JSON layouts.

404 Page for Divi
  • Facebook

Here is an example 404 page using a free JSON layout

Once you’ve published your page, with Divi Switch active on your site, go to Divi > Divi Switch and under the Main Content tab, scroll to the Custom 404 Page option, and select the desired page in the dropdown menu.

Create a 404 error page for Divi with Divi Switch
  • Facebook

Select the page

Click Save Changes, and that’s it.

Now you can edit your 404 page just like any other page. Switching to a new slug, design, or page moving forward is as easy as returning to the dropdown menu and selecting a new page.

Page Builder Everywhere

Page Builder Everywhere takes a different approach than Divi Switch to expanding Divi functionality. Where Divi Switch adds simple toggles for turning on features, Page Builder Everywhere allows you to not only use Divi elements on pages and posts, it lets you and Divi elements anywhere text goes.

Create and save a layout and then use the widget editor to apply your custom 404 page conditional logic to apply it to your page.

Here is a video tutorial on how you can use Page Builder Everywhere:

If you are already familiar with the Page Builder Everywhere logic and more comfortable using the widget editor or the WordPress customizer, this option eliminates the need for adding an additional option but if you are looking for the quickest option we recommend using Divi Switch.

Ending Thoughts

Divi makes customizing every part of your WordPress website easy from landing pages and posts to custom archive pages, and even 404 pages.

With the Divi Theme Builder at your fingertips, you can create a custom Divi 404 page really easily. And if you choose to use our beautiful layouts, you don’t have to lift a finger.

We want to hear from you.

Did this guide help you set up a custom 404 page? Let us know what other guides we should create if you have any questions.

Stephen James

SJ is a web developer living in the coastal town of Southsea, England. He is a Divi and WordPress advocate and the founder of Divi Space.