- Hey, you guys.
My name is Kori Ashton
and on this episode, I'm gonna teach you
how to build out a 404 on error page
on your Divi website.
For those of you not running Divi
for your WordPress website
I have an entirely different video.
I'll put the link to that in the description box below
that will walk you through using a plugin
to make make this adjustment on your WordPress website.
But for the rest of you running on Divi
I'm gonna show you right now how easy it is
to go into your theme builder and build out a 404 page
so that you don't see a no results found error page.
It's always good to have your 404 page ready to go.
I'll show you how to do that all right now.
(upbeat music)
Of course this is brought to you by LearnDash.
When you're ready to get your courses online
please be sure it's check out LearnDash,
they have an incredible LMS,
a learning management system that allows you
to quickly and easily get your course content online
and start selling today.
All right y'all, let's get to the Divi tutorial,
how to build out your 404 page.
Once you're logged in, you're going to go to Divi,
on the left side over here, right?
And you'll go into the theme builder right there,
theme builder and Divi.
And I've got a lot of other options going on here
but let's just start new, gonna click add new template.
We're gonna go to the 404 page.
They already have it designated.
So we're gonna click create template.
And now that gives us an opportunity to go in,
add a custom body.
And if you know Divi, you've got three options,
build from scratch, a pre-made layout
or clone one your pages.
I'm gonna build from scratch.
Let's go ahead and just add in a full width area here
and text.
Really you can add any message you like,
I'm gonna have kind of fun here
and say that you need a sense of humor in this industry.
So this is going of course, on my ask kori.com website.
So just something fun here,
and you'll get to see some of my sense of humor
when it comes to a 404 page.
Remember, as I'm doing all this
that this is going to be seen.
If anybody maybe has an old link
or maybe has something bookmarked
that you'll want to be sure to direct them correctly
to maybe that's a broken link now.
So yeah, that's what you would do here.
I'm gonna add in a fun video as well.
So let's just add new module video
and I'm gonna drop in a YouTube video that's really funny.
And if y'all have never seen this video,
it's pretty fantastic.
Yeah, The Expert, this is a really funny video.
I'll drop that in there.
I'm gonna put my text just below it.
And of course this isn't just for being funny.
What we wanna do now is go ahead
and add something in there
that helps them know what they're seeing.
So we do wanna say something about an oops message
if you will.
I'm gonna go ahead and add another text box
and put in there.
Oops, something went missing, right?
We're just gonna add that in there
so that they understand that this is an error
that they're seeing.
This is a page that's letting them know
that what they're looking for is probably gone
and I'm gonna use the layers module here,
drag it up to the top of the page, drop it up there.
Now, as soon as they land on any sort of broken link,
they're gonna see that error message right away
which is really, really good to let them know
that something is missing.
Another option you can do is add in a search option.
You know, if your website is really large,
if you have a lot of resources there
perhaps you'd like to add in search bar.
So I'm gonna add a bit of text that gives instructions
to use the search bar or click this button,
or this link to go home.
You can add in different options here.
I'll fancy it up just a little bit
with some design added to the text.
Isn't this so cool using the Divi Builder
that you never have to know code anymore.
Back in the day this would've taken me you forever to do
inside of CSS.
The next module I'll add is the search module.
Super easy to do that.
Drop that right in here, add in search our site.
Perfect, put some spacing, put it in the middle,
very straightforward.
One last touch, I'm gonna throw in a funny gif or jif,
put that in here a little animated fun
just to let people know again
it's just something fun and silly.
Ah, one of my favorites.
Now that you've got that done,
you're gonna go back, click save changes, right?
And then I wanna show you what this is gonna look like
on the front side.
Now, if we click refresh on that page
that said no's results found,
now this is what they're gonna see
anytime they come to a missing link or a broken link.
How cool is that?
So super simple to do.
But remember I had a text area in here that says, you know
click here to go to our homepage or search below.
So they can use the search bar if they wanted to right here
or they can click on the click here to go to our homepage.
I missed that.
So let's jump back in there for one more second,
get back into that template
and just go ahead and add in a text link
for that little bit of text here that says click here.
Of course, if you wanted to do this in visual mode
you can click over that tab and do this in visual mode.
But for now, just gonna type the code really quickly in here
and finish that up.
And now that's clickable.
You can see that beautifully right there.
It changes color, my nice bright orange.
Of course you can change it to whatever color you want
but you really want it to stand out,
so I'm gonna bold it even just a little bit and click, Okay.
We're gonna open up our little purple menu here,
click Save and two extra little steps,
exit out of this screen and click save all changes.
And now going back, you can see that it is clickable now.
There you go.
I hope that Divi tutorial was helpful for you.
Obviously you're running on Divi.
Did you know I have an entire playlist here
on my YouTube channel dedicated to all things Divi,
I'll put the link to that
in the description box below as well.
I hope you're having a great one.
Be sure to like and subscribe.
I'll see you back here next week.
Bye y'all.
(upbeat music)