This post is a follow on from one we published a few weeks back. In this recent article we discussed how to enable shortcodes within the Divi theme so that you can place any module literally anywhere. We recommend you have a read through this so that you too can enable this functionality.

Now that we can add Divi Library Layouts using a shortcode, we can really improve aspects of our Divi website that were previously impossible to change.

If you’ve ever designed a new website using the Divi theme, you’ll know it’s great for it’s flexibility and available options. Unfortunately there are a few pages that are automatically generated by WordPress that you cannot customise, and this leaves your site looking inconsistent when somebody types in an incorrect URL and ends up on the 404 page. Other pages that you cannot edit include blog category pages, Woocommerce product categories and depending on how you set up your blog, single blog posts.

In this post we’ll be exploring how to can customise your 404 page, however the basic principle is exactly the same for any type of page.

Styling your 404 page

In our example we want to show you the kind of situation whereby it would be essential to style your 404 and other pages. We’ll use a recent project of ours as an example.

In this case, we centred the website’s menu around a full width video landing section, meaning it was required to be completely transparent and turn to white on scroll. This looks really great on the homepage (and other pages where we’ve created a picture header), but as soon as you view the 404 page you can see the problem.

Because there is no picture header behind the menu (and we can’t add one using the visual builder), you can’t see the menu!

Oops.

Fortunately we can resolve this fairly easily by editing a few of the theme files and using a shortcode. Firstly we created a Divi Library layout of the picture header below:

This will serve as the background to our menu on all of the uneditable pages on our website, including the 404 page. Next we came out of the module to the Library page and hovered over the saved module we just created.

We can see in the URL that appears in the bottom left corner of our browser when using Chrome that the ID of this new module is 82.

Once we’ve got the module ID that is the last thing we need to place this Divi Library item into our theme pages. The 404 page is created by combining two of our theme files. These are 404.php and no-results.php found in the includes folder.

Note: Before you start editing your theme files make sure that you’re using a CHILD theme.

We’ll start with adding the library item into the 404.php template so that we can see the menu. To do this all you need to do is copy the below code, replacing the “378” with the module ID you found earlier:

<?php echo do_shortcode('[showmodule id="378"]'); ?>

In this case we’d be copy and pasting:

<?php echo do_shortcode('[showmodule id="82"]'); ?>

We need to paste this line of code just after “<div id=”main-content”>” as per the image below:

At this stage you may also want to remove the sidebar if you haven’t included the default WordPress sidebar in your design. This is really simple and all you’ll need to do is remove:

<?php get_sidebar(); ?>

To really customise the 404 page with Divi we need to jump over to the file no-results.php as you can see that the 404.php file pulls in content from here.

You may want to amend the content that appears on your 404 page by changing the copy in this file – the text that is highlighted in the code editor above. You can also add some CSS to change the appearance of this text by either assigning the <h1> and <p> tags a class and adding custom CSS in your style.css file or adding it inline (which is probably slightly easier).

If you are looking to looking to edit any of the other pages of your website, all you need to do is find the file within your theme folder that controls that page and follow the steps above.

We hope this tutorial has helped. If you have any further questions, please contact us!