Hi and welcome to Learn WordPress. Intoday's session, we are going to look at
how we can personalise our 404 template.A 404 page is also known as an error
page or page not found. It is thecontent a user sees when they try to
reach a non-existent page on yourwebsite. Most people who land on a
default 404 page will probably leaveyour site immediately. An unattractive
or unengaging 404 page leads to pooruser experience, it increases the bounce
rate of your site and will thereforenegatively impact your SEO. The quicker
you can lead a visitor to the rightplace the better, as this example. If
you create an engaging 404 page, youwill hopefully ensure that visitors stay
and delve deeper into your site. It istherefore important to create a custom
404 page and think of ways you can drawa visitor's attention or even use
humour. I love this example from Pixaras it just makes you smile. I also think
Tendrik got it right by using anattention-grabbing image, humour and a
Go to home page button. Now I would liketo show you two different ways that you
can create a custom 404 page. In thefirst example I'm going to use a Cover
block and in the second example I willuse patterns. At the moment I've
selected the default 404 template withmy header, footer, and then the 404
message. To change that, let's make ourway to the dashboard, hover over
Appearance and then click on Editor.This will take you to the Site Editor
where you can edit templates, click onthe site icon or WordPress icon, open
templates and select the 404 template.In this example, I'm going to use a
Cover block to create a new 404 page soopen your List View and remove the
header, the group and the footer. Andnow add your Cover block and select the
relevant image from your Media Library.Next, enlarge the Cover block and then
insert a Columns block with two equalcolumns. On the right hand side, add a
Navigation block and select a menu thatyou've created, and change the alignment
to right. In the left column, I willfirstly add a Heading block
and then I will write the message Keepcalm and make sure to check your oxygen
levels. Below that we are going to add aButtons block and write Go to the home
page as we want to direct people back toour website. Make the text bold and
change the background colour to white
and the text to black. Then we canchange the border radius of the Buttons
block to 100 pixels to give it a roundedstyle. Thereafter, I'm going to insert a
Spacer block. So once I've added theSpacer block, I'm going to enlarge it to
push the information on the left to thebottom and the Navigation block to the
top of the page. The next step is toselect your Navigation block and to use
your sidebar settings to change the sizeto large. Lastly, I will open up the
List View to ensure that I select theCover block and then change the padding
of the block to 120 pixels to make sureI add more space around the text. When I
close the List View and sidebarsettings, I can see that the Spacer
block needs to be enlarged slightlymore. And then once you click Save we
can make our way back to the front endof the website, refresh the page, and
here you have your new custom 404 pagecreated by using the Cover block. If
you're not happy with your changes youcan go back to templates and click on
the three vertical dots next to the 404template and select Clear
customizations. And now if you open upthe 404 template, you will notice that
it has reverted back to its originalstate. In the next example, we are going
to use patterns to create a custom 404page. So once again, I will open the
List View and remove the header, groupand footer. Next, I'm going to make my
way to wordpress.org/patterns., and inthis case, we are after a 404 pattern
and once you find the pattern thatappeals to you, you can merely copy and
paste it into your page or template. Ireally like this design, but I also want
to add some more elements to thepattern. Firstly, I'm going to highlight
the text below the 404 heading andchange the size to 30 pixels. Then I'm
going to add a Spacer block and changethe height to 40 pixels, and below that,
I will add a Buttons block. I will addthe text Take me home, make the text
bold, change the alignment to centre,change the background to black and the
radius to 100 pixels. Below that I willadd another Spacer block, change the
height to 40 pixels and then add aSearch block below the Spacer block.
Once I've added the Search block, I willchange the search button to display the
search icon or magnifying glass andchange the background colour to black,
and the radius of the block to 100pixels. Lastly, I will use my List View
to ensure that I select the entiregroup, click on the three vertical dots
and select Insert after. Now I wouldlike to add a footer to finish my design
off. So once I've selected the Footerblock, I will look for a pattern that
appeals to me. And the one I'm after iscalled Footer with social links and
copyright. Once inserted, I would liketo change the background colour of the
Footer block to the same as the patternabove. So to do that, I will select the
parent group, go to background colour,click on custom and copy the hex code of
the colour used. And now I will click onmy Footer block, go to background
colour, click on custom and then pastethe hex code that I just copied.
And now the Group block and the Footerblock have the same colour. Next, I'm
going to open up my List View, click onsocial icons and insert a paragraph
before. Then I will add my Navigationblock and select one of the menus that
I've already created and change thealignment to centre. And right at the
bottom I will add my site title
and change the alignment to centre. Andlastly, I'm going to select the 404
pattern as well as the footer patternand stack them together to create that
space in between. Once saved, we canmake our way to the front end of the
website. You see our 404 page in actionand all thanks to patterns. If you're
using a theme that does not provide abuilt-in 404 template, you will have to
create a 404.php file and add it to yourWordPress theme folder. I hope you enjoy
personalising your own 404 template, andvisit Learn WordPress for more tutorials
and training material.