How to create custom 404 error page in WordPress | WordPress Tutorial | The WordPress Buddy

[Music] hello friends today i will show you how you can convert your default 404 page into a stylish customized one for example this is the default for four page which we see in db theme and today we will convert this one into this stylish 404 page with a video background so you this is the logo this is the heading a search bar and a button to go back to the previous page go to the home page so you can customize this page however you want it's not limited to these elements you can design this page just like you design any other page with the dv builder most of website developers think that nobody is ever going to see this 404 bed but they are drawn because according to a research almost two to five percent of your audience or land on a 404 page or a page note found page so it's always a good decision or a good choice to design your forum page 404 page so that your users don't feel lost just like the people in the video so your forum page must be informative so that your users can keep browsing your site and they don't abandon your site because it's a very bad user experience when they land on a area of your website where they completely don't know where to go now so today i will show you how you can design your custom 404 page to reduce your site abundance rate usually there is no way to customize the 404 page but if you are using dv theme or db builder then you are very lucky because tv has completely given some awesome options in the its theme builder the theme builder is a very good feature where you can design custom template for each uh area of your site for example you can create a template for global header footer a global body for a host for your shop page for your blog page you can even create a custom template for a category as well so let's get started and uh see how we create our custom 404 page in tv builder so first of all after logging into your back end go to dv and theme builder and when you click on it then you will see a similar screen like this now you have to click on this plus icon and then you have to scroll down the end in the template settings light box you will see this 404 page option with the check box in the end you have to check this and then click on create template so now you have added a new template 404 page but it won't be activated unless we save changes but first we have to design our custom 404 page so click on add custom body and click on build custom body now it will show these three boxes just like we design any other page we have to click on start building if you want to create our four of four page from scratch now we have an empty blank canvas first of all let's add our video and make our section full height so it gets the full height of the window go to the section settings by clicking on this icon and then go to design tab and then go to sizing and in the height property enter 100vh it means this section would consume the 100 height of the window or the browser okay now we have to set the background go to the background tyre tab if you want to set a background color then you can set from this tab and if you want a gradient then you can do from here you can see and now you can change the color by clicking on these two icons or boxes and if you set a image then click on add background and you can set any image as a background image see now let's set a video so click on the video fourth step and click on add background image i have already updated loaded the video so this one is a video we are going to use you can just upload the video just like you upload any image just click on upload file then click on select file and upload the video from the library now go back to media library and select the video and it will show you the preview so use your know that you are embedding the right video now click on upload after selecting the video click on upload a video okay it will start playing here and in the background of the section as well just remember try to keep your video in less in size try to keep it in uh less than 2 mb but a size of between 2 and 5 mb will also work fine but don't go over 5mb because it might slow down your page loading speed okay now we have added our background so let's see the settings over this section now we have to show our logo so that people at least feel that they are on the same side and they are have not been reacted to any other site so much show the logo the same logo we shown other pages or other area for our site click on this plus and add a new row of single column now search for image element image now delete this placeholder by clicking on this delete icon now if you want to show the site logo then we can even add the logo but just by clicking add image and then select the logo here but in the future if you replace this you change your logo in the theme settings then this won't be updated so to keep it dynamic so that the this page gets the updated logo from the site bank and then click on this layer with plus icon and select site logo so it will fetch the logo set in your theme settings and then you won't don't have to worry about updating the logo if you plan to change the logo in your theme settings now let's align it in the center click on alignment then click on the center alignment icon uh you can also resize it going to the sizing tab set the max width to 200 or you can keep it little bigger say 300 okay we have set our logo you can also link the logo to your site home page by clicking on this link settings and then same here here just like we set the logo you can also set the link to home page instead of typing it manually click on this layer icon again and now click on home page link now it will automatically link to your website's home page okay now we have to add a title element so add that search for text element and now enter the contents account you are looking for does not exist you can type anything you want but for demo purpose i will use this line now we have to design it go to the design tab and then in the text widget section click on the color choose the color and set the alignment to center by text alignment and we want to make it a heading so go back to content under text select your con text and then click on this drop down and choose heading one so now it's a heading and by far all headings on my site are set to get green color so if you want to change it the color then you can again go to the color tab and click on the color you can also increase the size 40 and if you want to uh stretch or compress it if you want to show the title in two lines then you can set the max weights under the sizing tab then under max which uh enter 500 or whatever you want so as you can see now it's showing on the left now we have limited its width so we have to align it in the center by clicking on the module alignment and it's in the center okay now we have to add a search box click on the plus icon again then for the search and it will add a search we can also give it a background you can also enter placeholder like search something it's ear ch something and we have to give its color white so the user can read it okay we have added our search board but it's very wide so let's shorten it in the same just like we did our heading so go to the design and then go to the sizing and set the max width to 600 let's keep it a little bigger than the heading if you want to give it a background then you can again hover over it and click on this brush icon and you can set fill background color to white and then you will have to set the text color to something dark say black but we like the transparent one more so we will go back to the previous heading you can also design the button as well click over over the button and click on the pressure icon and here you can set the buttons settings for example we can change the button text color to white or button back background color to white and you can control some other settings as well okay so we have now added the logo that title and the search bar you can also add a button to send the user back to your home page search for the button [Music] and you can type go to home page and you can link it to the home page just by clicking the layer i can then selecting home page link now we have to line it in the center go to design tab alignment and center okay so we have prepared our 404 page bar you can also do something else with it however you want to design it there are no limitations just design it just like you design any other page or post now we will save it and after saying we just have to close it now we have finalized driver 404 page body so we have to make it active so it will only be activated on the front end when we click the save changes button so we have saved our changes now if you visit any url which does not exist on our site then you will see this new custom 404 page so go to command wp type hello see now you are seeing the custom 404 page and you can see by default we have the header at the top so if you want to hide the header and the photo you can do that as well so to do that we will go back to the theme builder and we will just click on the i icon of the add custom header so it will hide the header from the 404 page and you can also hide the footer as well and now click on save changes and now if we refresh our 404 page then you will now see the header and folder so this is how you customize your 404 page now if you want to make some other changes to this page then you can prove that by going to theme builder and clicking on this pencil like for the custom body now if you want to show a big heading like soaring or oops then we just clone it and change this first one too increases size so it looks small pop-up okay and let's decrease the size of this and set it to simple paragraph the content you are looking for does not exist let's increase its size 20. and you can see there's a big gap between this heading and this paragraph so let's discrete the size by going to design tab of the heading and then click on spacing and set 0 on the bottom margin and you can see it has jumped up so now to make your changes live you just have to click on the save now you don't need to go to the save changes button on the theme builder sorry for so for example previously we saved our changes and clicked on this one and then clicked on this button which had saved changes text before but you can see now this time it has all changes saved so let's check on the front and if our changes really got saved or not if we refresh the page see we have our changes on the front end so this is how and this is completely responsive you can check the responsiveness by going to theme builder and clicking the custom body again and if you provide device specific styling as well so you can just click on the three dots icon and then you will get these three desktop tab and mobile you can click on the tab icon it will show you how your page will look on the tab and then click on the mobile icon and it will show you how your page will look on the mobile view now you can change any settings for any device so this is how you set a custom 404 page in db theme builder if you have any questions please leave them in the comments i will be making more tutorials in the coming days thank you

Channel: WordPress Buddy

Views: 30

Keywords: 404 page, custom 404 page wordpress, wordpress 404 page, how to create a custom 404 page in wordpress, edit wordpress 404 page, custom 404 page, wordpress 404, custom 404 error page, change 404 page wordpress, page not found, 404 page wordpress, wordpress tutorial for beginners 2021, wordpress tutorial for beginners free, wordpress tutorial advanced, 404 page not found, divi builder, divi builder tutorial, divi theme builder tutorial, wordpress tutorial for beginners

Id: ShtoWhHvw4E

Length: 15min 45sec (945 seconds)

Published: Fri Sep 17 2021