In this lesson, we are going to 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 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.
As this example, 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.
To personalize or customize your 404 template, make your way 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 am going to add a Cover block and select an image from my media library.
Then I will add a Columns block with two equal columns.
And 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.
And below this, I am going to add a Buttons block or a call to action
to take visitors to my home page, if they are accidentally land on a page not found.
Then I will make the text bold and 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.
And I will choose for the text to be displayed bottom left.
Then I will make my way to Styles and add some padding or some space around the content
of my block.
I am also going to 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 focal
point of the image.
And that was the last step.
So 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.
Another option when customizing or personalizing your 404 template is to use a pattern.
So in the second example, I am going to actually delete my header, Group block and footer to
start blank.
Then I will make my way to the WordPress.org site and go to the Patterns Directory.
And then I will search for 404 patterns.
But when you find a pattern you like, 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
as well as a footer with a search bar and links to my social media platforms.
All the best 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.