Hello everyone, and welcome to another tutorial! In today’s blog, I’m gonna show you how to create a 404 Page with the Divi Theme Builder. But before we start – why do we need a 404 page in the first place?
Simple!… A 404 page is used for pages that don’t exist on your website – here’s how it works!
If you were to type in https://dividemo.com/blog
But instead… You accidentally typed in https://dividemo.com/blpg/ – it will redirect you to the 404 page telling you that the page was not found. However, this also works for pages that exist but are set to PRIVATE, meaning that only you can see the existing page as an admin/site owner.
Like Divi Demo’s test page, It exists, but only I can see it.
So if you were to type in https://dividemo.com/test-page/
Even though the page exists and it’s set to PRIVATE, you’ll still get redirected to the 404 page.
SO… Without wasting any time, let’s start creating our 404 page!
After that, click Add New Template.
In the pop-up, scroll all the way down till you see 404 Page!
Once you see the 404 page template, click it. After that, click Add Custom Body, and click Build Custom Body.
You’ll then be brought to the visual builder of the Divi Theme Builder!
Customizing 404 Page Template
From there, hover over the section until it turns blue! Once you see the blue border appear, click the cog icon.
In the section’s settings, click Design, then click Sizing.
In the Sizing settings, we’re only focusing on the Min Height! where it says auto next to the adjustable slider of Min Height, type in 100vh.
After fixing the Min Height settings, navigate back to Content and click Background… In the background settings, you can choose to add a solid color, gradient, or image!
For now, we’re going to stick with a solid color so we can see what we’re doing. Put in any hex code you like for the solid color background!
(If you’re still following along, this is the hex code I’m using: #645aff)
Once you’re finished adding your solid color background, click the checkbox to save the changes you made to the section.
Now that we got that out of the way, we can start working on the text!
Adding Text
Simply hover over the empty green row and click the green “+” icon to add a row, then select the single row!
After selecting the single row, add a text module. In the text module, remove all the dummy text, and replace it with Page Not Found.
After adding the new text – navigate to Design, click Text, and copy these settings. (you can still customize the text however you like!)
Text Font: Roboto
Text Font Weight: Bold
Text Font Style: Click “TT” (for all uppercase letters)
Text Color: #ffffff (white) or #000000 (black) depending on what solid color background you have
Text Size: 2vw
Text Spacing: 2px
Text Alignment: Center
After that, scroll down till you see Spacing and click it. After clicking Spacing, add 0px to top & bottom margin.
Once added, click the checkbox to confirm the changes you made!
Now… Hover over the text module you just customized and click the duplicate icon. After duplicating the text module, hover over the second text module and click the cog icon!
Change the text Page Not Found to 404, highlight the 404 text, and set it to Heading 1. After that, navigate to Design and click Heading Text.
(copy the heading text settings as shown below)
Heading Font: Default
Heading Font Weight: Ultra Bold
Heading Text Color: #ffffff (white) or #000000 (black) depending on what solid color background you have
Heading Text Size: 30vw
Text Shadow: Choose what you feels right to you
After that, click the checkbox to confirm the changes you’ve made.
Onto the next, our button!…
Creating a Button
Hover over the text module that says 404, and you should see the gray “+” icon – click it and add the button module.
Once you’ve added the button module, Type in Take Me Home, then scroll down, click Link, and paste the URL of your homepage – then navigate to Design, and click Alignment.
In the Alignment settings, set it to center, then scroll down and click Button!
Where it says Use Custom Styles For Button, click YES to enable the styles! (Again, copy my button settings. But if you wish to do your own button style, YOU CAN!)
Button Text Size: 15px
Button Text Color: #645aff
Button Background (Solid Color): ffffff
Button Border Width: 0px
Button Border Color: rgba(255,255,255,0)
Button Border Radius: 100px
Button Letter Spacing: 1px
Button Font: Raleway
Button Font Weight: Ultra Bold
Button Font Style: Click “TT” (for all uppercase letters)
Show Button Icon: NO (If you want to keep it and change it, you can!)
After customizing the button, click the checkbox once again to confirm the changes you made.
AND FINALLY… The background image!
Adding the Background Image
Hover over your section, click the cog icon, and click Background. (This is the image I’ll be using in this tutorial, Click to Download Image – again if you want to use your own image, you can!)
Now that you have your image prepared – let’s add it to our 404 page. In the background settings, click the image icon, and click Add Background Image.
After that, you’ll be brought to the Media Library – at the top-left, click Upload Files… Click Select Files and navigate to the image, or you can drag the image onto the Media Library.
Once the image is uploaded, look at the bottom right and click Upload an Image. Next, click the gradient icon and add the gradient combination you want!
I’ll be using these two color codes for this gradient combination:
Color 1 – #281fff
Color 2 – rgba(100,90,255,0.4)
Next, scroll down, and if you see Place Gradient Above Background Image, click the NO button to turn it to YES!
After adding the background image, click the checkbox to save the changes you made. Next, click the Save button at the bottom-right of your screen! After everything is saved, click the “x” at the top-right of your screen.
Now, look at the 404 page template, and you will see Add Custom Header and Add Customer Footer – next to them are eye icons. Click them!
Once you’ve clicked both eye icons of the Header and Footer, click Save Changes!… (So you don’t get confused) If you’ve made any changes previously, the button will sometimes show as All Changes Saved instead of Save Changes.
So if that happens to you, it still means you need to click it to save the changes!
Once all the changes are saved, you can visit your site’s homepage and do something like this to view a non-existing page on your site.
Example:
Your Site Name: https://dividemo.com/
(at the end of your site’s URL, put in anything like a typo or scrambled letters, like this “fsdgrsdgfse”)
Non-Existent Page (Scrambled Letters): https://dividemo.com/fsdgrsdgfse/
Non-Existent Page (Typo): https://dividemo.com/blpg/
Visit the non-existing page, and there you have it!
Conclusion
And that’s how to create a 404 Page with the Divi Theme Builder in WordPress! If you found this blog helpful, please feel free to share this with your family and friends as it would help them out too! Hope you had fun creating your 404 Page, and I’ll see you in the next blog.
