404 is an error message displayed on the web browser when the webserver cannot find the page associated with a certain URL typed on the address bar of a web browser. In WordPress, the layout (appearance) of the 404 page can be vary depending on the theme you use. Each WordPress theme has a layout dedicated to controlling the layout of the 4040 page.
Some themes, such as Newspaper, may offer a feature to create a custom 404 page on your WordPress site.
If the default layout of the 404 page offered by your theme doesn’t impress you and the theme doesn’t offer a feature to create a custom 404 page, you can use plugins like Divi Builder, Elementor, and Brizy to create a custom 404 page. Those three page builder plugins come with a theme builder feature to allow you to create a custom 404 template. In this example, we will show you how to create a custom 404 page using Divi Builder.
How to Create a Custom 404 in WordPress using Divi Builder
In case you haven’t known about Divi Builder. It’s a page builder plugin developed by Elegant Themes. You can use it to create a beautiful page (and theme builder template) without dealing with CSS thanks to its visual editor. There are two options to create a custom 404 page in WordPress using Divi Builder:
- Using a premade layout
- From scratch
# Creating a 404 Page from a Premade Layout
Before getting started, make sure you have installed and activated the Divi Builder plugin on your WordPress theme (you don’t need to install the plugin if you use the Divi theme). You can download Divi Builder on the official website of Elegant Themes.
Unlike, say, Elementor, Divi Builder offers no premade 404 layout on the layout library. But it doesn’t mean that Elegant Themes (the developer of Divi Builder) offers no premade 404 page layout at all. They regularly release new 404 page layouts (and other theme builder layouts such as header, and so on). You can download a premade 404 page layout on this blog post. Download the ZIP file and extract it to get the JSON file of the 404 page layout.
Once the ZIP file is extracted, login to your WordPress dashboard and go to Divi -> Theme Builder. On the theme builder page, click the two-arrow icon on the right side.
On the appearing window, click the Import tab and select the JSON file of the 404 page layout by clicking NO FILE SELECTED. Click the Import Divi Theme Builder Templates button to import the layout.
Once the layout is imported, click the Save Changes button to apply the change.
If you want to edit the content of the 404 page layout you have just imported, you can simply click the pencil icon on the 404 template. This will open the Divi Builder editor where you can edit the content of the layout.
# Creating a 404 Page from Scratch
If you have your own design concept about the custom 404 page, you can create the 404 from scratch with your own design. You can add any element to your liking. From a button that links back to the homepage, featured content of your website, search form, call to action, and so on. In this example, we will show you how to create a simple 404 like the following.
Of course, you can create a better 404 page than the one above, with your own design. As said above, you can add any element to your liking to your custom 404 page (Divi Builder offers 38 modules you can use). The elements we use to create the above 404 page are:
- One regular section
- One row with one-column structure
- Text
- Button
To get started, go to Divi -> Theme Builder on your WordPress dashboard. Add a new template by clicking the plus button and select 404 Page. Click the Create Template button.
Once the template is added, click Add Custom Body and select Build Custom Body.
On the appearing dialog, select the Start Building option.
You will automatically have a regular section to work with. Before adding any content to the section, you can set the background first. To do so, open the section settings panel by clicking the gear icon on the section handle (the blue handle).
On the section settings panel, open the Background block under the Content tab. You can set the background here. You can set whether a solid color background, a gradient color background, an image background, or video background. In this example, we use the image background.
If you also use an image background, make sure the image size is set to Cover. You can also enable the parallax if you want it.
Once done setting the background of the section, add a row by clicking the green plus button. Select the one-column structure.
Add the Text module and replace the default text with your own text. In this example, we replace the default text with the text “are you lost, my friend?”
You can go to the Design tab to style up the text. There are 9 blocks you can open here. To set the font family, font style, font size, font color, and text alignment, you can open the Text block.
To set the margin and the padding of the text, you can open the Spacing block. You can read this article to learn more about margin and padding. You can play around on the Design tab to style up the text. There are some other things you can set. Such as entrance animation (on the Animation block), CSS filters (on the Filters block), and so on.
Once done styling up the Text module, add the Button module by clicking the grey plus icon on the canvas area.
Replace the default button text with your text on the Text block under the Content tab. While to add a link, you can open the Link block. You can either add a static link or dynamic link. Simply click the database icon to add a dynamic link.
You can go to the Design tab to style up the button. To set the alignment, you can open the Alignment block. If you want to use custom styles for the button, you can open the Button block and enable the Use Custom Styles For Button option. By enabling this option, you can set the button text size, button text color, font family of the button text, border color of the button, border size of the button, and so on.
Same as the Text module, you can also open other blocks to apply other styling options. Just play around until you get satisfied with the look of your button.
Once you are done adding and editing the content of your custom 404 page, click the Save button on the button-right corner to save the changes followed by the X icon on the top-right corner to exit the Divi Builder editor.
You will be taken back to the theme builder page after clicking the X icon on the Divi Builder editor. Click the Save Changes button to apply the change.
Done! You have successfully created a custom 404 page on your WordPress site using Divi Builder.
