Easy Custom 404 Page Using The Divi Builder

22 May, 2017

A 404 page is an essential (but often overlooked) part of your website experience. When your visitors follow a broken link or type in an incorrect web address you want to be sure that they are going to be taken care of.

Your 404 page offers an ideal way to delight your lost visitors and bring them back to your content. By default the Divi 404 page leaves a lot to be desired, here’s how it usually looks…

… hardly inspiring, right?

Even if the rest of your website is well-designed this page can make all your hard work come undone. It’s not attractive, it offers no personality and it’s not in line with the rest of your branding.

But the real problem with the Divi 404 page is that is just isn’t all that useful. Sure, it informs visitors that you can’t find the page they are looking for but then what..? What if we had no sidebar and no search icon in the menu? What would your lost visitors click? Where would they go from here?

Thankfully improving your Divi 404 page and making it useful to your website visitors is pretty straightforward.

So let’s fix it.

In this short guide I’m going to be showing you how I create custom 404 ‘page not found’ pages for Divi.

The method we will be using involves creating your page in a Divi Layout and then implementing it into the 404 page template.

Before we get started it is a very good idea (read: essential) to be using a child theme for your website. A child theme will ensure that your changes remain unchanged whenever you update the Divi theme – and we don’t want to be losing our work all the time.

Alright, so now that’s out of the way – here we go!

1. Create Your Divi Page Layout

Our first step is to create a new Divi page Layout using the Divi Page Builder.

  1. We start off by signing in to our site and then going to Divi > Divi Library.
  2. In the Layouts page click on ‘Add New’. Now name your new template, such as ‘404 Page’, and be sure to select ‘Layout’ as the Template Type.
  3. Now is the time to create your 404 page layout. You can design it however you like but here’s some things you may want to include: a ‘page not found’ heading, a search box, links to other useful pages on your site and a piece of text to tell your visitors that you couldn’t find the page they were looking for.

    Side note: Talk about great timing. One of my favourite blogs, webdesignerdebot.com, just released a new post titled 5 ways to use 404 pages well. If you are feeling stuck for ideas about what to add to your 404 page then be sure to check it out.

Once you’ve created your design be sure to save your layout and then move on to the next steps.

2. Create A 404 Template In Your Child Theme.

Ok, so this is the technical part of the guide – but don’t worry, because it is really very easy and shouldn’t take long.

Quick tip: I have created a handy template file which will help speed up this process. By downloading this free Divi 404 template you don’t have to write the code yourself. Download the custom 404.php template here and then follow along with the steps below, skipping over any parts which have already been done for you.

  1. Open up a text editor such as Textedit on a Mac or Notepad on Windows. Save the file as ‘404.php’. You may find that you have to change the file extension if your text editor adds one automatically, for example on Textedit it will try to add .rtf. We want our file to be a dot php file (.php).
  2. Now it’s time for our first line of code. Type the following code into our 404.php file.
  3. The next line of code requires us to head back to our 404 page layout. Open up your layout and then in the URL bar we are looking for a string of numbers. These numbers are like an identifying code for your specific Divi layout. It will look something like this:


    The highlighted part above is what we need. It will be between the ‘=’ and the ‘&’, so highlight and copy it.

  4. Back to our 404.php file now, paste the number in the file so we have easy access to it. Now type the second line of code below the first line, like so:
  5. Now replace the word ‘NUMBER’ with your Divi layout ID number. Like this…
  6. Finally we are going to close the code off with one final line. Type the last line of code shown below:
  7. Save your 404.php file. Now we will need to upload this to the child theme folder for your website. Open up your FTP program – I like Filezilla or Cyberduck – and upload your file to your child theme. My child theme folder is called ‘worth-it-media-2016’…So all I have to do is drop the 404 file in to this folder.

And… that’s it! Congratulations.

Your new 404 page will now be active and any visitors who follow a broken link will now see your page template.

What I really like about this method is that you can go back and change your 404 page at any time by simply going to Divi > Divi Layouts and finding your 404 page layout. Any changes you make to this layout will automatically be reflected in your live 404 page.

Ready to get started?

Answer three quick questions to see if we're a match.

Ready to get started?

Answer three quick questions to see if we're a match.

Ready to get started?

Answer three quick questions to see if we're a match.