Subscribe on YouTube

Check out our videos on branding, web design, SEO, and online business.

404 Page Template [Elementor Tutorial]

Home Elementor 404 Page Template [Elementor Tutorial]


Elementor (Affiliate Link):

Video Transcript

404. Page Not Found. You’ve probably seen this error when browsing the Internet.

In geek speak,  a 404 error is that number returned when a user lands on a page on your website that doesn’t exist. There are several reasons for this error:

  • It could be that they just mistyped the URL
    or it could be that the URL has been changed or been removed from your website

It’s impossible to prevent all 404 errors from happening, but instead of giving somebody a generic page that’s probably going to lead them to somewhere else, we can create custom 404 templates that give people more information and keep them on our website.

These templates can offer links to different pages on your website, have your custom branding, and can even be a little bit fun. In this video, I’m going to show you how to create a custom 404 page using Elementor.

My name is Barbara and welcome back to Wicky Design.

To start, from my WordPress Dashboard, I’m going to go to templates, then add new. I’ll select Error 404 from the dropdown, then name my template “page not found”. 

There are several premade 404 templates available in Elementor Pro, so you may want to take a look at those for inspiration. I’m going to make my template from scratch, so I’m going to close out that window so I can start adding sections and widgets to the page.

The interface for a 404 template is the same as anything else you’d create in Elementor. You have the ability to add as much or as little as you want and can customize every part of the page. So take this opportunity to create a custom 404 template that shows off your personality and fits within the style of your brand. Although this is a page that probably won’t be seen very often, you can really have some fun with it.

For this 404 template, I’ve decided to keep things pretty simple. I found this stock image on Pexels, so I’m going to add that to the left column and use my right column for a custom message, search bar, and button that links back to the homepage. 

I’ll use the responsive mode in Elementor to check how things look on tablet and mobile devices. The responsive mode allows you to easily make changes to your layout for specific screens sizes and is one of my favorite features of Elementor.

I just want to make some final adjustments to this page before previewing it in my browser and then hitting the publish button.

In order to get this work, I’ll need to select 404 page from the display conditions dropdown. I’ll hit save, and now my new 404 template is live. Check it out.

I hope you found this tutorial helpful. If you did, please give this video a thumbs up, subscribe to our channel, and ring the bell to receive notifications whenever we post a new video. See ya next time!

* Some of the links on this page are affiliate links, meaning we may receive a commission if you follow them. This allows us to continue providing free content and educational resources for you. Thank you for supporting our small business!

More Free Resources

Template Restyles

Get a new website in only 7 days with our new template restyle service. The perfect solution for a new business owner.