For users, encountering an error page can be frustrating and confusing. If your 404 page template is not customized properly, users may decide to leave your website. As a result, you’re missing out on engagement and potential conversions.
Fortunately, you can let users know they are still on your website and direct them back to your content by creating a custom 404 page.
What’s more, you can do this without needing any special technical knowledge thanks to Elementor and the Full Site Editing functionality in WordPress.
In this article, we’ll explain the ✅ benefits of having a custom 404 page for your website. Then, we’ll show you how to build one in two different ways – with WordPress Full Site Editing and with Elementor. Let’s get started!
Why you need a custom 404 page
A 404 error is a page that’s displayed when a server is unable to find the requested content. In other words, when a visitor either clicks a broken link or enters an incorrect URL on your site, they’ll receive a 404 error. For example, here’s our 404 page:
As you can see, we have tailored our 404 page to match our branding and to provide a way back to our active content – a search form and links to other posts.
An effective 404 page that is customized lets people know they are on the right website. In addition, it can provide links back to your content, which can improve your overall engagement numbers. If you don’t customize it, your visitors will receive a generic page from your active WordPress theme:
Not very attractive, is it? 🤔
Although this particular 404 page does have a link back to its main website, there isn’t another way to tell which site it belongs to. As a result, the user may decide simply to close the window and move on. After all, if they fail to find the content they were looking for on your site, they may look elsewhere.
In contrast, with our 404 page the user knows exactly where they are. Moreover, we’ve provided a search bar to help direct them to what they were trying to find. Not to mention, if you were to scroll down the page of our example you would find links to some of our most popular content.
Including elements such as these on your custom 404 page can help to prevent users from bouncing. In addition, you can increase time on site, as well as build trust and goodwill with your audience.
How to create a custom WordPress 404 page template using Full Site Editing (FSE)
WordPress does have its own visual (block) editor, which makes it easy to customize pages and posts for any casual user. Creating a custom 404 template with WordPress’ native functionality does not require technical knowledge.
One particular thing to have in mind about this method is that you need to use a WordPress block theme in order to make the most of the block editor’s capabilities. These themes are built with full site editing in mind, which facilitates building and customizing templates with blocks and design patterns.
For this tutorial, we’ll use our own Neve FSE as an example of how to create a custom 404 page template with WordPress’ full site editing. So, before getting to the actual steps, install Neve FSE (or another block theme of your choice) from within the WordPress dashboard.
In case you’re wondering about the cost, there is none. Neve FSE is a free theme.
👉 Then, just follow these few simple steps:
- Step 1: Create a 404 page template with Neve FSE
- Step 2: Add more stylish design patterns with Otter Blocks
- Step 3: Publish the 404 page
Step 1: Create a 404 page template with Neve FSE
Once Neve FSE is active on your site, go to Appearance → Editor. It will take you to the WordPress site editor, which looks like this:
In the editor, click on Templates and pick the 404 template from the list that appears in the left menu.
To start customizing it, click on any element in the template to enter the WordPress block editor and make your changes.
You can either keep the default Neve FSE design or insert new blocks and patterns from the WordPress catalog by clicking on the blue + icon at the top left of the editor. Blocks and patterns allow you to add various elements that can make your page more beautiful and engaging. As a result, your visitors will be more likely to pay attention to – and to click on – any links you include on the page.
Step 2: Add more stylish design patterns with Otter Blocks
We showed you how adding blocks to your 404 page can help your website in different ways. If you’re looking to expand this feature and use even more stylish block patterns than what WordPress has to offer, you can install third-party plugins like Otter Blocks for free.
Otter Blocks comes with gorgeous block patterns that will give you more freedom in customizing your 404 page template. It offers a collection of aesthetic elements and templates that will improve the design of your pages.
So, how does it work?
After installing the Otter Blocks plugin, simply go back to editing the 404 template in Neve FSE.
Once there, click on the same blue + icon. Among the visible pattern options, you’ll now also see Otter Blocks listed there. Click on it and scroll through its beautiful design templates.
Just drag the ones you want to use to the original template and feel free to customize them to your liking. This includes changing the text and possibly uploading your own images or removing elements – whatever works for you.
Here’s an example of a 404 page built with Neve FSE and Otter Blocks:
As you can see, it already looks a lot nicer than the default 404 page, and it took all of about a minute to create. If you were doing this yourself, it would only take you a few minutes to substitute the text and images with your own content. The low time investment compared to the high payoff makes this a no-brainer.
Step 3: Publish the 404 page
When you’re happy with the design of your 404 page, it’s time to publish it on the live site. To do so, click the Save button at the top right of the editor. This new design will take the place of the default one that Neve FSE comes with.
That’s it. From now on, whenever a user will access a link that’s not valid anymore, they will see this new 404 page template that you just designed.
You can test it yourself by typing a non-existent link on your site and you’ll see your new 404 page in action.
How to create a custom WordPress 404 page template using Elementor
To create a custom 404 error page template on WordPress, you can use the premium version of Elementor – Elementor Pro.
Elementor is a visual, drag-and-drop page builder, which means that you can create a totally custom design without needing any special knowledge. Or, if you don’t want to build your own design from scratch, Elementor Pro also includes a number of pre-built 404 page templates that you can import and customize as needed.
👉 To get started, you’ll want to install both Elementor and Elementor Pro. Then, follow these steps to create your own custom 404 page design…
- Step 1: Create a new 404 page template
- Step 2: Design your page
- Step 3: Publish your new 404 error page
Step 1: Create a new 404 page template
To begin, you’ll need to create a new Elementor template. In your WordPress dashboard, go to Templates → Theme Builder:
Next, select Single → Add New. This will bring up a page where you can choose the template you’d like to create. Click on the Type of Template drop-down menu and select Single. Then, navigate to the Post Type drop-down and click 404.
You’ll then be asked to name your template. You’re free to name it whatever you like, but we suggest sticking to something you’ll recognize, like “404 Page”. With this done, click on Create Template and you’re ready for the next step.
Step 2: Design your page
As we discussed above, a well-designed 404 page can prevent users from leaving your site when they encounter one. Of course, they can also increase engagement and lower your bounce rates, which is why this step is so important.
As a result, there are some strategies you can employ when it comes to creating your 404 page. For starters, you can use humor to ‘soften the blow’ and help to prevent users from becoming frustrated:
An image such as this one from Embrace Pet Insurance helps to make their 404 page fun and cute. You can also use images that are either interesting or reflect your branding:
Other elements you may want to add include contact information, a search bar (just like we do), and a link back to your home page. You may also consider adding some links to your most popular content or even a sitemap, in a similar way GitHub does at the bottom of their 404 page:
Combining these features can make encountering a 404 error page entertaining. In fact, some people will even purposely mistype a URL in order to see how their favorite site has designed theirs.
To design your page, you can start with one of Elementor’s 404 page templates and then customize it to match your branding and voice using Elementor’s visual, drag-and-drop interface:
Elementor includes all the widgets you’ll need – including a search form – so you can also build your 404 page template from scratch using the drag-and-drop interface.
If you’d like a helping hand here, we have a tutorial on how to use Elementor. While that tutorial is focused on building a product launch page, you can apply the same basic principles to your 404 page design.
Step 3: Publish your new 404 error page
At this point, all that’s left is to publish your new 404 error page.
To do that, click Publish in the bottom-left corner of the Elementor interface. That will open the Publish Settings popup, which lets you control where to display your template.
Elementor will have already selected your 404 page, so you can just click Save & Close to make your new custom 404 page template live:
Now, whenever someone clicks on a broken link or mistypes a URL, instead of being lost, they’ll find themselves on your custom 404 error page. This will give you a much better chance of keeping users engaged and happy as they navigate your site.
Conclusion 🧐
No matter how meticulous you may be when it comes to design, at some point users are going to encounter a 404 error page on your site. When they do, optimizing your 404 page template can not only improve your bounce rate, but also offer a better user experience.
🏗️ This article has discussed how easy it is to use either Full Site Editing or Elementor (free and premium) to build a custom 404 page. There are only three steps regardless of the method you choose, so let’s recap them quickly:
Finally, 🏁 just because you have an awesome new 404 page on your site, that doesn’t mean you want people to see it! To stop 404 errors from happening in the first place, check out our posts on 👉 how to find broken links in WordPress and how to fix 404 errors using 301 redirects.
Do you have any questions about 404 error pages or how to set one up in WordPress? Ask away in the comments section below!
Or start the conversation in our Facebook group for WordPress professionals. Find answers, share tips, and get help from other WordPress experts. Join now (it’s free)!