The default WordPress 404 page tells visitors that it couldn’t find what they were looking for and gives them a search bar to figure things out on their own. That’s not very helpful.
Luckily, there’s a way to turn the default WordPress 404 page into something helpful to your site visitors.
Curious to learn how? Keep reading.
I’ll teach you how to create a custom Kadence 404 page and share free templates that you can import into your site and use immediately.
Let’s get straight to it!
How to set up a custom 404 page with Kadence Theme Pro
Kadence Theme Pro makes it easy to set up a custom 404 page in a few clicks.
Here’s how you can add a custom 404 page to your website in six simple steps:
1. Upgrade to Kadence Theme Pro
Kadence Hooked Elements is a feature exclusive to Kadence Theme Pro users.
You can skip to the next step if you’re already on a paid plan.
But if you’re using the free version of the Kadence Theme, follow these steps:
Visit Kadence’s website and select a plan:
- Kadence Theme Pro.
- Essential Bundle.
- Full Bundle.
The Kadence Theme Pro plan only gives you access to the Pro version of the Kadence Theme. However, the Essential and Full Bundles offer a larger range of premium Kadence products.
Need help figuring out if Kadence Theme Pro is worth the upgrade? Consider reading my Kadence Theme review for a detailed breakdown of what Kadence Pro offers.
I’ve found that the Essential bundle is great for small websites, but the Full Bundle offers the best value for most users.
The Full Bundle gives you access to Kadence’s entire suite of products, plus 8,000 AI credits annually that never expire. I explain more about that in my Kadence AI first impressions post. Give that a read if you need help choosing the best plan to use Kadence AI.
All Kadence Pro plans include Element Hooks with a 30-day money-back guarantee.
Once you select a plan, enter your email address, billing details, and payment information. Then, agree to the terms and click Place Order.
After payment, you’ll receive a confirmation email. You can then access Kadence Theme Pro in your account.
Sign in to your Kadence account and click Download Files.
Depending on your plan, you’ll see the premium products available.
Find Kadence Pro Plugin – Premium addon for the Kadence Theme, click Download, and save the file on your computer.
In your WordPress admin panel, do the following:
- Go to Plugins > Add New.
- Click Upload Plugin, then Choose File and upload the Kadence Pro zip file you downloaded.
- Click Install Now. After installation, click Activate Plugin to complete the setup.
You’ll see a notification in your WordPress admin that your Pro Kadence Theme needs activation. Click the link to go to the Kadence theme dashboard.
Enter your License Key and License Email, and click Activate. You can copy your License Key from the License Keys section of your Kadence account.
Your Kadence Pro status will now show as ACTIVE. You’re all set to use Kadence Pro on your website!
2. Activate Hooked Elements
To use the Kadence Hooked Elements feature, go to Appearance > Kadence from the WordPress dashboard.
Then scroll down to the Pro Addons section and activate the Hooked Elements toggle.
3. Design your custom Kadence 404 element
Now, it’s time to create your custom Kadence 404 element!
Start by clicking the Customize hyperlink in the Hooked Elements box, or go to Appearance > Kadence > Elements > Add New on your dashboard.
You’ll find four element types:
- Content Section.
- Fixed Section.
- Templates.
- HTML Editor.
For this Kadence 404 page guide, I’ll select Templates because it lets you automatically replace a part of your website’s template, specifically the existing 404 page.
If you’re curious about these sections and how to use Hooked Elements effectively, consider reading my guide which explains how to use hooked elements in detail.
Next, add a title in the Add title area.
Now, build out your 404 page design using blocks.
In the following image, we have created a simple 404 Not Found page by using Kadence Blocks:
- Click the + (Add Block) button, search for Row Layout, and select the block.
- Add an Image block and insert a relevant image.
- Add a Text (Adv) block and insert the text “Whoops! That page doesn’t exist.” Adjust the font size and color to your preference under Style.
- Add another Text (Adv) block and insert the text “There’s nothing here, really. Maybe head back to our homepage and try again?.” Again, adjust the font size and color as needed. Make sure to add a link to your homepage.
- Center align all the blocks for a clean look.
Like my 404 page design? Grab our free Kadence 404 page templates for your website. They’re free, import instantly into your site, and save you the hassle of designing one from scratch 🙂
4. Set the Placement for the element
Once you’ve designed your 404 page, it’s time to set its placement.
Click on the Element Settings icon next to the ‘Publish’ icon at the top right of your screen. Using the dropdown menu, set the ‘Placement’ to Replace 404 Page Content.
Keep the Priority at the default value of 10.
Priority determines the display order of elements. A higher priority means the element appears before others with lower priorities. This feature is useful when you’ve hooked multiple elements to the same part of your site.
5. Configure the Display settings
Display Settings allows you to set specific conditions for displaying your element.
Since I want the custom 404 page to replace the default WordPress version, I’ll set the Show On option to Not Found (404).
You’ll also notice additional settings that aren’t necessary for a 404 page but useful for other types of content:
- Exclude Settings: Use this to hide the element on specific pages of your website.
- User Settings: This option allows the element to be visible only to certain user groups.
- Expire Settings: Set an expiry date for the element, which is ideal for time-sensitive content like promotions.
6. Publish your custom 404 element
Now that you’ve designed and configured your 404 page, you’re ready to go live!
Before you do, double-check your settings to make sure everything is correct. Then, click the Publish button on your element to activate it.
That’s all there is to setting up a custom 404 page with Kadence Theme Pro. You don’t have to deal with any code or worry about breaking your site. It doesn’t get any easier than that!
To see your custom 404 page in action, add some gibberish text like “/abc123” to your website URL. That should trigger a 404 error and show your newly created custom 404 page.
Here’s how my custom 404 page looks:
If you can’t see your custom 404 page, double-check your Display Settings and clear your website cache. It should start displaying after that.
Three inspiring 404 page design examples from successful brands
Looking for ideas on how to create a custom 404 page for your site?
Here are three examples to spark your creativity.
1. Visla
Visla‘s 404 page is simple and directs users back to their homepage. It adds design elements that align with their overall brand theme, creating a cohesive and recognizable look and feel.
2. HelpScout
HelpScout stays true to its name by using a clever and engaging tone. Their friendly approach helps lighten the frustration of reaching a dead end. Plus, the playful invitation to share a pet photo adds a personal touch that could improve user engagement!
3. ProtoPie
ProtoPie opts for a simple and clean design. Their 404 page suggests that users double-check the URL or refresh the page, helping them resolve the error themselves. It also provides two buttons: one to return to the home page and another to contact them for help.
Wrapping it up: Setting up a custom 404 page with Kadence is easy
No one wants to land on a 404 page, but if it happens, you’re ready to turn a minor hiccup into a big opportunity. With our custom Kadence 404 page templates, you might even see your bounce rates go down. 😉
Have questions or need a hand with this Kadence 404 page tutorial? Post it on the Ecommerce Launcher Reddit page or contact us using our contact form.
We’re here to help you make the most of your Kadence subscription. Let’s make those 404 pages something to smile about! 🙂
Want to do more with Kadence?
Check out these posts I’ve written to help you make the most of your Kadence Pro subscription:
