How to Create an Entertaining 404 Page Design [Tutorial]

Looking for an easy way to put a personal spin on the 404 page design? Get inspiration and information on how to set up a custom 404 error page in this tutorial.

404 errors are inevitable. Rather than rely on WordPress to send the boring default error page to visitors, provide them with some brief entertainment before they get back on track.

In this tutorial, we’ll show you how to use one of the templates in the 404 Page Hero Collection to come up with a lighthearted pitstop for your visitors.

Table of Contents:

How to design an entertaining 404 page for lost visitors

What’s your immediate reaction to encountering a 404 error online? Probably something like, “Ugh…”. But what if you saw something that looks like this?

If you can get visitors to smile or even chuckle, the blow of seeing a 404 page might be softened.

In this tutorial, we’ll show you how to take the original concept from the above template and turn it into a 404 error response for a Florida tourism company:

Need a Slider Revolution intro? Start with these guides:

Step 1: Delete all but the 404 page you want to use

This 404 collection comes with four different designs to choose from. Which one you pick depends on a number of things.

For starters, think about the theme of your website. Is there a way to naturally translate it into one of these designs? For example, if you’re building a 404 page for a museum, stock photo site, or even a web design portfolio site, Slide #3 would be a great choice.

Another thing to consider is how much text you want to add to the page. Do you need to add context or do you want to keep it quick and simple? If you prefer a more concise error message, Slide #1 would be a great pick.

One final thing to think about is the layout. Each of the slides have unique concepts and layouts to go with them. Try to visualize the images you are going to add to your 404 page and the best way to lay them out.

For our tourism site, we’re going to repurpose Slide #2 since it has all the components we need and it won’t take much work to customize what’s there.

Once you’ve narrowed it down, go to “Slides” in the toolbar. Then click the trash can icon that appears next to each slide you don’t want to use.

You’ll have one slide left when you’re done.

Learn more:

Step 2: Upload new background image

To replace the existing background photo, go to “Slide Options” and “Background”. Click the Media Library button to upload your new photo.

There’s currently a pan-and-zoom effect applied to the background image. Open the preview of your slide to see how it looks with your new background.

To customize the zoom effect, go to the “Ken Burns” settings.

Because of where we’re planning to place our main image, we needed to adjust the position of the background zoom to bottom-align. You can use other settings here to alter the zoom, panning, blur, easing, and duration.

When you’re done, preview the slide one more time to make sure you like how the effect came out.

Learn more:

Step 3: Insert new person image

Each slide has a different focal point. In Slide #2, it’s a hand holding a compass. We’re going to replace this Center-Img layer with our adventurous sunbather.

To do this, select the layer in the timeline editor or canvas. Then upload your replacement image under “Content”.

If the image’s size or alignment isn’t what you want it to be, go to “Size & Pos”.

To change the size, use the width (W) and height (H) fields. To change the position, use the alignment settings as well as horizontal (X) and vertical (Y) fields.

If you make any modifications, you’ll need to do some responsive editing before moving on. Go to the toolbar and open the responsive variant editor.

Any changes you make in the different views will apply only to the variant you’re looking at. The default desktop view will remain as is.

Learn more:

Step 4: Delete text layers you don’t need

Since this 404 error page will go on our existing site, there are certain text layers that we don’t need:

  • Logo
  • Templates
  • About
  • Contact

We’re also going to toss out the following:

  • Tagline
  • 2023
  • Arrow Right
  • Arrow Left

We want to keep this page as simple as possible so people can focus on the strange design and entertaining copy.

Because there are a lot of columns and groups built into the design, we need to do a bit of cleanup while we delete our layers. The easiest way to do this is by holding down the Ctrl or command key. Then select the following in the timeline editor:

  • Row-2
  • Tagline
  • 2023
  • Next
  • Empty
  • Prev

Then hit Backspace or delete. This will remove everything except the Headline, Paragraph, and Cta-Button layers.

Learn more:

Step 5: Customize the headline and description

To edit the two remaining text layers, select them one at a time and use “Layer Options” to make your customizations.

You can change what the text says under “Content” and edit the font and styling under “Style”.

Because we don’t have the header elements filling in the top anymore, we’re going to move our text layers up there to better balance out the design.

Rather than move them one by one, we’re going to move the entire Copy Row-2 container up (make sure it’s the one that contains these layers) and then center-align the Headline and Description. You’ll find those settings under “Content”.

We’re also going to remove the ⅓ width setting applied to the Description under “Size & Pos” so that it can be centered within the full container.

Note: When you do this, the text will stretch the full width of the container. If you want to force the text to break to the next line, place “<br />” at the breaking point. You can also use the return-arrow icon above the text editor block.

Lastly, we’re going to add a 50px margin above the Copy Row-2 container in order to give it some breathing room at the top. This setting is under “Style”.

Here’s what that process looks like:

If you end up moving your text to a different area of the slide or making major adjustments to the size or style compared to the original, do a responsive check before you wrap up this step.

Learn more:

Step 6: Update the button

As of right now, the button sits on top of our sunbather. It’s also inside of another row called Copy Row-2. We don’t need the row anymore since the two layers that were there before are gone.

So we’re going to move the Cta-Button layer out on its own, delete the row, and then change the button’s positioning. Here’s how to do this:

  • Drag-and-drop the button in the canvas to a spot outside the row.
  • Select the row (make sure it’s the one containing the button and not your other text layers) and delete it.
  • Go to “Size & Pos” and use the settings there to move the button to its new location.
  • Go to “Style” and delete the 130px margin on the left side of the button so it’s fully centered.

Note: If you’d like your button to appear behind the Center-Img layer, make sure it’s lower in the list of layers in the timeline editor.

With the positioning done, you can now edit the button itself. Go to “Content” to change the button’s label. Then use “Style” to customize the text font as well as the button color, size, and shape.

If you want the button to look different when someone hovers over it, go to “Hover” settings to make your changes.

The last thing to do with the button is to set an action for it. Click “Actions” to open the control panel.

Here you’ll see that a Simple Link has already been created. Add your custom Link URL to activate the button.

When you’re done, do one final responsive check and edit. Then save your changes.

Learn more:

Step 7: Adjust the slide animation

The very last thing to customize is the slide’s animation.

Go to “Slide Options” and “Animation” and you’ll find an Advanced setting called Panorama Horizontal selected. This is the transition visitors see when they first enter the 404 page.

If you’d like to change this setting, peruse the library of Transition Presets.

You don’t need to undo the current settings in order to see the other options. Just hover over each and the animation will play out in the canvas on the left.

Find the one you want to use and select it. Review the “Advanced” settings below the presets to further customize, if needed. When you’re done, save your changes.

Learn more:

How to design a 404 page that gets visitors back on track

The default WordPress 404 page is boring. And if your theme includes one, it’s likely very generic looking. Rather than leave visitors feeling annoyed or disappointed that they encountered a dead end, put a personal spin on the 404 page design with the help of the 404 Page Hero Collection.

How to Create an Entertaining 404 Page Design [Tutorial]

FREE: Your Go-To Guide For Creating
Awe-Inspiring Websites

Get a complete grip on all aspects of web designing to build high-converting and creativity-oozing websites. Access our list of high-quality articles and elevate your skills.

The Author

SR Staff

We're a passionate bunch of designers and developers writing about the ins and outs of web design.

Liked this Post?
Please Share it!

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.