How to Create Custom 404 Page in Divi?

Have you ever landed on a “404 Not Found” page? This error page pops up when visitors reach a page that doesn’t exist or has a broken URL. 

A well-designed 404 page can prevent users from leaving your site, decrease the bounce rate, and direct them to where they need to go. 

In this guide, we will show you how to create a custom 404 error page in Divi using the Divi page Builder. 

Ways to Create Custom 404 Page in Divi

In Divi, you can create 404 error pages in various ways. Before diving into the process, let’s know them –

• With default Divi modules: If you are a beginner and want to create a custom 404 page only with default Divi modules, you can go with this solution.  
• Importing layout: If you want to make a quick start with a hassle-free solution, this crafting process will be the right choice for you.
• Using plugins: Plugins give the process an easy start with versatile capabilities. So, If you are seeking a user-friendly solution to create a 404 error page, you can use this one.  
• Implementing the advanced level code: Or if you love to take a challenge, the developer route will be for only you. Since this is for advanced users and requires coding knowledge our recommendation will be the first three options.  

Let’s know how to create a custom 404 error page in Divi with each of these ways.

Method #1: With Default Divi Modules

Though Divi has 65+ modules to make things unique. By using them, we will now head to create a custom 404 page from scratch.

1.1: Create a New 404 Template

To create a custom 404 error page in Divi from scratch, first, we have to make a new template. Simply go over the Divi > Theme Builder and do the following –

• Add New Template > Build New Template > scroll down to the end and select 404 page > Create Template

• Then continue by hiding the custom header and footer of your 404 page by clicking on the eye icon.

1.2: Start Building 404 Page Body

Once you’ve completed step one, you can start building the wp 404-page body by selecting ‘Build Custom Body.’

1.3: Add Two-column Row

Clicking ‘Build Custom Body’ will redirect you to the Divi visual builder. Here, you can see a section generated on your page by default.

To make a 404 error page within a unique way, we are going to add a two-column row here.

Click the green(+) icon and select the two-column row to continue. 

Note: You can use any type of column style to make 404 pages according to your design.

1.4: Add Blurb Module

Now, we are going to use the Blurb module first on the left column. Click the grey(+) icon, search for ‘Blurb,’ and select that.

After inserting the Blurb module, we have to add the content. Do the following –

• First, to delete the image, go to Image & Icon > Image > and press the delete icon on the upper right
• Then, go back to the ‘Text’ and place the title and body text of your content.

Now, to customize the content, go to Design and decorate it as you like. Here is ours –

1.5: Add Button Module

This process is similar to the adding Blurb module. Simply, search for the ‘Button’ and insert the module on your page at the bottom of the Blurb module.

Then, fill in your content and customize it according to yours. Here is ours –

1.6: Add Image Module

When the two modules are added on the left, the right side remains blank. So, now we are going to add an image module here on the right. 

We have added and after having some image customizations, here’s the final result of the image –

Preview

So, we’ve gone through all the steps. Save your settings and let’s take a final look at what we have made –

Method #2: Using a Premade Design

If you are not up to designing things, the easiest way to create a custom 404 page is by using a premade 404 page layout. 

Here’s the JSON layout file. Download it and get to the next.

2.1: Extract the Downloaded File

Once the files have been downloaded to your computer, unzip the .zip file, and you’ll find the JSON layouts in a single file and an instruction file to install the layout.

.

2.2: Import the 404 page Layout in Divi Library

After downloading and unzipping the layout file, we will step forward to import the 404 page template. 

Just do the following –

• Return to your WordPress dashboard and head to the Divi > Divi Library.
• Next, click on the Import & Export button

• Select the JSON file (extracted file) from your computer and click the Import Divi Builder Layouts button.

That’s it. After importing the file, five layouts will show in your Divi Library.

2.3: Create 404 Template

Here, we will follow a process similar to what we have done in our method #1, starting with the ‘1.1: Create a New 404 Template’ step. 

You can follow that or get back to the Divi Theme Builder option > Add New Templates > Select “404 Page” > Build Custom Body.

2.4: Add Layouts from the Library

Next, the Theme Builder will open the page in a new window. Simply –

• Add a new Section by clicking the blue(+) icon
• Then, click the ‘Add from Library’ tab.
• Here, you will find the several Divi layouts that we have imported into the Divi library. Select one and click ‘Use This Section’ to continue.

You can either customize these Divi layout if you want.

Method #3: By Using Third-party Plugin 

Another simple way to make a custom error page in Divi is by using a plugin. Many users consider it as their first choice because plugins are convenient and offer advanced controls to make things spice up.

Here, we’re going to use a free WordPress plugin called ‘Smart Custom 404 error page’ to get started.

Let’s go!

3.1: Install the Plugin

To install the plugin, Go to Plugins> Add Plugins > Search with the name of the plugin > and then press Install Now > After Installing, press ‘Activate’ to continue.

3.2: Add a New Page

After installing the plugin, we have to make the 404 error page. 

To do so, we will now add a new page.

Simply, get back to the WordPress dashboard > Pages > Add New Page > and name your page

3.3: Add New Section & Row

Once completing the above steps, clicking the ‘Edit with the Divi Builder’ will let you craft your error page with the Divi visual builder.

Then add a new section and a row to continue.

3.4: Create a Custom 404 Error Page Body

Now, you can make your own custom 404 error page. You can use any Divi module to make one.

However, we are here going to add several modules including the image module, text module, and button module to make a custom 404 error body. Here is ours –

After completing the error page-making part, save it and get to the next step.

3.5: Assign your 404 page to the Plugin

The 404 error page we have just now created will have to be assigned to the plugin we installed in the start. 

To let this happen, 

• Go to Appearance > select ‘404 Error Page’ > General settings
• Then, click on the ‘Edit page’ and select the 404 page you have just made. Here we select the page ‘404 page’ that we need it earlier.

Note: This plugin has ‘Advanced’ settings to consider. Check further if you want to accelerate more.

Preview

Finally, ‘Save Changes’ your error page and test it by clicking the ‘Test 404 error’ button. Here’s the result –

Closing Thoughts

In this post, we’ve shown you how to create a custom 404 error page in Divi easily. Divi indeed makes it possible to customize every part at your fingertips.

However, we hope this guide benefits you well. If you have any questions or suggestions, feel free to comment in the comment section below.

FAQs about 404 Error Page

What is a 404 Error Page?

A 404 error page, also called a “404 not found” page, occurs when a website can’t load properly. 

For example, if your website isn’t loading or someone tries to go to a page that doesn’t exist, the 404 error page will load instead and explain the issue.

What is the default 404 page in Divi?

By default, Divi’s 404 page is just a white page with text informing the user that the page they are on does not exist. 

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

If your 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 site and go to your competitor’s brand. 

That’s why you should create a WordPress custom 404 page. It removes confusion for your website visitors.