Layers
Classes
Variables
Popup Builder
Visibility Conditions
Figma to Kirki
Custom Code
Review and Publish
Layers
Classes
Variables
Popup Builder
Visibility Conditions
Figma to Kirki
Custom Code
Review and Publish

404 Page

The 404 utility page gives you a ready-made page for visitors who land on an address that doesn’t exist on your site. It comes with a short message and a Back to Home button.

What is a 404 Page

A 404 page is what visitors see when they open an address that doesn’t exist on your site. This can happen when they mistype a URL, follow a broken link, or visit a page you’ve deleted.

How to Create a 404 Page

To create a 404 page in Kirki:

  1. Click the plus (+) icon next to Pages on the left sidebar.
  1. Hover over Utility Page in the menu.
  1. Select 404 from the list.

Kirki creates the page and opens it on the canvas right away. It’s saved as a draft until you publish it.

Note: Utility pages you’ve already created appear greyed out in the menu.

Customize Your 404 Page

Kirki’s 404 page works out of the box. Once it’s published, visitors who open a missing page see it with no extra setup on your side. But you can still change what it says, where its button leads, and how it looks.

How to Edit the 404 Message

To edit the 404 message:

  1. Select any of the text elements you want to change directly on the page or from the Layers panel.
  1. Double-click the text to edit it on the canvas, or change it in the content field at the top of the Design tab.

The Back to Home button isn’t linked to anything by default, so visitors who click it won’t go anywhere until you add a link.

  1. Select the button text on the canvas or from the Layers panel.
  1. Click the link icon at the top of the Design tab. The Link Settings window opens.
  1. Enter the page you want visitors to go to in the URL field, such as your home page. 

How to Style Your 404 Page

You can also update the style of your 404 page to match your brand:

  1. Select any part of the page: the page itself, or an element on it, like a heading, the paragraph, or the button.
  1. In the Design tab, adjust the layout, sizing, and style.

You can also add more elements to the page to make it feel like your own.

How to Publish Your 404 Page

Once your page looks the way you want, publish it so visitors can reach it.

  1. Click the arrow next to Save in the top right corner. This opens the Save panel.
  1. Check the Page Title. It defaults to “404”.
  1. Optional: Click Page Settings to review the page details.
  1. Click Publish to make the page live.

How to Test Your 404 Page

Once your page is published, test it to make sure everything works as expected.

  1. Open your site as a regular visitor. Log out first, or use an incognito window.
  1. Visit a page that doesn’t exist. For example, add random text to the end of your site address, like yoursite.com/this-page-does-not-exist.
  1. Check that your 404 page appears with your message and styling.
  1. Click Back to Home and check that it takes you to the right page.

If your 404 page appears and the button leads where you expect, your 404 page is ready.

Was this page helpful?

Our website uses cookies to improve your browsing experience on our website. By continuing to use this website, you agree to their use. For details, please check our Privacy Policy.