Transcript
Introduction
In this lesson, we will delve deeper into how to personalize your 404 template. A 404 page is also known as an error page or page not found. It is the content a user sees when they try to reach a non-existent page on your website. Most people who land on a default 404 page will probably leave your site immediately. An unattractive or unengaging 404 page leads to a poor user experience. It increases the bounce rate of your site and will, therefore, negatively impact your SEO. The quicker you can lead a visitor to the right place, the better. If you create an engaging 404 page, you will hopefully ensure that visitors stay and delve deeper into your site. It is, therefore, important to create a custom 404 page and think of ways you can draw a visitor’s attention or even use humor. I love this example from Pixar, as it just makes you smile. I also think Tendrik got it right by using an attention-grabbing image, humor, and a go-to home page button.
Customizing the 404 template
To personalize or customize your 404 template, navigate to the Site Editor, open templates and click on page 404. I am using the Twenty Twenty-Four default theme but every theme will set up this page differently. Let’s go ahead and modify this template to meet our requirements. I am going to keep my header but delete the Group and Footer blocks. Once deleted, I will add a Cover block and select an image from my media library. Then I will add a Columns block with two equal columns. On the left-hand side, I will add some text and write Keep calm and check your oxygen levels. Then I will change the size of the text to extra large. Below this, I will add a Buttons block or a call to action to take visitors to my home page if they accidentally land on a page not found. Then, I will bold the text, so don’t forget to add the home page link. Then, I will change the background color of the Buttons block to white and the text to black. We can also change the size of our Buttons block, and in this case, I will go for medium.
Once I have done that, I will select the Cover block and then toggle the Cover block to full height. I will choose for the text to be displayed at the bottom left. Then I will make my way to Styles and add some padding or space around my block’s content. I will also change the overlay opacity of my cover block to 30% to make it slightly lighter. Then, we can make our way to settings, and for better mobile viewing, I will change the image’s focal point. And that was the last step. Now, we can go ahead and click Save, and once we close my List View and sidebar settings, we can see our personalized 404 template. And then we can also check it out on mobile.
Adding a 404 pattern
Another option when customizing or personalizing your 404 template is to use a pattern. So, in the second example, I will delete my header, Group block, and footer to start blank. Then, I will go to the WordPress.org site and the Patterns Directory. Then, I will search for 404 patterns. But when you find a pattern, you can copy and paste it into your template. Now, you can modify it to meet your needs. As you will notice in my updated version, I have added a home page link or call to action and a footer with a search bar and links to my social media platforms.
Conclusion
I wish you all the best in creating your own eye-catching and creative 404 page. If your theme doesn’t have a 404 template, you can check out the Handbook to learn how to add your own.
Practical
Use WordPress Playground to apply your knowledge.
- Open the 404 template
- Enhance and design an appealing and engaging 404 page, as demonstrated in the video or as seen in the example below.
