{"id":627,"date":"2021-07-07T12:03:46","date_gmt":"2021-07-07T12:03:46","guid":{"rendered":"https:\/\/kb.veeble.org\/?p=627"},"modified":"2025-03-10T10:33:48","modified_gmt":"2025-03-10T05:03:48","slug":"how-to-create-a-custom-404-error-page","status":"publish","type":"post","link":"https:\/\/www.veeble.com\/kb\/how-to-create-a-custom-404-error-page\/","title":{"rendered":"How to create a custom 404 Error Page?"},"content":{"rendered":"\n

A 404 not found error occurs when the visitor requests a non-existent URL within your website. The following guide will help you create a custom 404 error page<\/a>, just as shown below.<\/p>\n\n\n\n

\"How<\/a><\/figure>\n\n\n

Step 1: Log in to cPanel<\/strong><\/h3>\n\n\n

http:\/\/example.com\/cpanel<\/p>\n\n\n\n

Here, example.com represents your domain name. You should enter the cPanel username and password to get into the cPanel.<\/p>\n\n\n\n

\n
\n
Easy Method<\/a><\/div>\n<\/div>\n\n\n\n
\n
\n
<\/div>\n<\/div>\n\n\n\n
<\/div>\n\n\n\n
\n

If your website is hosted with Veeble, you can access cPanel easily through Veeble client zone.<\/p>\n\n\n\n

Login to Veeble Client Area<\/strong> >> select Services <\/strong>>> on Dashboard<\/strong>, <\/strong>locate your hosting package >>click Login to cPanel<\/strong> option<\/p>\n<\/div>\n<\/div>\n\n\n\n

<\/p>\n<\/div>\n\n\n

Step 2: Select File Manager, in the files section.<\/strong><\/h3>\n\n\n

The image below depicts the same.<\/p>\n\n\n\n

\"\"<\/a><\/figure>\n\n\n

Step 3: On the left sidebar, navigate to the public_html folder<\/strong><\/h3>\n\n\n
\"\"<\/a><\/figure>\n\n\n

Step 4: Create a file named 404.html<\/strong><\/h3>\n\n\n

Click on +File <\/strong>on the top left corner of the dashboard. Create a new file with the name \u201c404.html\u201d<\/strong>. <\/p>\n\n\n\n

\"\"<\/a><\/figure>\n\n\n

Step 5: Copy the HTML code to the file 404.html<\/strong><\/h3>\n\n\n

Edit<\/strong> the file 404.html<\/strong>, copy and paste the following HTML code inside it, and after that, save it.<\/p>\n\n\n\n

\n
\n
HTML code<\/a><\/div>\n<\/div>\n\n\n\n
<\/div>\n\n\n\n
\n
\n
<\/div>\n<\/div>\n\n\n\n
<\/div>\n\n\n\n
\n

<!DOCTYPE html>
<html>
<head>
<link href=”https:\/\/fonts.googleapis.com\/css?family=Roboto&display=swap” rel=”stylesheet” \/>
<link href=”.\/css\/main.css” rel=”stylesheet” \/>
<title>Document<\/title>
<\/head>
<body>
<div class=”v0_3″>
<span class=”v4_4″>404<\/span>
<span class=”v4_5″>Page Not Found<\/span>
<div class=”v9_3″><\/div>
<div class=”v7_7″><a href=”\/”>Return to Happiness<\/a><\/div>
<\/div>
<\/body>
<\/html><\/p>\n<\/div>\n<\/div>\n<\/div>\n\n\n

Step 6: Create a folder named CSS<\/strong><\/h3>\n\n\n

Click +Folder<\/strong> and create a new folder with the name “CSS<\/strong>“. <\/p>\n\n\n\n

\"\"<\/a><\/figure>\n\n\n

Step 7: Create a file named main.css<\/strong><\/h3>\n\n\n

In the CSS folder, click +File<\/strong> to create a file with the name \u201cmain.css\u201d<\/strong>. <\/p>\n\n\n\n

\"\"<\/a><\/figure>\n\n\n

Step 8: Copy the CSS code to the main.css file<\/strong><\/h3>\n\n\n

Please copy the following CSS code and paste it inside the main.css<\/strong> file and save.<\/p>\n\n\n\n

\n
\n
CSS code<\/a><\/div>\n<\/div>\n\n\n\n
<\/div>\n\n\n\n
\n
\n
<\/div>\n<\/div>\n\n\n\n
<\/div>\n\n\n\n
\n

* {
box-sizing: border-box;
}
body {
font-size: 14px;
}
.v0_3 {
width: 100%;
height: 1024px;
background: rgba(236,245,240,1);
opacity: 1;
position: relative;
top: 0px;
left: 0px;
overflow: hidden;
}
.v4_4 {
width: 100%;
color: rgba(0,0,0,1);
position: absolute;
text-align: center;
top: 55px;
font-family: Roboto;
font-weight: Regular;
font-size: 195px;
opacity: 1;
}
.v4_5 {
width: 100%;
color: rgba(0,0,0,1);
position: absolute;
top: 294px;
text-align: center;
font-family: Roboto;
font-weight: Bold Italic;
font-size: 48px;
opacity: 1;
}
.v9_3 {
width: 630px;
height: 337px;
background: url(“..\/images\/v9_3.png”);
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
opacity: 1;
position: absolute;
top: 55%;
left: 50%;
transform: translate(-50%, -50%);
overflow: hidden;
}
.v7_7 {
width: 100%;
color: rgba(0,0,0,1);
position: absolute;
top: 800px;
font-family: Roboto;
font-weight: Bold Italic;
font-size: 48px;
opacity: 1;
text-align: center;
}<\/p>\n<\/div>\n<\/div>\n<\/div>\n\n\n

Step 9: Create a new folder named images<\/strong><\/h3>\n\n\n

Create a new folder called \u201cimages<\/strong>\u201d. <\/p>\n\n\n\n

\"\"<\/a><\/figure>\n\n\n

Step 10: Upload the background image and rename it <\/strong><\/h3>\n\n\n

Upload any image of your choice inside the folder images or the image below and rename<\/strong> it to \u201cv9_3.png<\/strong>\u201d.<\/p>\n\n\n\n

\"\"<\/a><\/figure>\n\n\n\n
\n
Download image<\/a><\/div>\n<\/div>\n\n\n

Step 11: Tell the server to use your 404 error page<\/strong><\/h3>\n\n\n

Click on Settings<\/strong> >> tick Show Hidden Files<\/strong> >> click Save<\/strong><\/p>\n\n\n\n

Add the following line to your .htaccess<\/strong> file and save it.<\/p>\n\n\n\n

ErrorDocument 404 http:\/\/example.com\/404.html<\/p>\n\n\n

Step 12: Use your web browser to test your error page.<\/strong><\/h3>\n\n\n
\n
\n
Note<\/a><\/div>\n<\/div>\n\n\n\n
\n
\n
\n
\n
\n
\n

<\/p>\n<\/div>\n\n\n\n

\n

If your web page is displaying incorrectly do a hard refresh on your browser.<\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n

<\/div>\n\n\n\n

Secure, Scalable & Stress-Free \u2013 Managed VPS Built for Growth<\/strong><\/h3>

Get SSD speed, 24\/7 expert support, and DDoS protection. We handle server setup, security, and backups\u2014you focus on growth. Perfect for high-traffic sites and apps.<\/p><\/div>

Explore Plans<\/path><\/svg><\/a><\/div><\/div>\n","protected":false},"excerpt":{"rendered":"

A 404 not found error occurs when the visitor requests a non-existent URL within your website. The following guide will help you create a […]<\/p>\n","protected":false},"author":5,"featured_media":636,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_uag_custom_page_level_css":"","site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"set","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"categories":[4,15],"tags":[],"class_list":["post-627","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-cpanel","category-developers-stuff"],"uagb_featured_image_src":{"full":["https:\/\/www.veeble.com\/kb\/wp-content\/uploads\/2021\/07\/Screenshot-2021-07-06-at-4.34.38-PM.png",2880,1800,false],"thumbnail":["https:\/\/www.veeble.com\/kb\/wp-content\/uploads\/2021\/07\/Screenshot-2021-07-06-at-4.34.38-PM-150x150.png",150,150,true],"medium":["https:\/\/www.veeble.com\/kb\/wp-content\/uploads\/2021\/07\/Screenshot-2021-07-06-at-4.34.38-PM-300x188.png",300,188,true],"medium_large":["https:\/\/www.veeble.com\/kb\/wp-content\/uploads\/2021\/07\/Screenshot-2021-07-06-at-4.34.38-PM-768x480.png",768,480,true],"large":["https:\/\/www.veeble.com\/kb\/wp-content\/uploads\/2021\/07\/Screenshot-2021-07-06-at-4.34.38-PM-1024x640.png",1024,640,true],"1536x1536":["https:\/\/www.veeble.com\/kb\/wp-content\/uploads\/2021\/07\/Screenshot-2021-07-06-at-4.34.38-PM-1536x960.png",1536,960,true],"2048x2048":["https:\/\/www.veeble.com\/kb\/wp-content\/uploads\/2021\/07\/Screenshot-2021-07-06-at-4.34.38-PM-2048x1280.png",2048,1280,true]},"uagb_author_info":{"display_name":"Nivya Manuel","author_link":"https:\/\/www.veeble.com\/kb\/author\/nivya\/"},"uagb_comment_info":0,"uagb_excerpt":"A 404 not found error occurs when the visitor requests a non-existent URL within your website. The following guide will help you create a […]","_links":{"self":[{"href":"https:\/\/www.veeble.com\/kb\/wp-json\/wp\/v2\/posts\/627","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.veeble.com\/kb\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.veeble.com\/kb\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.veeble.com\/kb\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/www.veeble.com\/kb\/wp-json\/wp\/v2\/comments?post=627"}],"version-history":[{"count":53,"href":"https:\/\/www.veeble.com\/kb\/wp-json\/wp\/v2\/posts\/627\/revisions"}],"predecessor-version":[{"id":7961,"href":"https:\/\/www.veeble.com\/kb\/wp-json\/wp\/v2\/posts\/627\/revisions\/7961"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.veeble.com\/kb\/wp-json\/wp\/v2\/media\/636"}],"wp:attachment":[{"href":"https:\/\/www.veeble.com\/kb\/wp-json\/wp\/v2\/media?parent=627"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.veeble.com\/kb\/wp-json\/wp\/v2\/categories?post=627"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.veeble.com\/kb\/wp-json\/wp\/v2\/tags?post=627"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}