If you access a certain URL on a website and the page associated with the URL doesn’t exist, you will typically see a 404 error message. It’s the default error message when the server cannot find the requested page. In WordPress, the look of the 404 page is varied, depending on the theme you use. If you use Divi or Extra theme, you can create a custom 404 page for your website with Divi Builder.
Divi Builder itself is the default page builder plugin of Divi and Extra themes. All of those products (Divi Builder, Divi theme, and Extra theme) are developed by Elegant Themes.
Since version 4.0, Divi Builder allows you to create a custom WordPress theme element, including the 404 page. You can create a custom 404 page without coding via the visual editor of Divi Builder.
How to Create a Custom 404 Page with Divi Builder
There are two ways to create a custom 404 page with Divi Builder. First, you can create from scratch. Second, you can start with a layout. In this example, we will show you how to create a custom 404 page from a layout.
By the time this article is written, Divi Builder offers no 404 layouts on its layout library. But, you can download one here.
First off, unzip the ZIP file you have downloaded. Your layout file is available in a JSON format. Once you found the JSON file of your layout, login to your WordPress dashboard and go to Divi -> Theme Builder. Click the two-arrow icons on the upper-right corner.
A pop dialog will appear. Select the Import tab and click NO FILE SELECTED to select the JSON file of the 404 layout you want to use. Once the file is selected, click the Import Divi Theme Builder Templates button to import the file.
Wait a moment until your JSON file is imported and you will be directed back to the Divi Theme Builder page. Click the Save Changes button to apply the custom 404 page you have just imported.
Until here, you have successfully created a custom 404 page on your WordPress site with Divi Builder. By default, your custom 404 page might contains no header and footer. If you want to apply the header and the footer, click the eye icons before you click the Save Changes button.
Customizing the 404 Page
You can customize the 404 page you have imported. You can add additional elements like search form, subscription form, and so on. To customize the 404 page, you can click the pencil icon and you will be directed to the Divi Builder visual editor.
On the Divi Builder editor, you can add a new section, a new row, or a new module.
- Adding a new section
A section is the largest container to host rows and modules. To add a new section, you can click the blue plus icon.
- Adding a new row
Rows are used to divide a section vertically. Inside a row, you can add modules. A row can consist of several columns. To add a new row, you can click the green plus icon. Select your preferred row layout.
- Adding a new module
Modules are the actual design element you can use to build a webpage with Divi Builder. On some page builders, modules are called widgets. Divi Builder offers about 38 modules. Modules can be added inside a row. To add a new module, you can click the grey icon. Select a module you want to use.
Editing the Modules
If you imported the custom 404 page from the Elegant Themes website, you have 4 modules in two different columns. To edit each module, you can hover your mouse over the module you want to edit to display the handler (the grey handler). Click the gear icon on the handler.
You can edit the module from the appearing popup. There are 3 tabs on the popup: the Content tab to edit the content, the Design tab to stylize the content, and the Advanced tab to set advanced settings. You can play around with these tabs. Just don’t forget to click the checklist button every time you make a new change to a module.
