404 page is not a kind of main content on your website, since it appears only when visitors come to an unavailable page. However, for better SEO and better experience, we should pay some attention to this kind of page, to harmonize content, and drive visitors to the wanted pages.

So, let’s explore an interesting way to have a custom 404 page with flexible content using custom fields created with Meta Box and displaying it with Elementor. This will help you change the page's content easily in daily use.

Here is my custom 404 page as an example:

The custom 404 page was built by Meta Box and Elementor

Video Version

Before Getting Started

Besides the notice of ‘page not found’, you definitely add some other content, to make this page more informative. So, I added an image, a message, and two buttons. All of them will be regulated by content in custom fields.

Therefore, in this practice, we will use the following tools:

First, we need the Meta Box plugin to have a framework to create custom fields. It’s available on wordpress.org.

Besides, for the advanced features, we need some Meta Box extensions:

  • MB Settings Page: to create a settings page to input the 404 page’s information;
  • Meta Box Builder: to have a UI on the backend to create the custom field visually;
  • Meta Box - Elementor Integrator: to get data from Meta Box’s custom fields, using dynamic tags of Elementor;
  • Meta Box Group (optional): to organize custom fields into the group. In this case, they are the labels and URLs of the buttons.

You can install them individually or just use Meta Box AIO.

Lastly and obviously, we need Elementor and its pro version to build the page.

Now, let’s start!

Create a New Settings Page

The 404 page is not a specific page on the frontend, so we’re going to use a settings page to include all the content and other settings for it.

Go to Meta Box > Settings Pages and create a new page.

Go to Meta Box > Settings Pages and create a new page

For the position of the settings page, I’ll set this page as a submenu, and choose the Parent menu as the Settings.

Set the page as a submenu, and choose the Parent menu as the Settings

Then, you’ll see the page in the Settings menu. It’s still blank now since we haven’t added any content for it.

The page is in the Settings menu, it’s still blank

Let’s move to the next step.

Create Custom Fields

Instead of adding any specific and static content to the page, we’ll use custom fields. Then, input content to the fields.

Go to Meta Box > Custom Fields and create a new field group.

Go to Meta Box > Custom Fields and create a new field group

These are some fields that I’ll create for the page as examples. In the case that you want more fields for more information, just add them as you go.

Some fields that I’ll create for the page as examples

As mentioned, we’ll group the label and URL of the button together, then we’ll have a bundle for each button. So, add a Group field type for the button.

Add Group field for the button

I also want to add two buttons to the page, so make this group be cloneable.

Set the group is clonable to have more than one button

