custom elementor 404 pages

How to Create and Design a Custom 404 Error Page Using Elementor

By: Hugo Makes

A 404 error page is displayed when a visitor tries to access a webpage that doesn’t exist on your website. A well-designed 404 page using Elementor can help retain visitors and guide them to relevant content on your site. In this tutorial, I’ll show you how to easily create and design a custom 404 error page using Elementor. All you need is a copy of Elementor Pro!

Prefer to Watch?


This one is simple, all you need is to make sure you have the latest version of Elementor and Elementor Pro installed as well as the latest version of WordPress.

elementor 404 error builder
Go to Templates > Theme Builder in Elementor to Get Started

Create 404 Template in Elementor

  • In your WordPress dashboard, go to ‘Templates’ > ‘Theme Builder’.
  • Click on the ‘Add New’ button.
  • From options available, select ‘Error 404 Page’ as your template type.
  • You’ll be prompted to choose a template from the Library or create a new template. If you’d like to create your own, click on the X button to go into the Editor Theme Builder.
  • Before doing anything else, click on the settings button and give your Template a title that you can easily identify. For example: Default 404 Error Page.
  • Then click on Publish to Choose where you want your 404 Error Page to show up. Choose the default option.
elementor 404 error template
Make sure to select the 404 Template from the list.

If you opted to use a pre-built template, you can now edit that template as you would usually. If you selected to create your own proceed to the following steps.

elementor 404 error settings
Name your template something useful.

Design Your 404 Error Page in Elementor

Use Elementor’s drag-and-drop interface to add and customize widgets such as headings, text, images, buttons, and more. Some popular elements to include on your 404 page are:

  • A prominent headline indicating the error (e.g., “Oops! Page not found”)
  • A brief explanation and possible reasons for the error
  • A search bar to help visitors find the content they’re looking for
  • Links to popular pages or categories on your website
  • A button to return to the homepage

Customize the design by adjusting the typography, colors, background, and other style settings.

Test Your Custom Elementor 404 Error Page

To test your custom Elementor 404 error page, try visiting a non-existent page on your website (e.g., Make sure to verify that your custom Elementor 404 error page is displayed as expected. Also be sure to test any widgets if you opted to include a search bar as well as any links you included – you don’t want your 404 page to link to other missing pages, that would just be silly town.

elementor 404 error example
Make sure you test your Elementor 404 page for errors.

The Wrap Up

Creating a custom 404 error page with Elementor is both extremely simple and an effective way to improve the user experience on your website. By providing helpful information and navigation options, you can guide visitors back to relevant content and reduce bounce rates.

For other Elementor tutorials don’t forget to check out my YouTube or Rumble channel or subscribe to my email list.

Hugo Makes
Hugo Makes

Hugo Makes is the co-founder of an award winning design and digital marketing agency. He has been developing and marketing websites since 1998.

Found this article useful? Share it.

Related Posts