How to Create a Custom 404 Page - Divi theme builder

in today's video I'm going to show you step-by-step how to create a 404 page now this is a page which people see when they try to access a page that does not exist on your website so this page is now easier to build because of the new Divi theme builder so I'm going to show you step-by-step how to create this page and also the good thing about this is you can actually design this page today and have it absolutely working on your website before we get started I'd also like to remind you that if you haven't bought dv8 if you buy Divi using my affiliate link I will give you access to my Divi blueprint course this is a course which teaches you how to design websites using Divi now the other way to get this of course is to become a VIP member and this is only $11 per month now this price will be going up very soon so make sure you get locked into the $11 per month now this will give you access to all the courses on funnels to income calm and any future of courses as long as your membership is active all right so without wasting a lot of time then let's dive in and let me show you how to create this 404 page alright so what we're gonna do here is we're gonna go back over here to our theme builder so you can see here this is where my 404 page is so I want to make things very very easy for you I'm gonna delete this so we can start from scratch all right so if we want to add a brand new template all we need to do is to click on this plus button and then you can see we have all these options here of templates that we can build so I'm gonna go all the way down here and this is where we have the 404 page now what I want to do quickly is I want to show you what happens when we try to access a link or a page that does not exist on our website so I'm just gonna open up a link here and some types of gibberish that and currently this is what happens this is the page that we get now as you can see this is very very annoying because before we could not do anything to actually fix this problem but now with the theme builder we can actually go in and customize our page and make sure that people visit this page when they land on our website alright so now we're gonna come over here click on this plus button scroll all the way down here and choose for a full page and then click on create template alright so this is our template right here so it has a default footer so I'm going to delete that because I don't need a footer on the default filter on this 404 page next we're gonna come over here to add custom body this is where our main design is going to be click on build custom body and then what we're going to do here is we are going to build our design from scratch so let's go ahead and select it great so next we're gonna have one column and this little closest for now because I need to do some settings here on our section so I'm gonna come over here to the top left click here on the skier icon and then we're gonna come over here to design sizing now it's very important here that we have our minimum height set to 100 VH now this is what enables our page to always be full screen and this is what we need we want our page to always be full screen alright so over here on the minimum Heights we're gonna set this to 100 VH great so that's the only setting that we need to do and let's head over here now to our content now here we can be also you know crazy creative so we can start here by adding a background so let's add a gradient background we're gonna click on this plus button now you can choose any colors that you want colors that work with your branding it's all good so I'm just gonna go with these colors that I have on my color palette in fact let me go with this one here ok so these are the colors I'm gonna use next I can also add an image here so let's design this without the image so that I just show you how to do it the easy way and also if you want to be a bit more creative alright so now that we have this all set I'm gonna save this and then over here now we can start adding our modules and my first module here is gonna be a text module so I'm gonna go ahead and select it and this is where we're going to add a message which says page not found I think that's say a decent one so let's add page not found here so that's gonna be our first message now let's customize this text by coming over here to this design tab so here let's go to text default let's change this to populist and by the way you can use any font that you want and then here let's make it bold all let's make it semi bold all caps and let's increase the size let's set this to let's start with 4vw alright so that's a bit too much so let's bring it down to three great and then the next thing we're gonna do here is to add some letter spacing I think four is okay and then we are going to let's see what okay we need to Center it so let's go ahead and send to this now the color here doesn't look right so we want to color that's easier to read on this background so we're gonna go with this color here and again this colors for my palate and you can use any colors as I mentioned all right so now that we have that that's looking great let's go ahead and save it next we need to add another one and this is going to have our main a 404 text so let's duplicate this go into the settings change this to 404 and now we are going to set this to heading 1 then over here on design then come to our heading text change our font to Poppins make this bold and it's already centered so that's great and we're gonna choose our color here so I want to go with white and for our size let's go with 30 VW now the reason why I'm using VW here is it makes it easier to scale when we move to different screen sizes so VW is mainly used for that okay so but of course you should not use it like everywhere because it just follows the size of the screen I'll make a video to explain this further all right so now that we have this we also need one more thing here and that is a button that takes us to the home page so let's add our button here so now let's say take me home that's gonna be our message and of course you can be creative with this and now over here on the design let's go to alignment I'm gonna send to this and now let's customize this button by coming over here to button and activating used custom styles for button so what we're gonna do here is let's start by changing the color of our text here and let's start it further now the size is a bit too much here so let's juicy to a bad perspective 13 okay so now let's move on here and for this design we're not gonna add a background color we're just gonna keep it simple and then we need to work on our border radius add 100 pixels here let us facing let's give this maybe let's give it to now over here on font let's be consistent let's sit to poppins and we're gonna make it semi bald and all caps great so our button is looking okay now we can also add a an icon here so I'm gonna go ahead and choose this one here and here waits a is only show icon on hover for button let's say no so that we can always see our icon so that's looking great nice and simple and save now what we can also do here is let's add a bit of padding here on the top okay so let's go with 100 over here with this text we can actually go in and customize this further we can give it a drop shadow let's go to heading text now let's go to the drop shadow so there we go so we can actually add a drop shadow and as you can see this looks really really cool and we can further customize this by coming over here and moving this ever so slightly we can move it over here like that and we can also give it a color so let's say we give you this color right here let's go with that so that matches pretty much our branding and that looks really really nice so this could be our first design but if you want to go crazy with this and do something a bit different what you can actually do is to add an image here to the background so let's get rid of this shadow save this now let's go to our section settings background now we're gonna come over here to this third tab click on this plus button now I have an image here now it's really cool to have an image that works or that goes with the type of message that you have on your on your 404 page so I'm gonna go with this one here off a guy that's frustrated that he's gone to the wrong page alright so let's click upload an image and by the way this is a free image I got it from pixels com alright so that's my image right here now the next thing I'm going to do is if you want to add a blending mode to work with our background color here we can also do that but if you want to leave it as it is in fact you know what I think I like the way it is so let's save this right and then what we're gonna do is we're gonna go in here and add some transparency to our text so let's come over here to filter so we can reduce the opacity here like that so about maybe 46% and that could be pretty much our design for our 404 page one thing that you can also do is you can come over here on the brightness adjust the brightness like that but of course that doesn't look nice so let's let's stick with opacity so let's add a bit of opacity here and I think also if we add a different color to this text it may even look better okay I think I like that right so that's gonna be our design now let's save this and let's save it one more time this is the design that we had initially so as you can see this design does not look good at all I mean come on I think you agree with me now now that I've saved my theme I'm gonna refresh this and let's see what happens so me go ahead and refresh it and this becomes our 404 page now here's the thing with this design I don't really like the header that we have here by default and the footer if we had a footer so ideally I just want to have a page which does not have a header and a footer so as you can see here this is a bit yeah it's distracting I don't like that all right so to get rid of the header and footer what we need to do is to come over here to the 404 page template and then just click on this eye icon now this will hide the main header and this will also do the same to the footer so let's save this and let's take a look at the design now okay so now that it's safe I'm going to come over here let's refresh the page there we go so now we don't have any headers we don't have any footers and this is a full page now I know what you're gonna ask you're probably gonna say alright maybe this doesn't work on a mobile device now let me show you what it looks like on all devices all right so I'm gonna come over here to grab one of these corners here and maybe that's how it would look on a only tablet and then all the way here is how it would look like on a mobile device so what you could also do here is to add a bit of padding so this is more centered but that's an easy fix now there's something that I forgot to mention here and that is we need to add a link to the home to the home page so let's go ahead and do that so I'm gonna come back over here and quickly on our button we're gonna click here and over here on the link you want to add your link URL so this could be this link right here copy it and paste it here alright so let's take a look and see if this button is now working so I'm going to refresh this page and when I come over here to the button and click it it takes me to my home page so that is how you design an a 404 page now if you like this design let me know in the comments box below and I can share this layout with you you can just go ahead and import it onto your own website and you know now you have a 404 page all right guys now tell me what you think about this if you have any other tips that you may want to add to this just let me know in the comments box below and if you still confused how to set it up just let me know so I can design future tutorials that can explain this even better all right so that's all I have for today's tutorial thank you very much for watching and I'll see you in the next video oh don't forget to subscribe by subscribing and hitting the Bell notification you'll be notified every time I release new tutorials until next time thanks for watching and I'll see you in the next video

Channel: MAK

Views: 14,038

Keywords: How to make business website with wordpress and divi, Augustine mak, divi 3.0 course, divi 3.0 training, divi 3.0 theme tutorial, WordPress website tutorial

Id: aJ_Zhb3Cj-c

Length: 12min 54sec (774 seconds)

Published: Fri Oct 25 2019