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:
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.
For the position of the settings page, I’ll set this 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.
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.
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.
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.
I also want to add two buttons to the page, so make this group be cloneable.
You also can set the title for the group. Here, I use {#}
to number the button for the management purpose only.
Inside the group, add two subfields: one for the label, and another for the URL, for the direction.
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.
Then, go to your settings page, you will see custom fields displayed.
Just input data. Here is my content for example.
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.
There will be the Meta Box Group Skin menu. Click on it and add a new skin.
In the Preview Settings section, choose 404.
Now, add a Section element to cover the button.
Then, 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.
Then, choose the name of the field that saved the button’s label. You will see it on the button immediately.
For the link in the button, it also is saved in a custom field as well, so use Dynamic Tags.
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.
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.
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.
Then, just add elements into this template as usual.
In the first column, for the image, 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.
Choose the name of the field from the list.
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.
Next, for the buttons, we’ve had a skin for it, so look for the Meta Box Group element.
Since the data is from a 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.
And, the last one, 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.
This is the final look of my 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
- Create A Dynamic Landing Page in WordPress Using Custom Field
- Create a Filter to Find Hotels by Location
- Create an OTA Website Like Booking.com with Meta Box Plugin - P1: Create a Page to Introduce Hotel Rooms
- Create an OTA Website Like Booking.com with Meta Box Plugin - P2: Create Filters on the Archive Page
- Create an OTA Website Like Booking.com with Meta Box Plugin - P3: Create Filters for Single Hotel Pages
- Create Dynamic Favicon in WordPress using Meta Box plugin
- Create Posts Series in WordPress Using Meta Box
- Display The Latest Products Section - P2 - Using Meta Box and Elementor
- Display The Latest Products Section - P3 - Using Meta Box And Oxygen
- How to Add Custom Fields for WooCommerce - P2 - Using MB Views
- How to Add Custom Fields to Display Banners using Meta Box Plugin
- How to Add Guest Authors and Guest Posts - Using Meta Box
- How to Add Related Posts - Using Custom Fields
- How to Build a Hotel Booking Website Using Meta Box - P1
- How to Build a Hotel Booking Website Using Meta Box - P2 - Booking Page in Backend
- How to Build a Hotel Booking Website Using Meta Box - P4 - Booking Management Page
- How to Build a Hotel Booking Website Using Meta Box – P3 – Booking Page for Customer
- How to Create a Classified Ads Website using Meta Box
- How to Create a Custom 404 Page in WordPress - P1 - Using Meta Box and Elementor
- How to create a FAQs page - P5 - Using Meta Box and Breakdance
- How to Create a Product Page - P2 - Using Meta Box and Oxygen
- How to Create a Product Page - P3 - Using Meta Box and Bricks
- How to Create a Product Page - P4 - Using Meta Box and Elementor
- How to Create a Product Page - P5 - Using Meta Box and Gutenberg
- How to Create a Product Page - P6 -Using Meta Box and Breakdance
- How to Create a Product Page - P7 - Using Meta Box + Kadence
- How to Create a Product Page - P8 - Using Meta Box and Brizy
- How to Create a Product Page - P9 - Using Meta Box and Divi
- How to Create a Product Page using Meta Box Plugin
- How to Create a Recipe - P2 - Using Meta Box and Oxygen
- How to Create a Recipe - P3 - Using Meta Box and Elementor
- How to Create a Recipe - P4 - Using Meta Box and Bricks
- How to Create a Recipe - P5 - Using Meta Box and Zion
- How to Create a Recipe - P6 - Using Meta Box and Brizy
- How to Create a Recipe - P7 - Using Meta Box and Breakdance
- How to Create a Recipe - P8 - Using Meta Box and Kadence
- How to Create a Recipe - P9 - Using Meta Box and Divi
- How to Create a Recipe with Meta Box Plugin
- How to Create a Simple Listing - P2 - Using Meta Box and Bricks
- How to Create a Simple Listing - P3 - Using Meta Box and Breakdance
- How to Create a Simple Listing - P4 - Using Meta Box and Elementor
- How to Create a Team Members Page - P1- Using Meta Box and Elementor
- How to Create a Team Members Page - P2 - Using Meta Box and Oxygen
- How to Create a Team Members Page - P3 - Using Meta Box and Bricks
- How to Create a Team Members Page - P4 - Just Meta Box
- How to Create a Team Members Page - P6 - using Meta Box and Breakdance
- How to Create a Team Members Page - P7 - Using Meta Box and Kadence
- How to Create a Video Gallery Page - P2 - Using Meta Box + Bricks
- How to Create a Video Gallery Page - P3 - Using Meta Box and Breakdance
- How to Create a Video Gallery Page - P4 - Using Meta Box + Elementor
- How to Create a Video Gallery Page - P5 - Using MB Views
- How to Create a Video Gallery Page - P6 - Using Meta Box and Zion
- How to Create a Video Gallery Page Using Meta Box + Oxygen
- How to Create ACF Flexible Content Field with Meta Box
- How to Create an Auto-Updated Cheat Sheet in WordPress
- How to Create an FAQs Page - P1 - Using Meta Box and Elementor
- How to create an FAQs page - P2 - Using Meta Box and Oxygen
- How to create an FAQs page - P4 - Using Meta Box and Bricks
- How to Create an FAQs Page - P6 - Using MB Views
- How to Create an FAQs Page - P7 - Using Meta Box and Divi
- How to Create an FAQs Page - P8 - Using Meta Box and Kadence
- How to Create an FAQs Page - P9 - Using MB Blocks
- How to Create an FAQs Page -P3- Using Meta Box
- How to Create Buttons with Dynamic Link using Custom Fields
- How to Create Category Thumbnails & Featured Images Using Custom Fields
- How to Create Download and Preview Buttons - P1 - Using Meta Box and Bricks
- How to Create Download and Preview Buttons - P2 - Using Meta Box and Oxygen
- How to Create Download and Preview Buttons - P3 - Using MB Views
- How to Create Download Buttons in WordPress - Using Custom Fields
- How to Create Dynamic Landing Page in WordPress - P1 - Using Meta Box and Elementor
- How to Create Dynamic Landing Page in WordPress - P2 - Using Meta Box and Bricks
- How to Create Menus for Restaurants - P1 - Using Meta Box and Elementor
- How to Create Menus for Restaurants - P2- Using Meta Box and Bricks
- How to Create Notification Using Custom HTML Field
- How to Create Online Admission Form for School or University
- How to Create Online Reservation Form for Restaurants using Meta Box
- How to Create Relationships - P1 - Using Meta Box and Oxygen
- How to Create Relationships - P2 - Using Meta Box and Bricks
- How to Create Relationships - P3 - Using MB Views
- How to Create Relationships - P4 - Using Meta Box and Breakdance
- How to Create Taxonomy Thumbnails & Featured Images - P2 - Using Meta Box and Oxygen
- How to Create Taxonomy Thumbnails & Featured Images - P3 - Using Meta Box and Bricks
- How to Create Taxonomy Thumbnails & Featured Images - P4 - Using MB Views
- How to Create YouTube Video Timestamps on WordPress Website - P1 - Using MB Views
- How To Display All Listings On A Map With Meta Box
- How to Display Author Bio in WordPress - P1 - Using Meta Box and Bricks
- How to Display Author Bio in WordPress - P2 - Using MB Views
- How to Display Dynamic Banners in WordPress - P3 - Using MB Views
- How to Display Images from Cloneable Fields - P1 - with Gutenberg
- How to Display Images from Cloneable Fields - P2 - Using Meta Box and Oxygen
- How to Display Images from Cloneable Fields - P3 - with Elementor
- How to Display Images from Cloneable Fields - P4 - with Bricks
- How to Display Opening Hours for Restaurants - P1 - Using Meta Box + Gutenberg
- How to Display Opening Hours for Restaurants - P2 - Using Meta Box and Oxygen
- How to Display Product Variations - P1 - Using Meta Box and Gutenberg
- How to Display Product Variations - P2 - Using Meta Box and Oxygen
- How to Display Product Variations - P3 - Using Meta Box and Bricks
- How to Display the Dynamic Banners - P2 - Using Meta Box and Bricks
- How to Display The Latest Products - P5 - Using Meta Box and Bricks