Most website owners ignore the importance of creatively designing their 404 page. When readers can’t find what they are looking for or access a page that does not exist, they simply look elsewhere. By creating an engaging 404 page template, you can retain your visitors on your website by suggesting relevant links that they may be looking for.

This free resource is inspired by the tutorial Geno made on Creating 404 page using the Divi builder. The team decided to create free 404 design layouts that DIVI users can plug and play on their own websites.

You can select from seven different 404 design layouts and customize it to your specifications.

 

Let’s Get Started

By default, the 404 page looks like this:

 

By using our FREE layouts, you can have a better looking and engaging 404 page. Select 1 layout below and click “Download“.

 

 

Instructions

In this tutorial, we’re going to implement 404 designs above by Importing the layout to your Divi Library.

 

STEP 1: Extract the Divi-404.zip you downloaded

In this step, you will see 2 files in the folder. 

a) .json file (for layout) 

– Need to Import to Divi Library

b) style.css (CSS styles for the 404 layout)

– Paste the CSS to your style.css or on your Divi theme option > Custom CSS.

STEP 2: Importing Divi 404 layout to your Divi Library

1. On your WordPress Dashboard, at the bottom of the screen, you will find the  “Divi Library” link under “DIVI”.

2. On the top of the page, you will see the import/export button.

3. Import your downloaded 404 Layout and select the Divi-404.json file.

 

STEP 3: Creating the 404.php template

1. First Install wpide plugin to easily create new template on your child theme.

2. Once the plugin is installed, open the AceIDE and you can now create your 404 template.

3. On the file section, locate your child theme for your site. At the bottom of the page, you will notice the file icon with plus sign. Add new files and set the name to 404.php

4. Paste this code on your 404.php template

 

STEP 4: Setting up your 404 page layout

1. Open the 404 template you imported on Divi Library

2. Then place the ID on the global_module=””

3. Check if the 404 Layout is working.

NOTE: Don’t delete or removed the template on your Divi Library or else your 404 page will not work.

 

Questions?

If you have any issues or questions, feel free to message in the comments box below.

 

Pin It on Pinterest

Share This