You also can set the title for the group. Here, I use {#} to number the button for the management purpose only.

Set the title for the group using {#} to number the button

Inside the group, add two subfields: one for the label, and another for the URL, for the direction.

Inside the group, add two subfields for the content and URL

After creating all the fields, move to the Settings tab, set the Location as Settings page, and choose the created settings page to apply the fields to it.

Move to the Settings tab, set the Location as Settings page, and choose the created settings page to apply the fields to it

Then, go to your settings page, you will see custom fields displayed.

The custom fields are displayed in the settings page

Just input data. Here is my content for example.

Input data for the settings page

Create Skins for the Buttons

Since we have a cloneable group for the buttons, and Elementor does not support directly displaying data from them on a template, we should create a skin for it first.

Go to Templates > Theme Builder.

Go to Templates > Theme Builder

There will be the Meta Box Group Skin menu. Click on it and add a new skin.

Click on the Meta Box Group Skin and add new skin

In the Preview Settings section, choose 404.

In the Preview Settings section, choose 404

Now, add a Section element to cover the button.

Add a Section element to cover the button

Then, add a Button element.

Add a Button element

We have the label for the button in the custom fields, so in the Text settings of the button, use the Dynamic Tags and look for the Meta Box Field option.

In the Text settings of the button, use the Dynamic Tags and look for the Meta Box Field option

Then, choose the name of the field that saved the button’s label. You will see it on the button immediately.

Choose the name of the field that saved the button’s label

For the link in the button, it also is saved in a custom field as well, so use Dynamic Tags.

Use Dynamic Tags in the Link settings to get the URL of the link

In the Meta Box Field option, find out the field that saves the links.

In the Meta Box Field option, find out the field that saves the links

You can style the button to have the new look as you want in the Style tab. I simply change the color of the button.

Style the button a little bit

Create a Template for the 404 Page

Now, we’ll create a template to stipulate how information about the 404 page should be displayed.

Also in the Theme Builder of Elementor, there is an exclusive section for the 404 page. Go to create a new template in this part now.

Go to the Error 404 section to add a new template for the 404 page

There will be various pre-built templates provided by Elementor, you can exploit them to save time and just change the content, or, build your own one.

First, add a widget with the expected layout.

Add a widget with the expected layout

Then, just add elements into this template as usual.

In the first column, for the image, I’ll add an Image element.

In the first column, I’ll add an Image element

And use the Dynamic Tags to get the image from the custom field we set on the created settings page.

Use the Dynamic Tags to get the image from the custom field we set on the created settings page

Choose the name of the field from the list.

Choose the name of the field from the list

In the second column, to highlight the message, add a Heading element.

In the second column, to highlight the message, add a Heading element

Also use the Dynamic Tags to choose the field to get the content.

Use the Dynamic Tags to choose the field to get the content

Next, for the buttons, we’ve had a skin for it, so look for the Meta Box Group element.

Add the Meta Box Group element for the buttons

Since the data is from a settings page, set the Object Type as Settings page.

Set the Object Type as Settings page

Then, set the name of the group that we use to store the information for the button.

Set the name of the group that we use to store the information for the button

And, the last one, set the created skin in the Skin section.

Set the created skin in the Skin section

You can see the two buttons displayed immediately.

Style the Page

If you want to modify the layout and change the look of the page, just go to the Style tab and Advanced tab of each element, and change the settings.

Go to the Style tab and Advanced tab of each element to style the page

This is the final look of my 404 page.

The final look of the custom 404 page

From now on, whenever visitors go to an unavailable page on your site, they’ll find this page. These two buttons will help to drive them to another page that may have some helpful content.

In the case that you want to change the content of the 404 page, just go back to the settings page, and change the data saved in the custom fields.

Last Words

With Meta Box and Elementor, you can have your own 404 page with unique content. Then, your website can be more interesting and have better SEO.

In the case that you don’t want to use the 404 page, the 301 redirect can be another solution. It is a permanent redirect type that can help you improve retention of your website.

Also for optimizing websites for SEO purposes, you can refer to the series of analyze content in custom fields.

If you want to suggest any tutorials, feel free to leave a comment and keep track of our blog. Thanks for reading!

  • How to Create a Custom 404 Page in WordPress - P1 - Using Meta Box and Elementor

Other case studies you might be interested in

  1. Create A Dynamic Landing Page in WordPress Using Custom Field
  2. Create a Filter to Find Hotels by Location
  3. Create an OTA Website Like Booking.com with Meta Box Plugin - P1: Create a Page to Introduce Hotel Rooms
  4. Create an OTA Website Like Booking.com with Meta Box Plugin - P2: Create Filters on the Archive Page
  5. Create an OTA Website Like Booking.com with Meta Box Plugin - P3: Create Filters for Single Hotel Pages
  6. Create Dynamic Favicon in WordPress using Meta Box plugin
  7. Create Posts Series in WordPress Using Meta Box
  8. Display The Latest Products Section - P2 - Using Meta Box and Elementor
  9. Display The Latest Products Section - P3 - Using Meta Box And Oxygen
  10. How to Add Custom Fields for WooCommerce - P2 - Using MB Views
  11. How to Add Custom Fields to Display Banners using Meta Box Plugin
  12. How to Add Custom Fields to Products in WooCommerce - Using Meta Box and Bricks
  13. How to Add Guest Authors and Guest Posts - Using Meta Box
  14. How to Add Related Posts - Using Custom Fields
  15. How to Build a Hotel Booking Website Using Meta Box - P1
  16. How to Build a Hotel Booking Website Using Meta Box - P2 - Booking Page in Backend
  17. How to Build a Hotel Booking Website Using Meta Box - P4 - Booking Management Page
  18. How to Build a Hotel Booking Website Using Meta Box – P3 – Booking Page for Customer
  19. How to Create a Classified Ads Website using Meta Box
  20. How to Create a Custom 404 Page in WordPress - P1 - Using Meta Box and Elementor
  21. How to create a FAQs page - P5 - Using Meta Box and Breakdance
  22. How to Create a Product Page - P2 - Using Meta Box and Oxygen
  23. How to Create a Product Page - P3 - Using Meta Box and Bricks
  24. How to Create a Product Page - P4 - Using Meta Box and Elementor
  25. How to Create a Product Page - P5 - Using Meta Box and Gutenberg
  26. How to Create a Product Page - P6 -Using Meta Box and Breakdance
  27. How to Create a Product Page - P7 - Using Meta Box + Kadence
  28. How to Create a Product Page - P8 - Using Meta Box and Brizy
  29. How to Create a Product Page - P9 - Using Meta Box and Divi
  30. How to Create a Product Page using Meta Box Plugin
  31. How to Create a Reading Progress Bar in WordPress Posts - P1 - Using MB Views
  32. How to Create a Recipe - P2 - Using Meta Box and Oxygen
  33. How to Create a Recipe - P3 - Using Meta Box and Elementor
  34. How to Create a Recipe - P4 - Using Meta Box and Bricks
  35. How to Create a Recipe - P5 - Using Meta Box and Zion
  36. How to Create a Recipe - P6 - Using Meta Box and Brizy
  37. How to Create a Recipe - P7 - Using Meta Box and Breakdance
  38. How to Create a Recipe - P8 - Using Meta Box and Kadence
  39. How to Create a Recipe - P9 - Using Meta Box and Divi
  40. How to Create a Recipe with Meta Box Plugin
  41. How to Create a Simple Listing - P2 - Using Meta Box and Bricks
  42. How to Create a Simple Listing - P3 - Using Meta Box and Breakdance
  43. How to Create a Simple Listing - P4 - Using Meta Box and Elementor
  44. How to Create a Team Members Page - P1- Using Meta Box and Elementor
  45. How to Create a Team Members Page - P2 - Using Meta Box and Oxygen
  46. How to Create a Team Members Page - P3 - Using Meta Box and Bricks
  47. How to Create a Team Members Page - P4 - Just Meta Box
  48. How to Create a Team Members Page - P6 - using Meta Box and Breakdance
  49. How to Create a Team Members Page - P7 - Using Meta Box and Kadence
  50. How to Create a Video Gallery Page - P2 - Using Meta Box + Bricks
  51. How to Create a Video Gallery Page - P3 - Using Meta Box and Breakdance
  52. How to Create a Video Gallery Page - P4 - Using Meta Box + Elementor
  53. How to Create a Video Gallery Page - P5 - Using MB Views
  54. How to Create a Video Gallery Page - P6 - Using Meta Box and Zion
  55. How to Create a Video Gallery Page Using Meta Box + Oxygen
  56. How to Create ACF Flexible Content Field with Meta Box
  57. How to Create an Auto-Updated Cheat Sheet in WordPress
  58. How to Create an FAQs Page - P1 - Using Meta Box and Elementor
  59. How to create an FAQs page - P2 - Using Meta Box and Oxygen
  60. How to create an FAQs page - P4 - Using Meta Box and Bricks
  61. How to Create an FAQs Page - P6 - Using MB Views
  62. How to Create an FAQs Page - P7 - Using Meta Box and Divi
  63. How to Create an FAQs Page - P8 - Using Meta Box and Kadence
  64. How to Create an FAQs Page - P9 - Using MB Blocks
  65. How to Create an FAQs Page -P3- Using Meta Box
  66. How to Create Buttons with Dynamic Link using Custom Fields
  67. How to Create Category Thumbnails & Featured Images Using Custom Fields
  68. How to Create Download and Preview Buttons - P1 - Using Meta Box and Bricks
  69. How to Create Download and Preview Buttons - P2 - Using Meta Box and Oxygen
  70. How to Create Download and Preview Buttons - P3 - Using MB Views
  71. How to Create Download Buttons in WordPress - Using Custom Fields
  72. How to Create Dynamic Landing Page in WordPress - P1 - Using Meta Box and Elementor
  73. How to Create Dynamic Landing Page in WordPress - P2 - Using Meta Box and Bricks
  74. How to Create Menus for Restaurants - P1 - Using Meta Box and Elementor
  75. How to Create Menus for Restaurants - P2- Using Meta Box and Bricks
  76. How to Create Notification Using Custom HTML Field
  77. How to Create Online Admission Form for School or University
  78. How to Create Online Reservation Form for Restaurants using Meta Box
  79. How to Create Reading Time to Your WordPress Posts - Using MB Views
  80. How to Create Relationships - P1 - Using Meta Box and Oxygen
  81. How to Create Relationships - P2 - Using Meta Box and Bricks
  82. How to Create Relationships - P3 - Using MB Views
  83. How to Create Relationships - P4 - Using Meta Box and Breakdance
  84. How to Create Taxonomy Thumbnails & Featured Images - P2 - Using Meta Box and Oxygen
  85. How to Create Taxonomy Thumbnails & Featured Images - P3 - Using Meta Box and Bricks
  86. How to Create Taxonomy Thumbnails & Featured Images - P4 - Using MB Views
  87. How to Create YouTube Video Timestamps on WordPress Website - P1 - Using MB Views
  88. How to Display a Video Playlist - P1- Using MB Views
  89. How To Display All Listings On A Map With Meta Box
  90. How to Display Author Bio in WordPress - P1 - Using Meta Box and Bricks
  91. How to Display Author Bio in WordPress - P2 - Using MB Views
  92. How to Display Dynamic Banners in WordPress - P3 - Using MB Views
  93. How to Display Images from Cloneable Fields - P1 - with Gutenberg
  94. How to Display Images from Cloneable Fields - P2 - Using Meta Box and Oxygen
  95. How to Display Images from Cloneable Fields - P3 - with Elementor
  96. How to Display Images from Cloneable Fields - P4 - with Bricks
  97. How to Display Opening Hours for Restaurants - P1 - Using Meta Box + Gutenberg
  98. How to Display Opening Hours for Restaurants - P2 - Using Meta Box and Oxygen
  99. How to Display Product Variations - P1 - Using Meta Box and Gutenberg

Leave a Reply

Your email address will not be published. Required fields are marked *